A playful variation on this example about collision detection, aiming to create a sort of weighted Voronoi tessellation. The center of each circle is used as an input vertex for d3.geom.voronoi (see the docs).
Some cells are indeed bigger than other ones, but the resulting area is in general not proportional to the intended value.
The non-overlapping circles used to generate the tessellation can be seen as translucent bubbles. You can also adjust the padding between them by using the slider.
Forked from a Mike Bostock example.
Click and drag above to paint hexagons. Whenever you release the button, a new color is selected. A black outline will appear around contiguous clusters of hexagons filled with the same color.
As the original, this example uses topojson.mesh, part of the TopoJSON client API. The filter is modified to take multiple colors into consideration.
Again, as the original, integer coordinates are used to leverage TopoJSON functions, and a custom projection is used to make the hexagons regular in the representation.
Source code is both in Coffeescript+SASS, and in Javascript+CSS compiled form.