filecounter

100%

✓ Published0🌍 Public

Last edited Aug 5, 2015

Created on Aug 5, 2015

This visualization displays a hierarchical treemap of file counts across directories, with each rectangle sized by the number of files found via a shell command. The layout uses d3.hierarchy and d3.treemap to compute node positions, while d3.forceSimulation slightly jitters overlapping leaves for visual separation. Data originates from a user-defined bash function that recursively counts files using `find` and `wc -l`. Colors encode directory depth, and hover interactions reveal the full path and file count via tooltips. The rendering relies on SVG paths and d3’s selection methods, with transitions animated by d3.transition.

AI-generated description

Similar vizzes

Loading thumbnail…

Fork of Code Tree Viz from Livestream

This visualization presents a file structure as a circular packing diagram, with each file and directory represented by a circle sized according to its file size. It uses D3’s `hierarchy` and `pack` layout to compute positions, while a `scaleLinear` maps circle radii to font sizes for labels. File types are color-coded via a custom JavaScript object, with `fillColors` mapping extensions to specific colors, applied to circles filtered by file status. The data originates from a Vue Core repository gist, loaded via `fetch`, and renders in Svelte with SVG, using hover effects to increase circle opacity.

NNita

70% match

Loading thumbnail…

Gist 0bb5514393bdd878235e51ed2fdd3724

This example visualizes the relationships between file names and their associated directory paths using a force-directed graph layout. The code employs `d3.forceSimulation` to position nodes and `d3.forceLink` to draw connecting edges, with each node rendered as a colored circle. The graph is built from a parsed file tree structure, likely derived from object keys or an array of paths, and uses `d3.select` for DOM manipulation. Labels are attached to nodes via SVG text elements, while the simulation updates positions on each tick. The rendering relies on an SVG container, with node colors distinguishing file types from directory paths.

RRainboylvx

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

68% match

Loading thumbnail…

Fork of Treemap from bl.ocks.org

This treemap visualizes the hierarchical structure of the Flare software dependency data, using nested rectangles whose area encodes either the size or count of each leaf node. Built with D3 v4, it demonstrates a direct port of Mike Bostock’s original bl.ocks.org example, splitting code into separate files. The visualization uses `d3.treemap` with a squarified tiling algorithm, `d3.hierarchy` for data layout, and `d3.schemeCategory20` for color coding. It renders as SVG and includes a 750ms animated transition when switching between size and count modes via the radio buttons.

RRonald Ngounou

67% match

Loading thumbnail…

Fork of Code Tree Viz from Livestream

This visualization displays the file structure of a code repository as a bubble chart, where each file is a circle sized by its byte size and colored by file extension type. The data is loaded from a GitHub gist containing a JSON representation of the source tree, and a legend maps extensions to their corresponding colors. The chart uses D3's force simulation to arrange the circles, preventing overlap while labels show file names. The visualization is built using Svelte and leverages D3's `hierarchy` and `forceSimulation` APIs.

CCurran Kelleher

67% match

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

67% match

Loading thumbnail…

Nested Treemap

A nested treemap visualizes the hierarchical structure of the Flare data set, showing thousands of files and directories as nested rectangles whose areas encode file size and whose color encodes depth in the hierarchy. Hovering highlights the ancestors of the hovered node. The visualization uses D3 v4 APIs including `d3.treemap`, `d3.stratify`, and `d3.scaleMagma`, rendering to SVG. Text labels are clipped per rectangle, and node rects change stroke and dimensions on hover.

Mmbostock

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

66% match