Por Variedade

100%

✓ Published0🌍 Public

Last edited Feb 4, 2020

Created on Feb 4, 2020

Forked from Por TCH

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.

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

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

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

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

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

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

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

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