Black & White Nested Circles

100%

Black & White Nested Circles

✓ Published2🌍 Public

Last edited Oct 9, 2025

Created on Jun 7, 2024

This visualization displays the React source code as a circular treemap, with nested circles representing the file hierarchy. The circle packing layout is computed using D3's `pack` and `hierarchy` functions, and circles are colored based on file type or by depth using black and white. The code uses D3's `zoom` behavior for interactive pan and zoom, and a memoization function called `computed` optimizes rendering performance. File size influences circle opacity, while labels are added but curved labels are disabled for performance.

AI-generated description

A circle pack visualization of the React source code.

Order a canvas print of this graphic!

Data comes from Gist:File Loading Script.

MIT Licensed

Similar vizzes

Loading thumbnail…

Portrait of React V2

This visualization uses a circle pack layout to map the hierarchical structure of the React source code, with each node’s radius proportional to its file size. Each circle is filled with a radial gradient, where file extensions map to distinct colors and directory depth maps to a grayscale. The D3 zoom behavior enables panning and scaling, while labels show truncated file names. Data is loaded from a remote JSON Gist, and memoization is handled through a custom `computed` utility inspired by React’s `useMemo`.

CCurran Kelleher

83% match

Loading thumbnail…

Circle Pack with Gradients

This circle pack visualization displays the file hierarchy of the React source code, with each circle’s size proportional to file size and color encoding file extension. It uses `d3.pack`, `d3.hierarchy`, and `d3.zoom`, with radial gradients applied to every circle via SVG `<radialGradient>` elements. Gradients are computed from a depth-based grayscale scale for directories and per-extension colors for files. The data loads from a remote Gist, and dynamic recomputation is memoized on DOM nodes using a custom `computed` function.

CCurran Kelleher

82% match

Loading thumbnail…

Experiments with Rotating Nested Circles

This visualization renders a hierarchical JSON dataset as 300 rotating, nested circles that are projected onto the screen using a custom 3D-to-2D perspective transform with a tilt angle. The circles, representing packed hierarchy nodes via `d3.hierarchy` and `d3.pack`, are drawn as SVG ellipse paths, with each layer rotated slightly to create a depth illusion. Vivid colors highlight specific depth-2 nodes and their descendants, which are computed by sorting and filtering the pack layout. The rendering uses plain SVG with `createElementNS` and D3's array methods.

CCurran Kelleher

80% match

Loading thumbnail…

VZCode Source Tree

This circle pack visualization displays the file structure of the VZCode source code, a React-based code editor. It uses a d3 hierarchy and pack layout to represent directories and files as nested circles, with circle size proportional to file size and color encoding file types. The data is loaded as JSON from a GitHub Gist snapshot of the repository. The rendering includes interactive zoom via d3’s zoom behavior, and labels are placed inside circles using a computed memoization utility.

CCurran Kelleher

80% match

Loading thumbnail…

Portrait of React

This visualization shows a circle pack view of the React source code, where each circle represents a file or directory, with size proportional to file size and color indicating file type (e.g., `.jsx` files in light blue). The interactive diagram supports zooming and panning via `zoom` behavior, and files are labeled, with tooltips showing full names. Data is fetched from a GitHub Gist, and rendering uses the D3.js `hierarchy`, `pack`, and `select` APIs within a React framework, with memoized computations for performance.

CCurran Kelleher

79% match

Loading thumbnail…

Untitled

A zoomable circle-packing visualization displays hierarchical data as nested circles, with an initially clicked root (`assault`) revealing child nodes labeled “man,” “information,” “anyone,” and “area.” Built with React and D3 v4, it uses `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom` to animate transitions between levels, while `d3.scaleLinear` with HCL interpolation colors the circles. Clicking any circle zooms into its subtree, fading labels in and out, all rendered as SVG elements in a 900×900 viewport.

LLaowei42

77% match

Loading thumbnail…

SAVE POINT Circle Packing

This interactive circle packing visualization displays a medical dataset as a hierarchical arrangement of nested circles, where each node represents a category or item and its size corresponds to its value. Users can click on any circle to zoom into that subtree, with the view smoothly animating to focus on the selected level. Built with D3.js v4 and React, the visualization uses the `d3.pack()` layout algorithm, `d3.hierarchy()` for data structuring, and `d3.interpolateZoom()` for the zoom transitions. Node colors are assigned via a linear scale with HCL interpolation based on hierarchy depth. The visualization loads its data from a remote JSON file hosted on GitHub.

QQuinn Sebso

76% match

Loading thumbnail…

Zoomable Circle Packing

This example visualizes a hierarchical dataset as nested circles, with each circle’s size proportional to a value and color indicating depth. Clicking any circle smoothly zooms to that node, re-scaling the layout to center and enlarge its children. The visualization uses `d3.layout.pack` and `d3.scale.linear` for positioning and color, with SVG transitions animating circle radii and label opacity. It renders `flare.json` data, a common D3 hierarchy, and applies `d3.interpolateHcl` for color interpolation.

PP15GitHubStudent

76% match