# Voronoi with bounding circles

**URL:** <https://talk.observablehq.com/t/voronoi-with-bounding-circles/2525>\
**Category:** Help\
**Created:** [November 8, 2019, 2:45pm UTC](https://talk.observablehq.com/t/voronoi-with-bounding-circles/2525 "2019-11-08T14:45:17Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![bjl2n](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bjl2n/32/2362_2.png) [@bjl2n](https://talk.observablehq.com/u/bjl2n)\
**Post date:** [November 8, 2019, 2:45pm UTC](https://talk.observablehq.com/t/voronoi-with-bounding-circles/2525/1 "2019-11-08T14:45:17Z")

</div>

I would like to achieve the bounding circles voronoi as seen in this blog post:

> **[Data made insightful, effective & beautiful through visualization](https://www.visualcinnamon.com/2015/07/voronoi)**
>
> Visual Cinnamon | Data made insightful, effective & beautiful through visualization

The author has an example of the code she is using to achieve the effect, but I cannot understand how to modify it to work with my simple example:

> **[Voronoi with circle boundaries](https://observablehq.com/d/759d5e7f21753d85)**
>
> An Observable notebook by Ben Lobo.

where I have the regular voronoi set up. I was hoping someone could point me in the right direction.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [November 8, 2019, 3:20pm UTC](https://talk.observablehq.com/t/voronoi-with-bounding-circles/2525/2 "2019-11-08T15:20:57Z")

</div>

Here is an example of clipping a Voronoi diagram using circles around the sites:

> **[Drag (SVG Voronoi, Clipped)](https://observablehq.com/@d3/drag-svg-voronoi-clipped)**
>
> An Observable notebook by D3.

The key parts are:

- Define a clipPath for each circle.
- Give each circle’s clipPath a unique identifier. (I used DOM.uid.)
- Set the clip-path attribute for each circle using this identifier.

I wanted to draw two circles for each point (a small dot surrounded by a larger circle), so I used a G element to contain the circles. To avoid the G’s transform transforming the clip path, I used nested G elements.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![bjl2n](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bjl2n/32/2362_2.png) [@bjl2n](https://talk.observablehq.com/u/bjl2n)\
**Post date:** [November 8, 2019, 3:53pm UTC](https://talk.observablehq.com/t/voronoi-with-bounding-circles/2525/3 "2019-11-08T15:53:18Z")

</div>

Doh, cannot believe I missed that notebook when I searched. This should be what I need. Thanks.

---

<div class="post-metadata">

**Author:** ![bjl2n](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bjl2n/32/2362_2.png) [@bjl2n](https://talk.observablehq.com/u/bjl2n)\
**Post date:** [November 8, 2019, 4:16pm UTC](https://talk.observablehq.com/t/voronoi-with-bounding-circles/2525/4 "2019-11-08T16:16:45Z")

</div>

Just managed to get it working using your notebook as inspiration:

> **[Voronoi with circle boundaries](https://observablehq.com/d/759d5e7f21753d85)**
>
> An Observable notebook by Ben Lobo.

Thanks for the example and clear instructions.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [November 8, 2019, 4:38pm UTC](https://talk.observablehq.com/t/voronoi-with-bounding-circles/2525/5 "2019-11-08T16:38:19Z")

</div>

> [@bjl2n](#):
>
> Doh, cannot believe I missed that notebook when I searched.

I wrote it in response to your question. 🙂

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [November 9, 2019, 9:45pm UTC](https://talk.observablehq.com/t/voronoi-with-bounding-circles/2525/6 "2019-11-09T21:45:05Z")

</div>

@mbostock thanks for the example!

I may try to use an invisible version of this for specifying object hit targets on interactive diagrams.