TreeMap

100%

✓ Published0🌍 Public

Last edited Feb 27, 2017

Created on Feb 27, 2017

This example visualizes a hierarchical dataset as a treemap, using rectangles sized by each node’s `degree` value and colored by its `domain` attribute to reveal the relative prominence of categories. Built with D3 v3, the code loads hierarchical JSON data and applies the `d3.layout.treemap` layout with custom padding. Node labels and background colors are assigned via D3 selections, with positions and dimensions computed by the layout and applied through inline styling. The visualization provides a compact overview of the dataset’s nested structure and degree distribution.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/LauraCortes/'>LauraCortes</a>'s block: <a href='http://bl.ocks.org/LauraCortes/16909ffba9102cf0c8dea1f648c2c1f9'>Arc Diagram</a>

forked from <a href='http://bl.ocks.org/LauraCortes/'>LauraCortes</a>'s block: <a href='http://bl.ocks.org/LauraCortes/619b3829dc8b4a1935267c2cefa844eb'>TreeMap</a>

mit Licensed

Similar vizzes

Loading thumbnail…

TreeMapv2

This example visualizes a hierarchical tree structure of software model elements using a treemap layout. The graph.json data shows nested EClass objects organized by domain, with each node’s size determined by its `degree` value. D3 v3’s `d3.layout.treemap` algorithm partitions the 960×500 SVG canvas, rendering each node as a rectangle with a label, colored via the `category20c` scale. The visualization uses `d3.json` to load the data and SVG `rect` and `text` elements for output.

LLauraCortes

89% match

Loading thumbnail…

TreeMap

This tree map visualizes a hierarchical model of EClass nodes, representing software architecture domains and their relationships. The layout uses d3.layout.treemap, with node area sized by the degree value and color-coded by domain via d3.scale.category10. The code processes graph.json into a hierarchical structure by iterating links and detecting containment relationships. Rendered as positioned divs, each cell displays the label of its corresponding class, with padding and borders separating nested levels.

LLauraCortes

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

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

82% match

Loading thumbnail…

TreeMap

This tree map visualizes a hierarchical log of user interface events from a browsing session, shown as nested rectangles whose sizes correspond to a time metric. The layout is computed with `d3.treemap()` on the loaded JSON data, with elements rendered as SVG `<rect>` and `<text>` nodes. The d3 hierarchy is processed through `d3.hierarchy()` and laid out with `d3.treemap()`.

Ffloresh

81% match

Loading thumbnail…

Fork of TreeMap Layout

This example displays a treemap visualization of hierarchical data using D3 v5’s `d3.hierarchy` and `d3.treemap` layouts. The SVG renders nested rectangles sized proportionally to node values, with labels for named leaves and empty labels for internal branches. The code manually constructs the dataset in `index.js`, sums values via `root.sum`, and applies layout properties like `paddingOuter`. Rectangles and text are appended into grouped `<g>` elements, with styling from `styles.css` using royal blue fills and white strokes.

ZZoha9

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

79% match

Loading thumbnail…

Treemap layout (with labels)

A treemap layout visualizes a small hierarchical dataset, with nested rectangles representing the root node A1, its children B1 and B2, and the grandchildren C1, C2, and C3. Each rectangle is colored cadetblue, and labels show the node names. The example uses the `d3.treemap` layout with `d3.hierarchy` and `rootNode.sum` to compute sizes, then renders the result as SVG rectangles and text elements via data joins on `g` nodes.

Yyuva24

78% match