d3-voronoi-treemap

100%

d3-voronoi-treemap

✓ Published0🌍 Public

Last edited Jun 28, 2019

Created on Jun 28, 2019

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.

AI-generated description

This block experiments the use of @veltman's flubber d3 plugin in order to transition back and forth from a rectangular treemap to a Voronoï treemap (computed thanks to @kcnarf's d3-voronoi-treemap plugin).

Acknowledgments to :

lgpl-3.0 Licensed

Similar vizzes

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

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

90% match

Loading thumbnail…

d3-voronoi-treemap usage

This example shows the global economy by GDP as a Voronoi treemap, where the area of each cell represents a nation's economic weight, grouped by continent. The treemap is generated using the `d3-voronoi-treemap` plugin, which tesselates a circular polygon into nested, weighted cells. The data is loaded from a JSON file containing country GDP values, and visual hierarchy is computed with `d3.hierarchy`. The rendering uses SVG paths and text labels, with hover effects on each cell.

FFrissAnalytics

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

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

90% match

Loading thumbnail…

d3-voronoi-treemap usage

This visualization uses the `d3-voronoi-treemap` plugin to display global GDP shares by country and continent, based on data from a `globalEconomyByGDP.json` file. A clipped Voronoi treemap partitions a circular region into labeled cells sized by each economy’s relative weight, with continent grouping indicated by distinct colors. The rendering is built with `d3.hierarchy` and `d3.voronoiTreemap`, producing an SVG output where hovered cells are highlighted with a thick white stroke. The title and legends are drawn within the same SVG container.

Jjsong

89% match

Loading thumbnail…

Fork of d3-voronoi-treemap usage

A Voronoi treemap shows the global economy by GDP as of January 2017, with countries as cells sized by their economic weight and grouped by continent, each with a distinct color. The circular layout clips the treemap using a computed polygon, and hover effects highlight individual cells. The visualization is built with React, D3 v4, and the d3-voronoi-treemap plugin, which combines d3-weighted-voronoi and d3-voronoi-map to compute the layout. Data comes from a JSON file listing GDP values and country codes, and the SVG rendering includes labels, legends, and a title.

PPekingWaldo

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

88% match