Skip to main content
SimilarExport ZIP
100%

Por TCH

✓ Published5🌍 Public
DDaniel Marx
Last edited Feb 4, 2020
Created on Jan 29, 2020
Forked from BURRO VELHO

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

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

BURRO VELHO

This visualization uses a Voronoi treemap to depict grouped data, with each colored region representing a category and its sub-regions sized by a weight value. The layout is computed with the `d3.voronoiTreemap` plugin, which relies on `d3.hierarchy` and a clipped polygon to generate the cell shapes. Regions are rendered as SVG paths with labels, and a legend maps the top-level colors to their names. The page also includes a button that exports the current SVG visualization to a PNG file using the Canvas API and FileSaver.js.

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

BURRO VELHO

This visualization, titled "BURRO VELHO," uses a d3-voronoi-treemap to display agricultural production data, breaking down sugarcane varieties (like RB867515) into individual plots with their respective yields and weights. The layout arranges cells within a circular clip region, with each cell's size and color encoding data values. Built with D3 v4 and React, the code leverages `d3.voronoiTreemap`, `d3.hierarchy`, and `d3.scaleLinear`, rendering via SVG. It includes a canvas-based export button using FileSaver.js to save the visualization as a PNG image. The JSON data structure defines hierarchical parent-child relationships for the treemap.

DDaniel Marx
81% 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
80% match
Loading thumbnail…

Por Idade - Arizona

This example visualizes the hierarchical distribution of data related to "Fazenda Arizona," depicting nested categories as a Voronoi treemap. It shows the relative weights of individual data points within colored parent groups, with a computed legend ordering the groups by mean value. The visualization uses the d3-voronoi-treemap library, which builds on d3-weighted-voronoi and d3-hierarchy, to compute the polygonal layout from the `globalEconomyByGDP.json` data. The rendering is done via SVG, with an option to export the current view to a PNG file using canvas-toBlob and FileSaver.

DDaniel Marx
79% match
Loading thumbnail…

Por Variedade

Por Variedade visualizes a weighted Voronoi treemap of agricultural plot data from a JSON file, where each cell's area corresponds to the number of sub-plots per variety, and the color-coded regions are labeled with their proportional shares. Built with React and D3 v4, it uses the `d3.voronoiTreemap`, `d3-weighted-voronoi`, and `d3-voronoi-map` libraries to compute the polygonal layout, clipped within a circular boundary. The SVG rendering includes a legend ranking variety participation percentages, and a button exports the visualization to PNG via canvas-toBlob and FileSaver.

DDaniel Marx
79% match
Loading thumbnail…

ATR

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.

DDaniel Marx
79% match
Loading thumbnail…

Botafogo

This example uses a Voronoi treemap to visualize farm data from the Fazenda Botafogo dataset, which contains hierarchical groups with weighted leaf nodes. The treemap partitions a circular polygon into colored cells, each representing a data point, with labels and values displayed within. Built with React and D3 v4, it leverages the `d3-voronoi-treemap`, `d3-weighted-voronoi`, and `d3-voronoi-map` plugins to compute the layout. The visualization renders with SVG for shapes and text, and includes a button to export the current view to a PNG file using canvas-toBlob and FileSaver.

DDaniel Marx
78% match