Skip to main content
SimilarExport ZIP
100%

Voronoi Treemap

✓ Published0🌍 Public
SSokrates86
Last edited Jan 20, 2016
Created on Jan 20, 2016

A Voronoi treemap displays hierarchical data as nested, weighted polygonal cells filling a chosen boundary shape, such as a rectangle or triangle. The example uses Finnish household expenditure data from the included `data.js`, showing categories and subcategories with sizes proportional to spending. The algorithm iteratively adjusts site weights to match target areas, relying on convex hull computation and power diagrams implemented in `ConvexHull.js` and `PowerDiagram.js`. Rendered as an SVG via d3.v2, the visualization offers interactive controls to switch datasets, polygon shapes, and color schemes.

AI-generated description

Built with blockbuilder.org

Similar vizzes

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

Weighted Voronoi Treemap in D3v4

A weighted Voronoi treemap recursively partitions polygons to visualize hierarchical data from the Flare dataset, encoding node size by area and applying a color scale by depth or name. Computed via an iterative power diagram, the layout supports user-configurable bounding shapes (rectangle, triangle, pentagon, octagon, or circle) and adjustable depth. The example builds on a D3v4 port with added `d3.polygonClip` and custom `d3.voronoitreemap` layout functions, rendering the result as SVG paths.

TThanaporn-sk
82% 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…

Voronoï playground: Voronoï treemap (study 3)

This example shows a hierarchical Voronoï treemap, where nested data is partitioned into a circular diagram using weighted Voronoï cells. The visualization displays either the weighted Voronoï cells, the cell weights as circles, or both, with an option to toggle site visibility. It uses the d3-voronoi-map plugin to recursively compute one-level Voronoï maps for each hierarchy level, clipping polygons for child nodes as they are generated. The code builds on d3.hierarchy and d3.scaleOrdinal with the d3.schemeSet1 color palette, rendering the result as SVG.

KKcnarf
81% 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
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
80% 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
80% match