Daniel Marx

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.

May 15, 2020

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.

May 13, 2020

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.

Feb 4, 2020

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

Feb 4, 2020

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.

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.

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.

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.

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.

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.

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.

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.