Skip to main content
100%

treemap2

✓ Published0🌍 Public
WWeikerWT
Last edited Jun 22, 2018
Created on Jun 22, 2018

This animated treemap prototype uses cell area and color to double-encode data values. The layout is created by extending `d3.layout.treemap` into `d3.layout.treemap2`, which computes the maximum area among sibling nodes at the same depth. Each cell’s color is scaled from orange to light gray based on the ratio of its area to the max area of its sibling group, while the cell area itself encodes the raw value. A custom sort orders cells by ascending value, placing the largest area cell in the top-right corner of each group. The visualization animates as the treemap layout updates, using the flare.json dataset.

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…

treemap2

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.

PPacsangon
87% match
Loading thumbnail…

Q4 2017

This animated treemap visualizes Q4 2017 data using a custom extension of `d3.layout.treemap` called `d3.layout.treemap2`. Each cell’s area encodes a numeric value, while its color maps the same value onto an orange-to-lightgray scale, with the maximum area among sibling cells at the same depth as the reference. The layout sorts sibling cells by value in ascending order, placing the largest cell in the top-right of each group. The animation reveals the hierarchy progressively, and the dataset includes categories such as Pipeline Growth and Collaboration Risk Assessment with leaf sizes ranging from 12 to 550. The visualization is a treemap prototype built with D3, forked from Micah Stubbs’s block.

WWeikerWT
81% match
Loading thumbnail…

Treemap Top of Funnel Growth

A treemap animation visualizes top-of-funnel growth across quarters, with cell area and color intensity both encoding value. The extended `d3.layout.treemap2` calculates the maximum sibling area to drive an orange-to-lightgray color scale, and sorts cells so the largest sits top-right of each group. Data from `flare.json` shows sales and marketing metrics for 2017Q4 and 2018Q1.

WWeikerWT
81% 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
80% 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
79% 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
78% 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
78% match
Loading thumbnail…

Treemap from bl.ocks.org

This treemap visualizes the hierarchical structure of the Flare data set, encoding each leaf node’s size by its rectangular area and grouping related categories by color. The view toggles between summing node values by size or by count, with animated transitions updating the layout over 750 milliseconds. Built with D3 v4, the example uses `d3.treemap`, `d3.hierarchy`, `d3.scaleOrdinal`, and `d3.treemapResquarify`, rendering the hierarchy as SVG rects and text elements with clip paths.

Wwicaksh
78% match