Skip to main content
SimilarExport ZIP
100%

Botafogo

✓ Published1🌍 Public
DDaniel Marx
Last edited Jan 29, 2020
Created on Jan 28, 2020
Forked from Itapipiré

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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
78% 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
75% match
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
75% match
Loading thumbnail…

Itapipiré

This visualization, titled "Itapipiré," displays a treemap of sugarcane variety weights using a circular layout clipped to a polygon, rendered with SVG. It uses the `d3.voronoiTreemap`, `d3-weighted-voronoi`, and `d3.voronoiMap` plugins on top of D3 v4, with data from a JSON file. The treemap cells are colored by parent category, with legends and a title overlaid. A button triggers PNG export via canvas-toBlob and FileSaver.js, though the core drawing remains SVG-based.

DDaniel Marx
73% match
Loading thumbnail…

d3-voronoi-treemap usage

A Voronoi treemap visualizes the distribution of production across different farms, using area to represent each region's economic weight. The visualization uses the `d3.voronoiTreemap` API from the `d3-voronoi-treemap` library, which partitions a circular clipping area into weighted Voronoi cells. Data is loaded from a JSON file containing hierarchical farm and country information. The SVG output includes styled cells with white borders, labels showing names and weights, and a title, with interactive hover effects that highlight individual cells.

DDaniel Marx
73% 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
72% 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
72% 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
72% match