Treemap

100%

✓ Published0🌍 Public

Last edited Mar 7, 2019

Created on Mar 16, 2016

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.

AI-generated description

Each pixel represents approximately one byte.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

treemap

This treemap visualizes the Flare software package hierarchy, where each rectangle’s area encodes the relative size of a module (e.g., lines of code or class size). Built with D3 v3, the visualization uses nested rectangles and a categorical color scale to show the hierarchy of top-level categories like analytics, animate, data, and display, with subcategories and leaf nodes nested inside. The layout is generated using d3.layout.treemap, with each node's area proportional to its `size` value. The white borders between cells and the small sans-serif labels maintain readability, making the hierarchical structure and relative magnitudes of the Flare visualization toolkit’s codebase easy to compare at a glance. The visualization is interactive and hoverable.

DDarienLiang

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

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

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

90% match

Loading thumbnail…

Treemap

A treemap recursively subdivides a rectangle into smaller rectangles, with each node's area proportional to its value, encoding the hierarchical structure and size of the Flare visualization toolkit's packages through both position and color. The visualization includes an interactive radio-button control that toggles between summing leaf sizes and counting leaves, triggering a 750-millisecond transition that animates rectangle boundaries using D3 v4's `d3.treemap` with the `d3.treemapResquarify` tiling algorithm. Rendered as SVG, the code uses `d3.hierarchy`, `d3.scaleOrdinal` with the `schemeCategory20` color palette, and `d3.json` to load the packaged flare.json dataset.

Mmbostock

90% match

Loading thumbnail…

Treemap from bl.ocks.org

This treemap visualizes the hierarchical structure of the Flare data set, encoding each leaf node’s size by its rectangular area and grouping related categories by color. The view toggles between summing node values by size or by count, with animated transitions updating the layout over 750 milliseconds. Built with D3 v4, the example uses `d3.treemap`, `d3.hierarchy`, `d3.scaleOrdinal`, and `d3.treemapResquarify`, rendering the hierarchy as SVG rects and text elements with clip paths.

Wwicaksh

89% match

Loading thumbnail…

Treemap 4.0

This treemap visualizes the hierarchical structure of the Flare dataset, with each leaf node represented as a rectangle sized by its numeric value and colored by its top-level category. A dropdown menu above the chart lets users dynamically switch between five tiling algorithms for the treemap layout. The example uses the `d3_hierarchy` treemap API, setting the tile method based on the selected option, and renders the result as SVG using `d3.csv` to load the data from flare.csv.

FFrissAnalytics

89% match

Loading thumbnail…

Cascaded Treemap

A cascaded treemap displays the hierarchical structure of the Flare software package, using colored rectangles to represent nested categories and their sizes to reflect values. The visualization adjusts the layout so that deeper nodes are offset, creating a stepped, cascading effect that makes hierarchy levels visually distinct. It uses `d3.stratify` to parse the CSV data, `d3.treemap` for layout, and custom `cascade` functions to compute depth-aware offsets. Hovering highlights a node and its ancestors using `d3.selectAll` and classed transitions.

Mmbostock

89% match