Skip to main content
SimilarExport ZIP
100%

d3-voronoi-treemap usage

✓ Published0🌍 Public
MMisunoKitara
Last edited Nov 12, 2019
Created on Nov 12, 2019

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.

AI-generated description

This block illustrates the use of the d3-voronoi-treemap plugin. This block is a remake of the HowMuch.net's article The Global Economy by GDP.

The d3-voronoi-treemap plugin produces Voronoï treemap. Given a convex polygon (here, a 60-gon simulating a circle for each gender) and nested weighted data, it tesselates/partitions the polygon in several inner cells which represent the hierarchical structure of your data, such that the area of a cell represents the weight of the underlying datum.

Acknowledgments to :

forked from <a href='http://bl.ocks.org/Kcnarf/'>Kcnarf</a>'s block: <a href='http://bl.ocks.org/Kcnarf/fa95aa7b076f537c00aed614c29bb568'>SparkCentral 2019: 2</a>

lgpl-3.0 Licensed

Similar vizzes

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
94% 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
91% 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 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…

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
89% 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
88% 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
88% 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
87% match