treemap2

100%

✓ Published0🌍 Public

Last edited Aug 3, 2016

Created on Aug 3, 2016

This interactive treemap visualizes the flare.json dataset, where each cell’s area and color both encode the data value. A custom `d3.layout.treemap2` extension of `d3.layout.treemap` computes the maximum area among sibling nodes; cell fill interpolates between lightgray and a material orange via `d3.interpolateHsl`. Clicking a cell zooms into its parent group, and a dropdown switches the value metric between size and count. The layout sorts children to place the largest cell in the top-right.

AI-generated description

a treemap prototype where the

area of the cell
the maxArea of all the cells that share the same depth and same parent with that cell

is used to scale the color on an orange to lightgray colorscale.

the size variable is double-encoded as cell area and cell color.

I extend d3.layout.treemap to calculate the maxArea across a set of sibling nodes and call the extended layout d3.layout.treemap2

the sort property of the treemap2 layout positions the largest area cell in the top-right of the group.

.sort(function(a, b){ return a.value - b.value })

an iteration on http://mbostock.github.io/d3/talk/20111018/treemap.html

and this StackOverflow Answer

forked from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s block: <a href='http://bl.ocks.org/micahstubbs/6eed3b92121facaf489f'>treemap2</a>

cc0-1.0 Licensed

Similar vizzes

Loading thumbnail…

Treemap

This treemap displays the hierarchical structure of the Flare data visualization toolkit, with each rectangle’s area and color representing the byte count of files within the codebase. The visualization uses D3.js v4 to parse a CSV file and build a treemap layout with the `d3.stratify` and `d3.treemap` APIs, while a color scheme from `d3.scaleOrdinal` distinguishes top-level categories. Each node is rendered as an HTML `div`, with labels and values positioned using absolute pixel coordinates.

PPacsangon

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

83% match

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

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

82% match

Loading thumbnail…

Treemap from bl.ocks.org

This treemap visualizes hierarchical data, such as the flare.json dataset, using nested rectangles to represent size values, with an option to re-sort by count. It shows an interactive animation that smoothly transitions between these two aggregation modes. Built with D3.js v4, the code uses `d3.treemap`, `d3.treemapResquarify`, and `d3.hierarchy` to process data, while SVG rendering and `d3.transition()` handle the animated updates. The example also includes a color scale from `d3.schemeCategory20` for visual distinction.

MManoukK

82% match

Loading thumbnail…

Treemap from bl.ocks.org

This example shows a treemap visualization of the Flare data hierarchy, where each rectangle’s size corresponds to the value of a leaf node, and color encodes the parent category. It uses `d3.treemap` with the `d3.treemapResquarify` tiling algorithm to compute rectangles within a 960x480 SVG canvas. The visualization animates between two aggregation modes (by size and by count) using a `transition` on cell transforms over 750 milliseconds, with a `d3.timeout` automating the mode switch after two seconds. Text labels are clipped and wrapped within each cell.

Ssaurabh18n

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

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

81% match