100%

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

✓ Published0🌍 Public

Last edited Oct 19, 2015

Created on Oct 19, 2015

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.

AI-generated description

angular-downloadsvg-directive bundle

Generated using danvk/source-map-explorer

Similar vizzes

Loading thumbnail…

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

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.

HHypercubed

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

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

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

70% match

Loading thumbnail…

Tree Map

This tree map displays hierarchical data as nested rectangles sized proportionally to their values. The example renders an SVG graphic at 960 by 500 pixels, pulling in D3 v5 from a CDN. The code imports `select` and `arc` from the D3 library, though the visualization logic itself remains minimal in the shown files. The page references a separate stylesheet and JavaScript bundle, with the SVG container set up for the treemap layout. The map is generated using D3’s standard tree-map approach, though the actual data and layout calculations are not explicitly defined in the visible code.

Eedmond gihozo

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

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

66% match