Skip to main content
100%

Fortune 100 BLM

✓ Published0🌍 Public
Aandrewwitherspoon
Last edited Jun 19, 2020
Created on Jun 14, 2020

A treemap visualization displays the relative sizes of corporate donations among Fortune 100 companies, with each rectangle's area proportional to the company's listed contribution amount. The visualization uses color to encode different parent groups, though the single-level hierarchy results in each company receiving a distinct color. Built with D3 v4, the code uses `d3.treemap()` with the `d3.treemapResquarify` tiling algorithm to compute the layout, and renders cells as SVG groups with rectangles and text labels. Data comes from a local JSON file, and the animation transitions between size-based and count-based sums.

AI-generated description

A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value. This example uses color to encode different packages of the Flare visualization toolkit. Treemap design invented by Ben Shneiderman. Squarified algorithm by Bruls, Huizing and van Wijk. Data courtesy Jeff Heer.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4063582'>Treemap</a>

forked from <a href='http://bl.ocks.org/andrewwitherspoon/'>andrewwitherspoon</a>'s block: <a href='http://bl.ocks.org/andrewwitherspoon/6295da517c2ae4a0ef2e300de3b336f7'>Treemap</a>

gpl-3.0 Licensed

Similar vizzes

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
71% 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
71% match
Loading thumbnail…

Treemap from bl.ocks.org

This example shows a treemap visualization of the Flare data hierarchy, where each rectangle’s size corresponds to the value of a leaf node, and color encodes the parent category. It uses `d3.treemap` with the `d3.treemapResquarify` tiling algorithm to compute rectangles within a 960x480 SVG canvas. The visualization animates between two aggregation modes (by size and by count) using a `transition` on cell transforms over 750 milliseconds, with a `d3.timeout` automating the mode switch after two seconds. Text labels are clipped and wrapped within each cell.

Ssaurabh18n
70% match
Loading thumbnail…

Treemap from bl.ocks.org

This treemap visualizes hierarchical data, such as the flare.json dataset, using nested rectangles to represent size values, with an option to re-sort by count. It shows an interactive animation that smoothly transitions between these two aggregation modes. Built with D3.js v4, the code uses `d3.treemap`, `d3.treemapResquarify`, and `d3.hierarchy` to process data, while SVG rendering and `d3.transition()` handle the animated updates. The example also includes a color scale from `d3.schemeCategory20` for visual distinction.

MManoukK
70% match
Loading thumbnail…

Fork of Treemap from bl.ocks.org

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.

RRonald Ngounou
70% match
Loading thumbnail…

2nd task

This treemap visualizes the distribution of billionaire wealth across twelve industries, using a color-coded hierarchy where rectangle size corresponds to total industry wealth. Built with D3 v7, the code uses `d3.hierarchy` and `d3.treemap` to compute spatial layout, then renders each leaf as an SVG `rect` with a text label. The visualization includes interactive tooltips that display the industry name and total wealth on hover, with smooth opacity transitions. The color scheme uses `d3.schemeSet3` for categorical distinction.

Nnitishsurneni@gmail.com
70% 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
70% match
Loading thumbnail…

Treemap

A treemap recursively subdivides a rectangle into smaller areas, where each node’s size corresponds to its value. This example encodes Flare visualization toolkit packages by color, using a squarified layout. The D3 v4 code loads hierarchical JSON data, applies `d3.hierarchy` with `.sum()`, and renders SVG rectangles and text with clip paths. A radio button toggles between size-based and count-based sums, triggering animated transitions via `cell.transition()` over 750 milliseconds.

Aandrewwitherspoon
70% match