D3 Source Treemap

100%

D3 Source Treemap

✓ Published0🌍 Public

Last edited Dec 9, 2016

Created on Dec 9, 2016

This treemap visualizes the file size, in bytes, of the D3.js 4.4.0 source code, broken down by module and individual source file. Built with D3 v4, it renders as an SVG using `d3.treemap` and `d3.stratify` to create the hierarchy from a CSV containing file paths and sizes. Each leaf cell is a clickable link to the corresponding source file on GitHub, with its color assigned via `d3.scaleOrdinal` and `d3.schemeCategory20`.

AI-generated description

This treemap shows the file size in bytes of D3 4.4.0’s source code. Click on any cell to view the corresponding source.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3 v4 size in treemap

This treemap visualizes the file sizes of D3 v4.4.0’s source code, with each cell representing a file and its area proportional to the file’s size in bytes. The hierarchy is derived from the module and file paths (e.g., d3/d3-array, d3/d3-geo/projection), using d3.hierarchy and d3.treemap with a squarified layout. Rectangles are drawn as SVG elements, with each cell’s fill color based on its position in the hierarchy. Clicking any cell navigates to that file’s source code on GitHub, linking the visualization to the underlying repository. The treemap uses D3 v4.4.0’s data and is a fork of Mike Bostock’s original D3 Source Treemap.

AAlainRo

88% match

Loading thumbnail…

dist/plotly.js - Source Map Explorer

This example visualizes the file-size distribution of the `plotly.js` source map using a treemap, where each rectangle represents a module and its size corresponds to byte count. The data originates from the source map’s parsed module sizes, as seen in the embedded tree object. Rendered with WebGL via the `webtreemap` library, the visualization uses a flat, zoomable layout. The code references the raw module paths and sizes, but the treemap itself relies on the library’s CSS and JavaScript to draw the interactive, clickable map, highlighting dominant dependencies like `d3.js` and `bn.js`.

HHypercubed

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

77% match

Loading thumbnail…

./dist/components/bundle.js - Source Map Explorer

This visualization uses a zoomable treemap to display the file-size distribution of a bundled JavaScript application, derived from a source map. The treemap encodes the byte size of each module as the area of its corresponding rectangle, with file paths shown as nested, colored blocks. The layout is interactive: clicking zooms into a rectangle to inspect its submodules, while clicking again zooms out. The data—a flat key/value mapping of file paths to byte counts—is visualized using a squarified treemap layout from d3.v3, with tooltips likely showing exact byte sizes. The view is presented as a full-screen map with a pointer cursor, emphasizing hierarchical size comparison and navigation through large dependency bundles. The example uses the `webtreemap` library to render the treemap, demonstrating how d3 can be used to explore JavaScript bundle composition and identify large modules or dependencies.

HHypercubed

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

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

74% match

Loading thumbnail…

Treemap

This treemap displays the hierarchical structure of the Flare data visualization toolkit, with each rectangle’s area and color representing the byte count of files within the codebase. The visualization uses D3.js v4 to parse a CSV file and build a treemap layout with the `d3.stratify` and `d3.treemap` APIs, while a color scheme from `d3.scaleOrdinal` distinguishes top-level categories. Each node is rendered as an HTML `div`, with labels and values positioned using absolute pixel coordinates.

PPacsangon

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

73% match