Skip to main content
SimilarExport ZIP
100%

d3-voronoi-treemap usage

✓ Published0🌍 Public
KKcnarf
Last edited Dec 3, 2018
Created on Apr 25, 2018

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.

AI-generated description

This block illustrates the use of the d3-voronoi-map plugin. It enhances a previous block by always producing the same Voronoï map on reloads (more explanations below, before the Acknowledgments section). 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.

An iteration on this block enhances uses the version 2 of the plugin, which displays the live self-arrangement of the Voronoï map.

Acknowledgments to :

mit Licensed

Similar vizzes

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
95% match
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
93% 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
93% match
Loading thumbnail…

d3-voronoi-treemap usage

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.

663anp3ca
91% 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
83% 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
80% match
Loading thumbnail…

d3-voronoi-treemap

This example shows an animated Voronoi treemap that transitions between two different weightings of global GDP data, with regions color-coded and labeled by country. The visualization moves between two hierarchies, demonstrating how cells morph and rearrange when weights are altered. The implementation uses `d3-voronoi-treemap` to generate the tessellations, `flubber` to create smooth polygon interpolations, and `d3.select`/`.append` for SVG rendering. The code computes two copies of the hierarchy, alters their weights, and pairs cells by name to animate the transition, with a checkbox to toggle inner cell visibility.

KKcnarf
78% match
Loading thumbnail…

d3-voronoi-treemap usage

The global economy by GDP is depicted as a Voronoi treemap within a polygon shaped like Earth, with cell areas representing each country's GDP share. It uses the `d3-voronoi-treemap` plugin to partition the circle, a 60-gon, based on nested JSON data. The visualization applies D3 v6 for rendering, an SVG layout, and a color legend for continents. Data is sourced from a JSON file containing country weights, and the plugin is built on `d3-weighted-voronoi` and `d3-voronoi-map`.

KKcnarf
78% match