BURRO VELHO

100%

✓ Published0🌍 Public

Last edited Jan 29, 2020

Created on Jan 29, 2020

Forked from Por TCH

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.

AI-generated description

A bare minimum HTML page.

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

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

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

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

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

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

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…

Cor por idade

This example visualizes agricultural land distribution by age group using a Voronoi treemap, rendered as colored cells within a circular boundary. The layout uses the `d3.voronoiTreemap` plugin to partition hierarchical data from `globalEconomyByGDP.json`, with each cell sized by weight and labeled with age categories. The code sorts legend entries by computed mean productivity values, draws the treemap via SVG, and includes a button that exports the visualization to a PNG using `canvas-toBlob.js` and `FileSaver.js`.

DDaniel Marx

70% match