# Show cluster circles

**URL:** <https://talk.observablehq.com/t/show-cluster-circles/8672>\
**Category:** Help\
**Created:** [January 5, 2024, 7:19pm UTC](https://talk.observablehq.com/t/show-cluster-circles/8672 "2024-01-05T19:19:06Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![kgish](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kgish/32/8188_2.png) [@kgish](https://talk.observablehq.com/u/kgish)\
**Post date:** [January 5, 2024, 7:19pm UTC](https://talk.observablehq.com/t/show-cluster-circles/8672/1 "2024-01-05T19:19:06Z")

</div>

Hello again.

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

> **[Clustered Bubbles](https://observablehq.com/@mbostock/clustered-bubbles)**

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [January 5, 2024, 8:19pm UTC](https://talk.observablehq.com/t/show-cluster-circles/8672/2 "2024-01-05T20:19:54Z")

</div>

It returns an input widget that can be utilized through [Observable’s `viewof` cells](https://observablehq.com/@mootari/what-has-viewof-ever-done-for-us).

---

<div class="post-metadata">

**Author:** ![kgish](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kgish/32/8188_2.png) [@kgish](https://talk.observablehq.com/u/kgish)\
**Post date:** [January 5, 2024, 9:20pm UTC](https://talk.observablehq.com/t/show-cluster-circles/8672/3 "2024-01-05T21:20:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [January 5, 2024, 11:57pm UTC](https://talk.observablehq.com/t/show-cluster-circles/8672/4 "2024-01-05T23:57:12Z")

</div>

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.)

---

<div class="post-metadata">

**Author:** ![kgish](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kgish/32/8188_2.png) [@kgish](https://talk.observablehq.com/u/kgish)\
**Post date:** [January 6, 2024, 9:29am UTC](https://talk.observablehq.com/t/show-cluster-circles/8672/5 "2024-01-06T09:29:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [January 6, 2024, 12:04pm UTC](https://talk.observablehq.com/t/show-cluster-circles/8672/6 "2024-01-06T12:04:32Z")

</div>

> [@kgish](#):
>
> I only want to know how the cluster circles are drawn.

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.”

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [January 6, 2024, 12:27pm UTC](https://talk.observablehq.com/t/show-cluster-circles/8672/7 "2024-01-06T12:27:01Z")

</div>

> [@kgish](#):
>
> I only want to know how the cluster circles are drawn.

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

> [@mootari](#):
>
> you redraw the chart with the widget `.value` as new `grouped` value

---

<div class="post-metadata">

**Author:** ![kgish](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kgish/32/8188_2.png) [@kgish](https://talk.observablehq.com/u/kgish)\
**Post date:** [January 6, 2024, 9:22pm UTC](https://talk.observablehq.com/t/show-cluster-circles/8672/8 "2024-01-06T21:22:59Z")

</div>

Thanks!

---

<div class="post-metadata">

**Author:** ![kgish](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/kgish/32/8188_2.png) [@kgish](https://talk.observablehq.com/u/kgish)\
**Post date:** [January 6, 2024, 9:24pm UTC](https://talk.observablehq.com/t/show-cluster-circles/8672/9 "2024-01-06T21:24:31Z")

</div>

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.