D3 treemap tutorial

100%

D3 treemap tutorial

✓ Published0🌍 Public

Last edited Oct 31, 2017

Created on Oct 31, 2017

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.

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 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.

JJdlv00

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

80% match

Loading thumbnail…

tp_d3v2

A stacked bar chart displays task IDs along the x-axis and cumulative time on the y-axis, with bars colored by priority using `d3.scaleOrdinal` and `d3.schemeCategory10`. Each bar’s height reflects the sum of task times up to that point, sorted by time. The visualization is built with D3 v4, rendering SVG via `d3.axisBottom`, `d3.axisLeft`, and `d3.csv` to load the provided CSV dataset.

GGTHamonville

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

77% match

Loading thumbnail…

D3 Treemap

This D3 Treemap visualizes hierarchical data by representing each leaf node as a rectangle, with size determined by the `Quantity` field and colored steelblue. It loads comma-separated data from a GitHub Gist using `d3.csv`, parses numeric columns, and applies the `d3.treemap` layout to compute tile positions. The SVG rendering appends grouped rectangles and text labels for each country, with cell dimensions derived from the layout's `x0`, `y0`, `x1`, and `y1` values.

GGayan Priyadarshana

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

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

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

73% match