Skip to main content
SimilarExport ZIP
100%

Itapipiré

✓ Published2🌍 Public
DDaniel Marx
Last edited Jan 29, 2020
Created on Jan 25, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

Cor por Variedade

This visualization uses a Voronoi treemap to display sugarcane variety data from a farm, with each cell’s area proportional to the total planted hectares and colored by variety. The layout is computed with `d3.voronoiTreemap` on a circular clipping polygon. Rendering uses SVG, with a legend ordered by mean production per variety. The data is loaded from a JSON file, and the chart includes a PNG export button using canvas conversion and FileSaver.js.

DDaniel Marx
77% match
Loading thumbnail…

Por Idade

This visualization, titled "Por Idade," shows the average productivity of sugarcane varieties on a farm, with each variety represented as a voronoi-treemap cell sized by weight and colored by code. The data is sorted and labeled by rank, and a legend displays each variety's name and computed mean value. Implemented with React and D3 v4, the code uses `d3.voronoiTreemap`, `d3.hierarchy`, and `d3.scaleLinear` to compute the layout, rendering SVG cells and canvas-based PNG export via FileSaver. The circular clipping polygon constrains the treemap, and the data comes from a provided JSON file.

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