D3 treemap tutorial

100%

D3 treemap tutorial

✓ Published0🌍 Public

Last edited Oct 31, 2017

Created on Oct 31, 2017

This example demonstrates a D3 treemap that visualizes task data from a CSV file, aggregated by priority (e.g., WISH, COULD) and then by status (DONE, TODO). Each leaf rectangle’s size encodes the total time spent on tasks in that group, while its color indicates the priority category, with a legend for reference. The visualization uses `d3.nest()` for hierarchical aggregation, `d3.hierarchy()` to build the tree, and `d3.treemap()` to compute tile layouts. Rendering is done with SVG, showing rectangles, text labels, and hover titles.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/as-eldlc/'>as-eldlc</a>'s block: <a href='http://bl.ocks.org/as-eldlc/beb149d6d5c4747eccdbc84106417e77'>D3 aggregation tutorial</a>

forked from <a href='http://bl.ocks.org/as-eldlc/'>as-eldlc</a>'s block: <a href='http://bl.ocks.org/as-eldlc/69f7d7c325583911fec04a6f04397c83'>D3 treemap tutorial</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 treemap tutorial

This treemap visualization shows the distribution of task time across different priorities and statuses. It uses D3 v4 with an SVG rendering approach, loading CSV data and aggregating it by two keys (priority and status) using the `d3.nest` and `d3.rollup` functions. The treemap layout is generated with `d3.treemap`, and each rectangle is colored according to its parent priority, displaying a legend below.

GGTHamonville

91% match

Loading thumbnail…

D3 aggregation tutorial

This example demonstrates how to aggregate and visualize task data by priority using D3.js. The bar chart shows the total time spent on tasks for each priority category, with bars colored via a categorical color scale. The code loads CSV data, groups records using `d3.nest()` with a `rollup` function that computes both task count and summed time, and renders the resulting bars as SVG rects. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while scales include `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal`.

JJdlv00

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

79% match

Loading thumbnail…

HTML Starter

This example demonstrates a basic treemap visualization using D3.js within an HTML page. It displays hierarchical data from a CSV file as nested rectangles, with each leaf node rendered as a colored square with a white text label. The code uses `d3.stratify()` to convert the flat CSV data into a hierarchy, `d3.treemap()` to compute the layout positions, and SVG `rect` and `text` elements for rendering. The rectangles are filled with a teal color and outlined in black, following the structure of the provided one-level dataset.

Ssgalhamdani

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

77% match

Loading thumbnail…

TreeMap Layout

This example demonstrates a treemap layout using D3 v5, displaying hierarchical data as nested rectangles sized proportionally to their values. The visualization shows four labeled nodes—three leaf nodes (C1, C2, C3) with varying values beneath a parent node (B1), alongside a sibling node (B2)—all enclosed within root A1, with padding and gaps between groups. It uses `d3.hierarchy` to structure the data and `d3.treemap` to compute the layout, rendering rectangles and text as SVG elements. The treemap applies an outer padding of 16 pixels and scales to a 400×200 pixel area, with a static dataset defined in the code.

Ffloresh

76% match

Loading thumbnail…

Treemap in d3

This example demonstrates a treemap visualization of hierarchical data, with nested rectangles representing the A1, B1/B2, and C1/C2/C3 nodes. It uses d3.treemap to compute the layout based on summed values, with padding and a fixed size of 800 by 400 pixels. The d3.hierarchy API organizes the data structure, while descendants are rendered as SVG groups, rects, and text elements using d3.select and join. The visualization clearly shows proportional area encoding, with rectangles colored in semitransparent cadetblue and labeled for each node.

SSubhendu Karmakar

75% match

Loading thumbnail…

Treemap

This treemap visualizes hierarchical data from a CSV file, showing production values for countries grouped under parent categories as nested rectangles. The example uses D3.js v6 with a CSV-parsed hierarchy, stratifying the data via `d3.stratify()` and computing rectangle positions with `d3.treemap()`. Rectangles are rendered as SVG elements with a teal fill and black stroke, while country labels appear in white text within each cell. The layout uses a fixed canvas size with padding between nodes, and styling comes from the included CSS.

Hhanulik.ondrej@gmail.com

75% match