Fork of Treemap

100%

Fork of Treemap

✓ Published0🌍 Public

Last edited Nov 28, 2024

Created on Nov 28, 2024

Forked from Treemap

This fork of a D3 treemap visualizes hierarchical data from a CSV file, showing the production values of countries grouped by continent as nested rectangles. Each rectangle uses color to represent its leaf node, and hovering highlights it while a title tooltip displays the country name and production value. The code uses `d3.csv`, `d3.stratify`, and `d3.treemap` to compute layout, then renders SVG rectangles and text labels with D3 v6.

AI-generated description

https://d3-graph-gallery.com/graph/bubblemap_template.html

MIT Licensed

Similar vizzes

Loading thumbnail…

Treemap

This treemap visualizes hierarchical data from a CSV file, showing production values for countries grouped under parent categories as nested rectangles. The example uses D3.js v6 with a CSV-parsed hierarchy, stratifying the data via `d3.stratify()` and computing rectangle positions with `d3.treemap()`. Rectangles are rendered as SVG elements with a teal fill and black stroke, while country labels appear in white text within each cell. The layout uses a fixed canvas size with padding between nodes, and styling comes from the included CSS.

Hhanulik.ondrej@gmail.com

88% match

Loading thumbnail…

Fork of Treemap

This visualization shows a hierarchical treemap where rectangular tiles represent data categories, with size indicating their relative production values. The treemap displays five groups (grp1–grp7) nested under an origin node, each filled with a uniform teal color and labeled with white text. Built with D3 v6, the code uses `d3.stratify` to convert CSV data into a hierarchy, `d3.treemap` to compute tile positions, and SVG `rect` and `text` elements for rendering.

GGayan Priyadarshana

86% match

Loading thumbnail…

Fork of D3 Treemap

This example visualizes supermarket order data as a treemap, though the current implementation renders each data row as a fixed 50×50 cell in a diagonal layout rather than computing hierarchical rectangles. It loads CSV data via `d3.csv` and uses `d3.treemap()` for layout, though the layout result is not actually applied to the cells. The SVG output is appended to a `#treemap` div, with rectangles and text labels showing partner country names. The page uses D3 v7 and relies on dynamic window dimensions for the chart size.

GGayan Priyadarshana

84% match

Loading thumbnail…

Fork of World Countries Tree

This fork of the World Countries Tree shows the hierarchical structure of global regions and their member states from CSV data. The treemap-style layout uses a horizontal dendrogram that arranges continents, subregions, and countries as nodes, with leaf labels gradually decreasing in font size by depth. The visualization relies on D3 v5's `tree`, `hierarchy`, `linkHorizontal`, and `stratify` APIs to compute the layout and draw SVG paths and text. Interaction is limited to zooming via the `zoom` event handler.

81% match

Loading thumbnail…

Fork of Fork of TreeMap with Tooltips and colors correctly

A treemap visualization displays steel scrap exports by partner country, with rectangles sized and colored by total export value. The view supports drill-down through country nodes to reveal commodity-level breakdowns, with tooltips showing exact values. The code uses d3.csv to load data, d3.hierarchy and d3.treemap for layout, and d3.scaleSequential for color encoding. Rendered in SVG with d3 transitions for updates, a reset button restores the initial country-level view.

GGayan Priyadarshana

81% match

Loading thumbnail…

D3 Treemap

This D3 Treemap visualizes hierarchical data by representing each leaf node as a rectangle, with size determined by the `Quantity` field and colored steelblue. It loads comma-separated data from a GitHub Gist using `d3.csv`, parses numeric columns, and applies the `d3.treemap` layout to compute tile positions. The SVG rendering appends grouped rectangles and text labels for each country, with cell dimensions derived from the layout's `x0`, `y0`, `x1`, and `y1` values.

GGayan Priyadarshana

80% match

Loading thumbnail…

Fork of Tree

A fork of a three-layer D3 v7 tree visualization renders a hierarchical dataset of continents, countries, and cities using SVG. The code builds a vertical tree layout with `d3.hierarchy` and `d3.tree()`, then draws curved links with `d3.linkVertical()`. Node shapes encode depth: rounded rectangles for the root and countries, diamonds for continents, and circles for leaf cities, with a legend explaining each.

Mmaddulanagasanjana@gmail.com

79% match

Loading thumbnail…

Fork of d3-voronoi-treemap usage

This example uses the d3-voronoi-treemap plugin to display the global economy by GDP as of January 2017, with countries sized by their economic weight and grouped by continent. Each country appears as a polygonal cell within a circular treemap, colored by its continent’s assigned hue. The code loads hierarchical JSON data, computes a weighted Voronoi treemap layout with a custom clipping polygon, and renders the result as SVG paths and labels. Built with D3 v4, it also includes hover effects and a color legend.

Ssmeiljoe

79% match