Fork of Treemap from bl.ocks.org

100%

Fork of Treemap from bl.ocks.org

✓ Published0🌍 Public

Last edited Jun 13, 2024

Created on Jun 13, 2024

This treemap visualizes the hierarchical structure of the Flare software dependency data, using nested rectangles whose area encodes either the size or count of each leaf node. Built with D3 v4, it demonstrates a direct port of Mike Bostock’s original bl.ocks.org example, splitting code into separate files. The visualization uses `d3.treemap` with a squarified tiling algorithm, `d3.hierarchy` for data layout, and `d3.schemeCategory20` for color coding. It renders as SVG and includes a 750ms animated transition when switching between size and count modes via the radio buttons.

AI-generated description

An example of porting a work from bl.ocks.org into VizHub. This is a direct port of Mike Bostock’s Block: Treemap, modified only to split into separate files, and to fit in the space available.

MIT Licensed

Similar vizzes

Loading thumbnail…

Treemap from bl.ocks.org

This treemap visualizes the hierarchical structure of the Flare data set, using nested rectangles whose areas encode each leaf’s size value. Users can toggle between summing by size or by count via radio buttons, which triggers a smooth 750ms transition of the rectangles. The visualization is built with D3 v4, using `d3.treemap` with the resquarify tiling function, `d3.hierarchy`, and `d3.scaleOrdinal` for color coding by parent category. The SVG rendering includes clip-paths for text labels and tooltip titles on each leaf.

Ttasqon

90% match

Loading thumbnail…

Treemap from bl.ocks.org

A treemap visualizes the hierarchical structure of the Flare data set, with nested rectangles representing leaves sized by their numeric value. The visualization renders using SVG elements and includes an animated transition between two aggregation modes: "Size" and "Count". Built with D3 v4, the code uses `d3.treemap` with the `d3.treemapResquarify` tiling algorithm, `d3.hierarchy`, `d3.scaleOrdinal` for color, and `d3.interpolateRgb` for fading. A 2-second timer automatically triggers the mode change.

Bbeca8675

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

90% match

Loading thumbnail…

Treemap from bl.ocks.org

A treemap visualizes the hierarchical structure of the Flare data set, with nested rectangles whose areas encode either the size or count of each node. The visualization uses D3’s `d3.treemap` layout with `d3.treemapResquarify` tiling, rendering the hierarchy as an SVG. Animated transitions smoothly reshape the treemap when toggling between the "Size" and "Count" aggregation modes. The color scheme is derived from `d3.schemeCategory20`, and the tooltip displays the node’s path and numerical value.

CCurran Kelleher

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

89% match

Loading thumbnail…

Treemap from bl.ocks.org

This treemap shows the hierarchical structure of the Flare data set, with nested rectangles sized by either data value or leaf count. Rectangles are colored by parent category and labeled with truncated names. The visualization transitions between the two sizing modes over 750 milliseconds after a two-second delay, using the `d3.treemap` layout with a resquarify tiling function. The implementation uses D3.js v4 to render SVG elements, with text clipping via `clipPath` and an ordinal color scale based on `d3.schemeCategory20`.

MMichał Szumnarski

89% match

Loading thumbnail…

Treemap

A treemap visualizes the hierarchical structure of the Flare visualization toolkit, with each rectangle’s area proportional to a node’s value and color encoding its parent package. A control toggles between summing sizes and counting leaves, triggering animated transitions that re-layout the rectangles. The code uses d3.hierarchy, d3.treemap with the d3.treemapResquarify tile, d3.scaleOrdinal with a fader on d3.schemeCategory20, and clips text labels with SVG clipPath elements. Data comes from the bundled flare.json file.

RRodrigoGonzalez

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

88% match