Cascaded Treemap

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.

89% match

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.

87% match

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.

86% match

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.

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.

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

Stretched Treemap

This example uses a stretched treemap to visualize the hierarchical structure of the Flare dataset. The rectangles have a fixed aspect ratio of 4:1, which is achieved by first computing a squarified layout with a target ratio of one and then stretching the result horizontally. The treemap is built with `d3.treemap` and `d3.treemapSquarify.ratio`, while color and labels are assigned to each node via `d3.scaleOrdinal` and HTML `div` elements. Data is loaded from a CSV file with `d3.csv`.