d3-voronoi-treemap usage

100%

d3-voronoi-treemap usage

✓ Published0🌍 Public

Last edited Oct 9, 2018

Created on Oct 9, 2018

This block demonstrates the d3-voronoi-map plugin v2, which partitions weighted data into Voronoï cells within a given polygon. It recreates the “Costs of Being Fat” visualization by comparing the annual financial burden of obesity for men and women, using two circular 60-gons as the clipping areas. The plugin’s new initialPosition API is used to set the starting positions of sites, ensuring that the iterative Voronoï computation always produces the same layout on reload, and also aligning cells across the two gender-specific maps for easier comparison. The data (e.g., medical costs, productivity loss) is encoded by cell area, with each cell colored according to its cost category, and a legend and mouse interactions facilitate exploration. Rendered as SVG using D3 v5.

AI-generated description

This block illustrates the use of the d3-voronoi-map plugin. It enhances a previous block by using the version 2 of the plugin, which is capable of displaying the self-organizing arrangement of the Voronoï map. 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.

This block always produces the same Voronoï map on reload thanks to the initialPosition() API. This API allows to define the initial positions of each sites, before launching the iterative computation of the Voronoï map. By default, a random positioning is used, which leads to distinct final Vornoï maps on each reload. By setting the initial sites' positions in a repeatable way, reloadings produce always the same final Voronoï map.

In this particular block, controlling initial positions of sites also helps to make the two Voronoï maps (men/women) having the same layout (e.g. placing sites/cells of the same type at the same position), which eases comparison.

Acknowledgments to :

forked from <a href='http://bl.ocks.org/Kcnarf/'>Kcnarf</a>'s block: <a href='http://bl.ocks.org/Kcnarf/e649c8723eff3fd64a23f75901910930'>d3-voronoi-map : same final partitioning on reload</a>

forked from <a href='http://bl.ocks.org/Kcnarf/'>Kcnarf</a>'s block: <a href='http://bl.ocks.org/Kcnarf/89d9d2d575f5c4ad41235cad6b202742'>d3-voronoi-map v2 usage</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3-voronoi-treemap usage

This block demonstrates the d3-voronoi-map plugin by recreating HowMuch.net’s “The Costs of Being Fat, in Actual Dollars.” It partitions two circular polygons—one for men, one for women—into Voronoï treemap cells, where each cell’s area encodes the annual cost of a specific obesity-related expense (e.g., direct medical costs, sick leave). The data is loaded from a CSV file with two parallel weight columns (menCost and womenCost), and the plugin is used twice to generate separate Voronoï maps for each gender. The size of each circular treemap is scaled relative to the total cost for each gender, and cells are colored according to category. The visualization includes a legend and hover interaction for comparing the two maps, and is rendered in SVG using D3 v4.

663anp3ca

94% match

Loading thumbnail…

d3-voronoi-treemap usage

This example uses the d3-voronoi-map plugin to create two Voronoï treemaps comparing the costs of obesity for men and women. Each polygon’s area encodes the monetary cost from a CSV-derived dataset, with the men’s and women’s circle-shaped maps anchored at different coordinates. To ensure consistent and comparable layouts on every reload, the code calls `.initialPosition()` with a pie-based positioning strategy instead of relying on default random site placement. The visualization renders as an SVG using D3.js v5 and includes interactive highlighting triggered by mouse events.

KKcnarf

91% match

Loading thumbnail…

d3-voronoi-treemap usage

This visualization uses the d3-voronoi-map plugin to create a comparative treemap of the costs of obesity for men and women, based on CSV data from HowMuch.net. It shows two circular Voronoi cell layouts with identical arrangements to ease comparison, using an SVG renderer. The code leverages `d3.voronoiMapSimulation` with a custom `initialPosition` pie layout to ensure reproducible starting sites, and tracks flickering mitigation during iterative cell area adjustments.

KKcnarf

90% match

Loading thumbnail…

d3-voronoi-treemap usage

Two side-by-side Voronoi treemaps compare the annual costs of obesity for men and women, using the d3-voronoi-map plugin to partition circles into weighted cells. Each cell’s area encodes a cost category, with colors matching a legend and a dollar total beneath each gender. The d3.csv data is drawn as SVGs, and hovering highlights the corresponding category across both maps.

KKcnarf

88% match

Loading thumbnail…

d3-voronoi-treemap usage

This example shows a Voronoi treemap visualization of global GDP data, adapted from a HowMuch.net article. It displays hierarchical data as a partitioned circle, where each cell’s area corresponds to a data weight. The code uses the `d3-voronoi-treemap` plugin, built on d3.v4, along with helper libraries `d3-weighted-voronoi` and `d3-voronoi-map`. It renders as an SVG with interactive hover effects, loading data from a local JSON file.

MMisunoKitara

82% match

Loading thumbnail…

d3-voronoi-treemap usage

This block demonstrates the d3-voronoi-treemap plugin by visualizing global GDP distribution from a JSON dataset. Using D3 v4 and SVG rendering, it partitions a hexagonal (60-gon) convex polygon into nested Voronoï cells, where each cell’s area encodes a country’s share of world GDP. The treemap is grouped by continent, with each region assigned a distinct color, and countries are labeled with their names and GDP percentages. The visualization is an adaptation of HowMuch.net’s “Global Economy by GDP” article, implemented as an interactive, data-driven treemap that highlights the hierarchical structure of economic output.

663anp3ca

81% match

Loading thumbnail…

d3-voronoi-treemap usage

This example visualizes the global economy by GDP using a Voronoi treemap, presenting hierarchical data as nested polygonal cells whose areas reflect weights. It shows the distribution of GDP across continents and major countries, with each cell labeled and colored by category. The code uses the d3-voronoi-treemap plugin, which tesselates a 60-gon (simulating a circle) into inner cells, alongside d3.hierarchy for data structuring and d3.v4 for SVG rendering. Data comes from a JSON file containing weighted country and continent entries, displayed within a static, styled SVG layout.

MMisunoKitara

81% match

Loading thumbnail…

Weighted Voronoi Treemap in D3v4

This example demonstrates a weighted Voronoi treemap, which recursively subdivides a polygon into cells based on hierarchical data from the flare.json dataset. The visualization adapts cell sizes to reflect node values while offering interactive controls for changing the bounding polygon shape, color scheme, and maximum display depth. Built with D3 v4, the code uses several custom libraries, including ConvexHull.js, PowerDiagram.js, and d3.polygonClip, to compute the Voronoi diagram and render the resulting polygons as SVG paths.

KKcnarf

80% match