Por Idade

100%

✓ Published1🌍 Public

Last edited Jan 31, 2020

Created on Jan 31, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

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

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

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

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

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

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

73% match