100%

D3 v4 size in treemap

✓ Published0🌍 Public

Last edited Feb 20, 2018

Created on Oct 7, 2017

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.

AI-generated description

D3 v4 size in treemap

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.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/8fe6fa6ed1fa976e5dd76cfa4d816fec'>D3 Source Treemap</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Source Treemap

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`.

Mmbostock

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

This treemap visualization displays the hierarchical structure of the Flare dataset, with nested rectangles representing categories and leaf nodes sized by their numeric values. A dropdown menu lets users switch between five different treemap layout algorithms—Squarify, Slice, Dice, SliceDice, and Binary—which are implemented in the `d3_hierarchy` library. The code uses the `d3_hierarchy.treemap()` function from the D3 v4 alpha build, renders the result as SVG, and color-codes each top-level category using `d3.scaleCategory10()`.

663anp3ca

74% match

Loading thumbnail…

Treemap from bl.ocks.org

A hierarchical treemap displays the flare dataset, showing nested file sizes and counts as colored, labeled rectangles. The visualization uses `d3.treemap` with the `d3.treemapResquarify` tile method, rendering SVG rectangles and text with mouse-over titles. Radio buttons switch between summing by file size and by node count, triggering a 750ms `transition` that animates rectangle positions and dimensions. D3 v4 and `d3.scaleOrdinal` with `d3.schemeCategory20` color the cells.

JJerfaas

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

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

73% match

Loading thumbnail…

TreeMap Layout

This example demonstrates a treemap layout using D3 v5, displaying hierarchical data as nested rectangles sized proportionally to their values. The visualization shows four labeled nodes—three leaf nodes (C1, C2, C3) with varying values beneath a parent node (B1), alongside a sibling node (B2)—all enclosed within root A1, with padding and gaps between groups. It uses `d3.hierarchy` to structure the data and `d3.treemap` to compute the layout, rendering rectangles and text as SVG elements. The treemap applies an outer padding of 16 pixels and scales to a 400×200 pixel area, with a static dataset defined in the code.

Ffloresh

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

72% match