./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.
AI-generated description