Skip to main content
SimilarExport ZIP
100%

d3-voronoi-treemap usage

✓ Published0🌍 Public
KKcnarf
Last edited Aug 17, 2018
Created on Dec 8, 2017

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.

AI-generated description

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.

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
93% 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

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
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
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
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
78% 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
77% match
Loading thumbnail…

d3-voronoi-treemap

The visualization displays global economic output by GDP, showing a treemap that morphs between rectangular and Voronoï layouts. It uses D3.js v4 with the d3-voronoi-treemap plugin, which iteratively partitions space to create weighted Voronoï polygons. Animated transitions between the two layouts are powered by flubber's `fromRect` interpolation, applied via `transition.attrTween` on SVG paths. The data comes from a JSON file of country GDP weights grouped by continent, with each region assigned a distinct color.

KKcnarf
76% match