Fork of Basic Circle Pack

100%

Fork of Basic Circle Pack

✓ Published1🌍 Public

Last edited Jan 23, 2026

Created on Jan 23, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

92% match

Loading thumbnail…

Basic Circle Pack 2 - working

This example shows an interactive circle packing visualization of hierarchical data. Circles represent nodes in a tree, with nested circles indicating parent-child relationships, and clicking a circle zooms to expand that branch. The visualization uses d3.pack for layout and d3.hierarchy with sum and sort for data preparation. Add and remove buttons trigger rendering, each creating a new group of circles with different data. The code uses d3.scaleLinear with interpolateHcl for color encoding, d3.interpolateZoom for animated transitions, and SVG for rendering with click, mouseover, and mouseout event handlers.

BBrett Cunningham

90% match

Loading thumbnail…

Basic Circle Pack

A hierarchical circle-packing visualization displays nested data as clustered bubbles, with zooming and panning via mouse clicks. The demo uses D3.js v5 to construct the SVG layout, apply an HSL color scale by depth, and animate transitions between hierarchy levels using `transition` and `interpolateZoom`. Buttons add or remove data nodes, while the pack layout is generated with `d3.pack` and `d3.hierarchy`. The dataset is hardcoded from a “flare” file structure.

BBrett Cunningham

88% match

Loading thumbnail…

Basic Circle Pack - Add or Remove Trees from the DOM

A circle-packing visualization displays a hierarchical dataset as nested circles, with buttons to add or remove data nodes from the DOM. Using D3 v5’s `d3.pack` layout and `d3.hierarchy`, the SVG renders each node’s size proportional to its value. Clicking a circle zooms via a tween that interpolates the view, while mouseover and mouseout events add or remove stroke outlines. The code uses D3 selections, transitions, and the `transition.tween` API for smooth animation.

BBrett Cunningham

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

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

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

84% match

Loading thumbnail…

Fork of SAVE POINT Circle Packing

This visualization displays a hierarchical medical dataset as an interactive circle packing diagram. Users can click nodes to zoom into different levels of the tree, with smooth animated transitions between views, and hover over circles to see tooltips with descriptions. The implementation uses d3.pack for layout, d3.hierarchy for data structuring, and d3.interpolateZoom for zoom animations, all rendered as SVG with React. A search bar with autocomplete functionality filters the data, which is loaded remotely from a JSON file using d3.json.

QQuinn Sebso

82% match