TreeMap

100%

✓ Published0🌍 Public

Last edited Feb 27, 2017

Created on Feb 16, 2017

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.

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>

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

90% match

Loading thumbnail…

TreeMap

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.

LLauraCortes

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

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

Tree Map

This tree map displays hierarchical data as nested rectangles sized proportionally to their values. The example renders an SVG graphic at 960 by 500 pixels, pulling in D3 v5 from a CDN. The code imports `select` and `arc` from the D3 library, though the visualization logic itself remains minimal in the shown files. The page references a separate stylesheet and JavaScript bundle, with the SVG container set up for the treemap layout. The map is generated using D3’s standard tree-map approach, though the actual data and layout calculations are not explicitly defined in the visible code.

Eedmond gihozo

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

72% match

Loading thumbnail…

Education Tree map

This treemap visualizes hierarchical education data, using nested rectangles sized proportionally to category values. Rendered as an animated SVG, the chart relies on D3’s `treemap` layout to compute the tile geometry, with transitions smoothly resizing groups when the view changes. The code explicitly sets an SVG container and applies `d3.hierarchy` to structure the nested data, while CSS styling controls the background. The visualization updates live, with labels and colored tiles clarifying the hierarchy. Data originates from a gist, and the animation demonstrates the treemap’s reflowing behavior.

DDragonVirus

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

72% match