Vue Circle Pack with Gradients

100%

Vue Circle Pack with Gradients

✓ Published0🌍 Public

Last edited May 28, 2024

Created on May 28, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

Zoomable Circle Packing

A zoomable circle packing visualization displays a hierarchical dataset as nested circles, where each circle's size corresponds to a numeric value. Clicking a circle zooms into that branch, expanding its children while hiding others, and clicking the background returns to the root. Built with D3 version 3, it uses `d3.layout.pack` to compute the circle layout and `d3.scale.linear` for positioning. The view animates via `transition.attr` over 750 milliseconds, updating circle positions and radii. The code uses the `flare.json` dataset and renders with SVG elements, including circles and text labels.

PPacsangon

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

81% match

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization presents a hierarchical dataset as a set of nested circles, where each circle represents a node and its size reflects the node's value. Clicking a circle zooms in to focus on that branch, while clicking the background returns to the root view, with smooth animated transitions. Built with D3 v4, it uses `d3.pack` for circle-packing layout, `d3.hierarchy` for tree processing, and `d3.transition` with `interpolateZoom` for the zooming effect. The flare.json file supplies the data, which is rendered as SVG elements with hover highlighting and color gradients based on depth.

PPragyagarg

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

79% match

Loading thumbnail…

Fork of Basic Circle Pack

This example demonstrates an interactive circle-packing visualization with buttons to add or remove datasets. It uses a color scale that maps value domains to HSL hues, while animated zoom transitions and click interactions reveal hierarchical data structures. The visualization relies on d3.pack for layout, d3.hierarchy for tree construction, and d3.interpolateZoom for smooth viewpoint transitions. SVG elements render circles and labels, with click events triggering focus changes and color strokes for selection feedback.

Wwqp782@haw-hamburg.de

78% match

Loading thumbnail…

Fork of Basic Circle Pack

A fork of the basic circle pack example demonstrates hierarchical data visualization using d3.pack, where circles represent nested nodes and are colored by depth using a linear scale. The view animates between zoom levels via d3.interpolateZoom, triggered by clicking circles or the background. Buttons allow adding and removing data, though the specific data mutation logic is not shown. The visualization renders in SVG with smooth transitions, and labels appear only for the current focus node's children.

554x1

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

77% match