Skip to main content
SimilarExport ZIP
100%

Treemap Top of Funnel Growth

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

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.

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'>Treemap Top of Funnel Growth</a>

cc0-1.0 Licensed

Similar vizzes

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
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
78% 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
77% 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
77% 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
77% match
Loading thumbnail…

Top of funnel 6.26.18

This visualization presents a treemap of marketing funnel metrics across multiple channels, using nested rectangles to represent data from the economia_estados.csv file. The chart displays categories such as Twitter Impressions, Website Visits, and Cold Calling, with values shown for three different stages. The view can be toggled between a standard treemap layout and a cluster view using the checkbox control. SVG rectangles are rendered with opacity and labeled with category names and values. Hovering over a node triggers a custom tooltip (d3-tip) with detailed information, and the visualization includes smooth animated transitions when switching views. The color scheme and rectangular layout follow the classic treemap design, while the animation enhances the interactive experience of exploring hierarchical funnel data.

WWeikerWT
77% 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
77% match