Show cluster circles

Community Help
1

Hello again.

I have built my own graph based on the clustered bubbled example:

However, I would also like to implement the Show cluster circles checkbox, but it is not clear to me how this is done.

In the downloaded file I find this function:

function _grouped(html)
{
  const form = html`<form><label><input name=checkbox type=checkbox> Show cluster circles</label>`;
  form.checkbox.onclick = () => (form.value = form.checkbox.checked, form.dispatchEvent(new CustomEvent("input")));
  form.value = form.checkbox.checked;
  return form;
}

But what does it mean? I want to do it in plain vanilla code.

Please help.

2

It returns an input widget that can be utilized through Observable’s viewof cells.

3

Right, but how then are the circle clusters being drawn?

4

You attach an event listener to the element, and on any input event you redraw the chart with the widget .value as new grouped value.

(It’s easier to explain if you can share your current code.)

5

I really appreciate your help, but I am not interested in how the trigger works.

Perhaps I have not worded myself clearly enough.

I only want to know how the cluster circles are drawn.

6

The name of the check box is viewof grouped and the value of that check box is grouped. If you examine the code, you’ll notice a block that looks like so:

if (grouped) svg.append("g")
    .attr("fill", "none")
    .attr("stroke", "#ccc")
  .selectAll("circle")
  .data(root.descendants().filter(d => d.height === 1))
  .join("circle")
    .attr("cx", d => d.x)
    .attr("cy", d => d.y)
    .attr("r", d => d.r);

Thus (to answer your question directly), the part after if (grouped) is exactly the portion that draws the circles. That’s a pretty standard D3 selection/join technique. The fact that code is called in response to the check box is handled by the Observable runtime.

How you set this all up in a vanilla HTML environment depends on how you chose to set up the overall structure in the first place. I guess that’s why mootari says that “It’s easier to explain if you can share your current code.”

7

Like Mark explained, the drawing is guarded by the grouped variable. If you read my response carefully you will find that I wrote

8

Thanks!

9

Thanks again, I will check this out.

At first glance I do not see how this code would draw the circles, but I will still give it a go and keep my fingers crossed.