ATR

100%

✓ Published1🌍 Public

Last edited Jan 31, 2020

Created on Jan 29, 2020

Forked from Por TCH

This visualization uses a Voronoi treemap to display hierarchical data, with each cell representing a data point and its size proportional to a weight value. The code leverages the `d3-voronoi-treemap` plugin along with `d3-weighted-voronoi` and `d3-voronoi-map` to compute the layout, while D3 v4 handles the SVG rendering. The example remakes a chart about the costs of being fat, using a JSON dataset with cluster groups and numeric codes. It includes a button to export the visualization to a PNG via the canvas-toBlob library and FileSaver.js.

AI-generated description

A bare minimum HTML page.

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

79% match

Loading thumbnail…

Por TCH

This visualization adapts the d3-weighted-voronoi plugin to render a voronoi treemap of hierarchical economic data, titled "Fazenda Burro Velho." Each cell’s area encodes weight values, while numeric labels display the `code` metric for each child node. The code computes mean values per group, sorts children, and maps them to a colored legend. It uses `d3.hierarchy`, `d3.voronoiTreemap`, and SVG paths, with interactive PNG export via `canvas-toBlob` and `FileSaver`.

DDaniel Marx

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

78% match

Loading thumbnail…

Por Idade

This visualization reimagines "The Costs of Being Fat, in Actual Dollars" as a Voronoi treemap, displaying hierarchical economic data categorized into colored parent groups. Each cell's size represents a data weight, while the layout distributes them within a circular boundary. Built with React and D3 v4, it employs `d3.voronoiTreemap`, `d3.hierarchy`, and a weighted Voronoi algorithm to compute the polygon-based partition. The visualization renders via SVG and includes a canvas-based PNG export button using `canvas-toBlob` and `FileSaver`. Data comes from `globalEconomyByGDP.json`, with parent groups sorted by computed mean values.

DDaniel Marx

78% match

Loading thumbnail…

Por Mês

This example visualizes hierarchical data as a Voronoi treemap, using a circular clipping polygon to group weighted nodes by category and month. It shows the distribution of numeric weights across distinct colored clusters, with each cell labeled by its name and value. The visualization is built with React, D3 v4, and the `d3-voronoi-treemap` plugin, which computes the layout via `d3.hierarchy` and `d3.voronoiTreemap`. Rendering combines SVG for shapes and text with canvas-based PNG export via FileSaver, sourced from a JSON dataset.

DDaniel Marx

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

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

76% match