Cor por idade

100%

✓ Published1🌍 Public

Last edited May 15, 2020

Created on May 13, 2020

Forked from Por TCH

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

AI-generated description

A bare minimum HTML page.

Similar vizzes

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…

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

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

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

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

74% match

Loading thumbnail…

d3-voronoi-treemap usage

This example visualizes the global economy by GDP using a Voronoi treemap, presenting hierarchical data as nested polygonal cells whose areas reflect weights. It shows the distribution of GDP across continents and major countries, with each cell labeled and colored by category. The code uses the d3-voronoi-treemap plugin, which tesselates a 60-gon (simulating a circle) into inner cells, alongside d3.hierarchy for data structuring and d3.v4 for SVG rendering. Data comes from a JSON file containing weighted country and continent entries, displayed within a static, styled SVG layout.

MMisunoKitara

73% match

Loading thumbnail…

d3-voronoi-treemap

The visualization displays global economic output by GDP, showing a treemap that morphs between rectangular and Voronoï layouts. It uses D3.js v4 with the d3-voronoi-treemap plugin, which iteratively partitions space to create weighted Voronoï polygons. Animated transitions between the two layouts are powered by flubber's `fromRect` interpolation, applied via `transition.attrTween` on SVG paths. The data comes from a JSON file of country GDP weights grouped by continent, with each region assigned a distinct color.

KKcnarf

72% match

Loading thumbnail…

d3-voronoi-treemap usage

This visualization uses the `d3-voronoi-treemap` plugin to display global GDP shares by country and continent, based on data from a `globalEconomyByGDP.json` file. A clipped Voronoi treemap partitions a circular region into labeled cells sized by each economy’s relative weight, with continent grouping indicated by distinct colors. The rendering is built with `d3.hierarchy` and `d3.voronoiTreemap`, producing an SVG output where hovered cells are highlighted with a thick white stroke. The title and legends are drawn within the same SVG container.

Jjsong

72% match