Circle Pack with Gradients

100%

Circle Pack with Gradients

✓ Published4🌍 Public

Last edited Jun 1, 2024

Created on May 28, 2024

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.

AI-generated description

A circle pack visualization of the React source code, with gradients applied to all the circles!

Data comes from Gist:File Loading Script.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vue Circle Pack with Gradients

This example shows a zoomable circle packing visualization of the Vue.js core repository, where each circle represents a file or directory, sized by file size and colored by file extension. Hierarchical data is parsed with `d3.hierarchy` and `d3.pack`, while custom gradient definitions via SVG `radialGradient` elements enhance circle depth. Interactive pan and zoom is enabled through `d3.zoom`, with file sizes mapped to opacity using `d3.scaleLinear` and labels positioned with a monospace font.

CCurran Kelleher

88% match

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

84% match

Loading thumbnail…

Black & White Nested Circles

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.

CCurran Kelleher

82% match

Loading thumbnail…

Circles Pack

A grid of concentric circle packs, each rendered with a red stroke, semi-transparent fill, and varying radii, fills an SVG viewport. The visualization uses React components to generate a 10x10 matrix of circle clusters, with each cluster positioned at coordinates derived from an array of values. The circles are drawn using SVG `<circle>` elements via the custom `Circles` component, which accepts props for radius, position, stroke, and opacity. The code leverages React’s declarative rendering and JavaScript array mapping to systematically plot 100 nested circle groups.

NNita

79% match

Loading thumbnail…

Circles Pack

This visualization shows a large grid of concentric circles arranged in a repeating pattern across an SVG canvas. The circles are drawn with green outlines, a stroke width of 8, and 0.8 opacity, creating a dense, mosaic-like texture. The code uses React to render the SVG elements, with a custom `Circles` component that wraps the native SVG `<circle>` element. It generates 20 distinct radii and maps them over a 5×5 grid of positions, scaling the entire group by 0.4. ReactDOM mounts the tree to the DOM, and the page uses the UMD production builds of React 16.10.0.

NNita

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

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

77% match

Loading thumbnail…

Concentric circles -linear gradient

This example generates a dense, abstract field of concentric circles with a linear gradient background transitioning from dark blue to grey. The visualization employs a nested loop structure to map 80 angular steps and 80 radial steps, computing each circle’s position with trigonometric functions and randomized offsets. The React component `Circles` renders individual SVG `<circle>` elements, using a radial gradient definition (`#gradient-Saturn`) for fills and a drop-shadow filter. The `fill` property is dynamically assigned in `index.js` via a `radialGradient`, while the SVG canvas measures 960 by 500 pixels. The code relies on React’s `ReactDOM.render()` and maps over arrays to produce the pattern.

NNita

77% match