Treemap

100%

✓ Published0🌍 Public

Last edited Sep 7, 2018

Created on Sep 7, 2017

A treemap recursively subdivides a rectangle into smaller areas, where each node’s size corresponds to its value. This example encodes Flare visualization toolkit packages by color, using a squarified layout. The D3 v4 code loads hierarchical JSON data, applies `d3.hierarchy` with `.sum()`, and renders SVG rectangles and text with clip paths. A radio button toggles between size-based and count-based sums, triggering animated transitions via `cell.transition()` over 750 milliseconds.

AI-generated description

A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value. This example uses color to encode different packages of the Flare visualization toolkit. Treemap design invented by Ben Shneiderman. Squarified algorithm by Bruls, Huizing and van Wijk. Data courtesy Jeff Heer.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4063582'>Treemap</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Treemap

A treemap recursively subdivides a rectangle into smaller rectangles, with each node's area proportional to its value, encoding the hierarchical structure and size of the Flare visualization toolkit's packages through both position and color. The visualization includes an interactive radio-button control that toggles between summing leaf sizes and counting leaves, triggering a 750-millisecond transition that animates rectangle boundaries using D3 v4's `d3.treemap` with the `d3.treemapResquarify` tiling algorithm. Rendered as SVG, the code uses `d3.hierarchy`, `d3.scaleOrdinal` with the `schemeCategory20` color palette, and `d3.json` to load the packaged flare.json dataset.

Mmbostock

94% match

Loading thumbnail…

Treemap

A treemap visualizes the hierarchical structure of the Flare visualization toolkit, with each rectangle’s area proportional to a node’s value and color encoding its parent package. A control toggles between summing sizes and counting leaves, triggering animated transitions that re-layout the rectangles. The code uses d3.hierarchy, d3.treemap with the d3.treemapResquarify tile, d3.scaleOrdinal with a fader on d3.schemeCategory20, and clips text labels with SVG clipPath elements. Data comes from the bundled flare.json file.

RRodrigoGonzalez

91% match

Loading thumbnail…

Treemap from bl.ocks.org

A hierarchical treemap displays the flare dataset, showing nested file sizes and counts as colored, labeled rectangles. The visualization uses `d3.treemap` with the `d3.treemapResquarify` tile method, rendering SVG rectangles and text with mouse-over titles. Radio buttons switch between summing by file size and by node count, triggering a 750ms `transition` that animates rectangle positions and dimensions. D3 v4 and `d3.scaleOrdinal` with `d3.schemeCategory20` color the cells.

JJerfaas

90% match

Loading thumbnail…

Treemap

A treemap visualizes the hierarchical structure of the Flare visualization toolkit, using nested rectangles whose areas encode the `size` value of each node and color to distinguish top-level packages. The chart is built with D3 v3, using the `d3.layout.treemap` API to compute the squarified layout, and rendered as SVG with styled `rect` elements and labels for leaf nodes. Data comes from the bundled `flare.json` file, which contains the toolkit’s package hierarchy and sizes.

Mmbostock

89% match

Loading thumbnail…

Treemap from bl.ocks.org

A treemap visualizes the hierarchical structure of the Flare data set, with nested rectangles whose areas encode either the size or count of each node. The visualization uses D3’s `d3.treemap` layout with `d3.treemapResquarify` tiling, rendering the hierarchy as an SVG. Animated transitions smoothly reshape the treemap when toggling between the "Size" and "Count" aggregation modes. The color scheme is derived from `d3.schemeCategory20`, and the tooltip displays the node’s path and numerical value.

CCurran Kelleher

89% match

Loading thumbnail…

Treemap from bl.ocks.org

A treemap visualizes the hierarchical structure of the Flare data set, with nested rectangles representing leaves sized by their numeric value. The visualization renders using SVG elements and includes an animated transition between two aggregation modes: "Size" and "Count". Built with D3 v4, the code uses `d3.treemap` with the `d3.treemapResquarify` tiling algorithm, `d3.hierarchy`, `d3.scaleOrdinal` for color, and `d3.interpolateRgb` for fading. A 2-second timer automatically triggers the mode change.

Bbeca8675

88% match

Loading thumbnail…

Treemap from bl.ocks.org

This treemap visualizes the hierarchical structure of the Flare data set, using nested rectangles whose areas encode each leaf’s size value. Users can toggle between summing by size or by count via radio buttons, which triggers a smooth 750ms transition of the rectangles. The visualization is built with D3 v4, using `d3.treemap` with the resquarify tiling function, `d3.hierarchy`, and `d3.scaleOrdinal` for color coding by parent category. The SVG rendering includes clip-paths for text labels and tooltip titles on each leaf.

Ttasqon

88% match

Loading thumbnail…

Treemap from bl.ocks.org

A treemap visualization displays the hierarchical structure of the flare.json dataset, with nested rectangles sized by either node size or leaf count. The interactive chart allows toggling between these two aggregation modes via radio buttons, triggering a smooth animated transition. Built with D3 v4, the visualization uses `d3.treemap`, `d3.hierarchy`, and `d3.scaleOrdinal` for coloring, rendering SVG cells with clipped text labels and tooltips.

Bbootshine2

88% match