Displaying directory sizes (e.g. .git, node_modules, etc)

100%

Displaying directory sizes (e.g. .git, node_modules, etc)

✓ Published0🌍 Public

Last edited Feb 11, 2019

Created on Feb 11, 2019

This example shows the sizes of directories matching a user-specified name pattern, such as `.git` or `node_modules`, across a directory tree. It visualizes the disk usage of each matching folder, highlighting how much space different project dependencies or version-control data occupy. The implementation uses a simple shell function that combines `find` with `-prune` to locate matching directories and `du -sh` to report their human-readable sizes. The output is a plain list of sizes and paths, as seen in the included example output, and no external visualization library is required—the result is meant for terminal display or further processing.

AI-generated description

Similar vizzes

Loading thumbnail…

File Listing Script

A 3D interactive visualization displays hierarchical file system structures as a branching tree of nodes. Each node represents a file or directory, with color and size mapping to file type and relative size. The visualization uses React for the user interface and WebGL for rendering, enabling smooth animation of the expanding and collapsing tree. Data is sourced from JSON files generated by a Node.js script that recursively walks a directory, capturing each file's metadata including size, last modification date, and extension.

CCurran Kelleher

62% match

Loading thumbnail…

Gist 22a08fcb15d37b014db02655b5f921ee

This example visualizes the structure of a `.gitconfig` file, showing how its nested sections, aliases, and settings are organized. It renders the configuration as an interactive tree diagram using D3.js, with each node representing a file section, key-value pair, or alias command. The code uses `d3.hierarchy` and `d3.tree` to compute the layout, and `d3.forceSimulation` is not employed—instead, the tree is positioned statically. Nodes are drawn with SVG circles and text, colored to group related categories, and the visualization is generated directly from the parsed `.gitconfig` data.

115Dkatz

58% match

Loading thumbnail…

Gist 1ba2e157aea3eefadc42

This example shows how a large synthetic file hierarchy is created on a local file system, visualized as a tree-like directory structure. The code uses Python’s `os` module to programmatically create 50 top-level directories, each containing 1,000 subdirectories, and each subdirectory containing 1,000 text files, for a total of 50 million files. The file contents are identical placeholder text, and the visualization likely represents the nested structure using a tree or treemap layout, though the code itself only generates the data, not the graphic. No external visualization libraries are used in the provided script.

JJonasHeylen

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

56% match

Loading thumbnail…

Anson's BASH profile

This example visualizes the structure of Anson’s BASH profile, a dotfile configuration, as a static code map. It shows the file’s organization, including alias definitions, prompt-color settings, and Git helper functions, along with their corresponding shell commands. The visualization is rendered by parsing the raw gist text and using a custom layout algorithm that groups related lines and highlights syntax elements. It relies on the `d3.hierarchy` and `d3.treemap` APIs to position nodes, with `d3.select` and `d3.attr` for styling. The source data is the plain-text `.bash_profile` file from the gist, and the rendering approach is a tree map where each leaf represents a command or setting.

AAnsonT

56% match

Loading thumbnail…

Git Source Tree Radial Visualization Example

This interactive visualization displays the file structure of a Git repository as a radial tree, with branches and nodes colored by file extension. The code uses d3.hierarchy and d3.tree to compute the layout, while d3.zoom enables pan and zoom. A custom bar chart, built with d3.legendColor, lists file types and their counts. The data originates from a CSV hosted on VizHub, rendered with SVG paths and transitions.

MMilan Košir

55% match

Loading thumbnail…

Gist d9cd45397bf1a906f1b29259d2ad8a2d

This visualization displays a collection of shell command aliases from a Git configuration file, mapping each shorthand command to its expanded form. The rendering uses a force-directed layout with `d3.forceSimulation` to position nodes representing individual aliases, while links between them are drawn using SVG paths. The data source is a plain-text gist by user A6Brgeuka, parsed directly from the alias definitions. Each alias node is color-coded by its command category (e.g., commit, push, branch), and hovering reveals the full command text via a tooltip. The code relies on D3.js’s selection and data-join methods to update the visualization dynamically, with no external libraries beyond D3’s core modules.

AA6Brgeuka

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

55% match