Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
HHypercubed
Last edited Oct 21, 2015
Created on Oct 21, 2015

A treemap visualizes the file-size distribution of a bundled JavaScript application from a source map. Using the `webtreemap` library, each file is represented as a rectangular tile whose area is proportional to its byte size; hovering or clicking a tile displays its path and size. The data, drawn from a `bundle.js` source map, includes both library files (e.g., d3, jquery, angular) and local application code, enabling quick identification of the largest dependencies in the bundle.

AI-generated description

Similar vizzes

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

angular-downloadsvg-directive.min.js - Source Map Explorer

A treemap visualization shows the relative file sizes contributing to the angular-downloadsvg-directive.min.js bundle, as revealed by source-map-explorer. The code uses the webtreemap library to render nested rectangles, with each file’s area proportional to its byte count. The visualization groups files by their path segments, displaying each node’s size and percentage. Data is hardcoded in a JavaScript object, and the map redraws on window resize via a custom appendTreemap call.

HHypercubed
81% match
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
73% match
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
67% match
Loading thumbnail…

Hierarchical Edge Bundling (Treemap)

This example visualizes the dependencies between classes in a software hierarchy using hierarchical edge bundling. The tree structure is positioned with `d3.layout.treemap`, while `d3.layout.bundle` groups the dependency links into spline bundles. The treemap cells are drawn as HTML `<div>` elements, and the bundled edges are rendered as SVG paths. Data comes from `readme-flare-imports.json`. The D3 v3 code uses `d3.svg.line` with `"bundle"` interpolation to create smooth curves.

Mmbostock
66% match
Loading thumbnail…

Javascript build tools

This example illustrates the JavaScript build-tool ecosystem, mapping tools like npm, yarn, rollup, and webpack to their roles as package managers or module bundlers. It uses plain DOM elements and D3 v7’s `select` and `version` to display text, while the underlying code demonstrates module syntax with named and default exports. The visualization’s source files show how `index.js` imports from `something.js` and `thing.js`, and the HTML references a rollup-injected bundle, clarifying how bundlers assemble local packages into browser-ready scripts.

BBart van Pelt
66% match
Loading thumbnail…

treemap

This treemap visualizes the Flare software package hierarchy, where each rectangle’s area encodes the relative size of a module (e.g., lines of code or class size). Built with D3 v3, the visualization uses nested rectangles and a categorical color scale to show the hierarchy of top-level categories like analytics, animate, data, and display, with subcategories and leaf nodes nested inside. The layout is generated using d3.layout.treemap, with each node's area proportional to its `size` value. The white borders between cells and the small sans-serif labels maintain readability, making the hierarchical structure and relative magnitudes of the Flare visualization toolkit’s codebase easy to compare at a glance. The visualization is interactive and hoverable.

DDarienLiang
65% match