Nest Treemap

100%

✓ Published0🌍 Public

Last edited Jun 11, 2016

Created on Apr 21, 2016

This example visualizes UK Home Office air travel spending in 2011 using a treemap. Each rectangular leaf represents a combination of airline supplier, destination, and ticket class, sized and colored by total paid fare. The hierarchy is built with `d3.nest` and rendered using `d3.treemap` from d3.v4. Leaf nodes display labels and formatted currency values, with the data sourced from a CSV file and parsed via `d3.csv`.

AI-generated description

Source: data.gov.uk, via @davetaz.

This example demonstrates how to make a treemap using d3.nest.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Nest Treemap

This treemap visualizes the total paid fare for Home Office air travel in 2011, hierarchically grouped by supplier, destination, and ticket class. The size of each rectangle encodes the aggregate cost, with labels showing the supplier, destination, and class. Built with D3 v4, it uses `d3.nest` to define the hierarchy and `d3.treemap` for layout, rendering the leaves as absolutely-positioned HTML divs. Data is loaded from the provided CSV file, and values are formatted as dollar amounts.

FFrissAnalytics

89% match

Loading thumbnail…

Zoomable Treemap

This zoomable treemap visualizes UK Home Office flight data from 2011, showing hierarchical relationships between destinations, suppliers, and ticket classes. Built with D3 v2 and rendered as an SVG with smooth zoom animations, the treemap uses nested rectangles sized by paid fare amounts, with color encoding categories. Users can click to zoom between hierarchy levels. The data is loaded from a CSV and transformed using d3.nest, while the custom layout function optimizes the treemap for the current zoom state, enabling fluid transitions as users navigate the data.

CCBasis

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

68% match

Loading thumbnail…

Treemap by Count

This treemap displays the hierarchical structure of the Flare dataset, counting each leaf node as equal in size rather than scaling by a numeric value. The visualization uses d3.stratify to build the hierarchy and d3.treemap with a custom sum function that assigns a value of one to non-zero leaves. Each rectangular leaf is rendered as an HTML div, colored by its top-level category using d3.scaleOrdinal with schemeCategory10, and labeled with the node name split across multiple lines.

Mmbostock

68% match

Loading thumbnail…

Nested Treemap

A nested treemap visualizes the hierarchical structure of the Flare data set, showing thousands of files and directories as nested rectangles whose areas encode file size and whose color encodes depth in the hierarchy. Hovering highlights the ancestors of the hovered node. The visualization uses D3 v4 APIs including `d3.treemap`, `d3.stratify`, and `d3.scaleMagma`, rendering to SVG. Text labels are clipped per rectangle, and node rects change stroke and dimensions on hover.

Mmbostock

67% match

Loading thumbnail…

Treemap

This treemap visualizes the hierarchical structure of the Flare codebase, using rectangular nested cells to represent file sizes and categories. Built with D3.js v4, it uses the `d3.stratify()` and `d3.treemap()` APIs to lay out nodes, with color assigned from a `d3.scaleOrdinal()` palette based on top-level branches. Leaf values from `flare.csv` are displayed inside each cell, while hovering reveals the full path and numeric value. The rendering uses HTML divs positioned absolutely, with nested labels and value text.

Mmbostock

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

66% match

Loading thumbnail…

Treemap

A treemap visualizes the hierarchical structure of the Flare visualization toolkit, using nested rectangles whose areas encode the `size` value of each node and color to distinguish top-level packages. The chart is built with D3 v3, using the `d3.layout.treemap` API to compute the squarified layout, and rendered as SVG with styled `rect` elements and labels for leaf nodes. Data comes from the bundled `flare.json` file, which contains the toolkit’s package hierarchy and sizes.

Mmbostock

66% match