Skip to main content
SimilarExport ZIP
100%

Q4 2017

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

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.

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'>Q4 2017</a>

cc0-1.0 Licensed

Similar vizzes

Loading thumbnail…

Q1 2018

Q1 2018 is an animated treemap visualization that double-encodes data values through both cell area and an orange-to-lightgray color scale. The visualization extends `d3.layout.treemap` into `d3.layout.treemap2`, which calculates the maximum area across sibling nodes at the same depth and parent to normalize the color scale. Cells are sorted in ascending order by value, placing the largest area cell in the top-right of each group. The dataset covers categories like Collaboration Risk Assessment and Pipeline Growth, with leaf values ranging from small counts like 6 to larger values like 550. This example builds on a previous treemap prototype and a StackOverflow discussion about encoding both area and color in D3 treemaps, rendered as an animated visualization under a CC0 license.

WWeikerWT
86% 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
82% match
Loading thumbnail…

treemap2

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.

WWeikerWT
81% match
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
75% 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
75% 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
74% 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
74% 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
74% match