Skip to main content
100%

Comparison Treemap

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

This comparison treemap visualizes marketing channel performance across three sales funnel stages using a hierarchical layout. The chart is built with D3 v4 and renders as an SVG, with each node’s area proportional to its value. Users can toggle between a treemap and a cluster view via a checkbox, triggering an animated transition between the two layouts. Hovering over a rectangle displays a tooltip with the channel name and its value for the selected stage, implemented using the d3-tip library.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

7.24.18 Top of Funnel for Board

This interactive treemap visualizes marketing funnel metrics from a CSV file, showing conversion values across seven channels (Twitter, Website Visits, Form Generation, Paid Search, Cold Email, Feedfall, Blog, and Opps) over three time periods. Users toggle between a standard treemap view and a cluster layout via a checkbox. The visualization uses D3 v4 with SVG rendering, animating transitions between the two views. Each rectangle’s size encodes its metric value, with labels and values displayed inside the nodes. Hovering over a rectangle triggers a dark tooltip showing the exact value for that channel and period, implemented via d3-tip. The "Top of Funnel" title and the included CSV data suggest this is a marketing-funnel dashboard tracking channel performance across three sequential time periods. The block is built with Blockbuilder and released under the MIT license.

WWeikerWT
73% 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
71% 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
69% match
Loading thumbnail…

Marks & Channels Graphic

This example reproduces a treemap visualization from the Marks & Channels Graphic in Chapter 5. It uses d3.hierarchy and d3.treemap with a slice-dice tiling to layout nested data from a custom JSON file, coloring each leaf as a simple rectangle. The SVG rendering assigns each leaf a `<g>` group and a `<rect>`, sized proportionally to its data value. The code references D3 v4 and Curran’s treemap example as its basis.

RRyan Fleming
68% match
Loading thumbnail…

Interactive Visualisation

A treemap visualizes hierarchical sales data from a UK sales CSV, with regions and towns nested by country. Users hover over rectangles to see a breadcrumb showing the region, town, and total sales value. Built with React and D3 v7, the chart uses `d3.stratify`, `d3.treemap`, and `d3.scaleOrdinal` to structure and color the hierarchy, while SVG rendering and `mouseenter` events drive the interactive labels and layout.

Wwalesiam
67% match
Loading thumbnail…

visualization9d3

A D3.js treemap displays hierarchical data as nested rectangular nodes, sized proportionally to each value. The visualization shows five course categories with descending values, using a spectral color scale for differentiation. The code embeds a static dataset directly and builds the hierarchy using `d3.hierarchy` with a sum accessor, then applies `d3.treemap` to compute the layout. Each leaf node renders as a positioned `div` element, with dimensions derived from the treemap’s computed coordinates and colors assigned via `d3.interpolateSpectral`.

GGanesh Gundekarla
65% 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
65% match