Skip to main content
SimilarExport ZIP
100%

d3-voronoi-treemap usage

✓ Published0🌍 Public
663anp3ca
Last edited Sep 24, 2018
Created on Sep 24, 2018

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.

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'>d3-voronoi-treemap usage</a>

lgpl-3.0 Licensed

Similar vizzes

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

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

Fork of d3-voronoi-treemap usage

This example uses the d3-voronoi-treemap plugin to display the global economy by GDP as of January 2017, with countries sized by their economic weight and grouped by continent. Each country appears as a polygonal cell within a circular treemap, colored by its continent’s assigned hue. The code loads hierarchical JSON data, computes a weighted Voronoi treemap layout with a custom clipping polygon, and renders the result as SVG paths and labels. Built with D3 v4, it also includes hover effects and a color legend.

Ssmeiljoe
87% 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
82% 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
81% match