Voronoï playground : interactive weighted Voronoï study II

This block experiments weighted Voronoï diagram, and is a continuation of a previous block. Weighted Voronoï diagram comes in severall flavours (additive/multiplicative, powered/not-powered, 2D/3D and highier dimensions, …), but this block focuses on the 2D additive weighted power diagram, which provides a tessellation made of concave polygons/cells with straight borders, as the default Voronoï diagram does.

What are you seeing ?

• there is 2 sites (one blue and one green), with their corresponding influence areas (i.e. cells)
• if weights are big enough, circles around sites give a sense of the weight of each site

User interactions :

• you can change the weight of each site with the corresponding slider
• you can drag and drop each site

Code details :

Code essentially comes from mkedwards‘s block: Treemap, which is an implementation of the technique describe in Computing Voronoi Treemaps : Faster, Simpler, and Resolution-independent. I extracted the code which produces the power diagram, and updated it for D3v4:

• reuse ConvexHull.js,
• reuse PowerDiagram.js,
• remove VoronoiTreemap.js,
• remove VoronoiTreemapD3.js,
• remove Vertex’s percentage,
• dummy bounding sites related to clipping polygon (ie. available area), instead of depending on extremes sites
• in linearDependant function, bug fix p1.x==0 || p2.x==0 (insteaf of p1.x==0 || p1.x==0)
• add epsilonesque function
• rename GraphEdge as ConflictListNode

Furthermore, as d3 v4 no longer provides polygon clipping, code for polygon clipping comes from mbostock‘s block: Polygon Clipping III, which he introduces as ‘a trivial port of Sutherland–Hodgman clipping from v3’.

For a more up-to-date version of the code, please refer to the [Weighted Voronoi Treemap in D3v4] (https://bl.ocks.org/kcnarf/15d54f4ccae6a3710cd3029546664eec) block.

Acknowledgments to:

• D3.js (v.4)
• blockbuilder.org
• mkedwards‘s block: Treemap