Treemap

100%

✓ Published2🌍 Public

Last edited Aug 21, 2022

Created on Aug 21, 2022

Forked from bubble

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.

AI-generated description

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

MIT Licensed

Similar vizzes

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

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

83% match

Loading thumbnail…

treemap

This treemap visualizes hierarchical data by displaying nested rectangles whose sizes correspond to data values, with color encoding categories and group labels. The example demonstrates the d3.treemap layout with SVG rendering, applying a color scale via d3.scaleOrdinal and interactive tooltips on mouse events. It loads external JSON datasets from URLs, using D3's d3.json to fetch data. The visualization highlights the D3 v4 API for hierarchical layouts and data-driven styling, with the option to switch between video game, movie, and Kickstarter datasets.

Vvaynexie

82% match

Loading thumbnail…

HTML Starter

This example demonstrates a basic treemap visualization using D3.js within an HTML page. It displays hierarchical data from a CSV file as nested rectangles, with each leaf node rendered as a colored square with a white text label. The code uses `d3.stratify()` to convert the flat CSV data into a hierarchy, `d3.treemap()` to compute the layout positions, and SVG `rect` and `text` elements for rendering. The rectangles are filled with a teal color and outlined in black, following the structure of the provided one-level dataset.

Ssgalhamdani

82% match

Loading thumbnail…

Treemap example

This treemap presents the populations of ten countries, with each rectangle’s width proportional to its population and the height divided equally. The visualization uses a bar-chart layout rather than a nested treemap, with countries listed on the y-axis and population values on the x-axis. Built with D3 v5, the code loads data from `data.csv` and draws SVG rectangles using `scaleLinear` and `scaleBand` scales, with axes rendered via `axisLeft` and `axisBottom`.

Zzjutkarma

81% match

Loading thumbnail…

Treemap in d3

This example demonstrates a treemap visualization of hierarchical data, with nested rectangles representing the A1, B1/B2, and C1/C2/C3 nodes. It uses d3.treemap to compute the layout based on summed values, with padding and a fixed size of 800 by 400 pixels. The d3.hierarchy API organizes the data structure, while descendants are rendered as SVG groups, rects, and text elements using d3.select and join. The visualization clearly shows proportional area encoding, with rectangles colored in semitransparent cadetblue and labeled for each node.

SSubhendu Karmakar

80% match

Loading thumbnail…

Treemap Example

This treemap visualizes the hierarchical flare dataset, showing relative leaf-node values as nested rectangles colored by their top-level parent category. Built with D3 v6 and rendered as SVG, the example implements a custom treemap layout algorithm via recursive space partitioning that alternates between horizontal and vertical splits. The code uses d3.scaleLinear for proportional sizing, d3.scaleOrdinal with d3.schemeCategory10 for colors, and calculates text visibility based on rectangle dimensions. Data is loaded from a JSON file and displayed with interactive hover effects absent, focusing purely on static hierarchical encoding.

HhelloHailey-sketch

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

79% match