This block illustrates the use of the d3-voronoi-map plugin. This block is a remake of the HowMuch.net‘s post The Costs of Being Fat, in Actual Dollars.

The d3-voronoi-map plugin produces Voronoï maps (one-level treemap). Given a convex polygon (here, a 60-gon simulating a circle for each gender) and weighted data, it tesselates/partitions the polygon in several inner cells, such that the area of a cell represents the weight of the underlying datum.

An iteration on this block enhances the user experience by (i) always producing the same Voronoï map on reloads and (ii) having the same layout (e.g. placing sites/cells of the same type at the same position) which eases comparison.

- D3.js (v.4)
- d3-voronoi-map plugin
- blockbuilder.org
- (part of) https://github.com/ArlindNocaj/Voronoi-Treemap-Library for a Java implementation