Skip to main content
100%

Zoomable Circle Packing

✓ Published0🌍 Public
Aakollegger
Last edited Jan 10, 2018
Created on Jan 10, 2018

This visualization demonstrates zoomable circle packing, where hierarchical data is displayed as nested circles, with circle size representing the value of each node. The data is the flare.json dataset, a hierarchical structure of software classes. The visualization renders using SVG, and users can click on any circle to zoom in or out, with smooth animated transitions provided by D3 v4. Leaf nodes are colored white and hover effects highlight nodes for interactivity.

AI-generated description

Click on any package to zoom in or out. See also this static circle packing example.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/7607535'>Zoomable Circle Packing</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization displays the hierarchical structure of the Flare class library using nested circles, where each circle’s area encodes the size metric from the underlying flare.json dataset. Clicking any circle triggers a smooth zoom transition, bringing that node and its descendants into focus, while clicking again zooms back out. The visualization is built with D3 v4 and rendered as SVG, with hover effects highlighting nodes and labels that adjust dynamically as the hierarchy expands and collapses.

663anp3ca
94% 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
94% match
Loading thumbnail…

Zoomable Circle Packing

This interactive visualization uses a zoomable circle packing layout to display the hierarchical structure of the Flare data set. Each circle represents a node, with nested circles showing child categories, and clicking a circle zooms to that level while clicking the background returns to the root. Built with D3 v3, it uses `d3.layout.pack` for the layout, `d3.scale.linear` for coordinate scaling, and animated transitions via `transition.attr` to smoothly resize and reposition circles and labels. The SVG output uses color gradients based on depth and hover effects to highlight nodes.

PP15GitHubStudent
93% 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
93% match
Loading thumbnail…

Zoomable Circle Packing

This interactive visualization displays a hierarchical dataset as nested circles, where each circle represents a node and its size corresponds to the node's value. Clicking any circle animates a zoom to that node, revealing its children and hiding unrelated elements. The implementation uses d3.layout.pack for the circle layout and d3.interpolateZoom for smooth zoom transitions. The data comes from the flare.json file, which contains a tree structure with named categories and numeric sizes. The visualization renders with SVG circles and labels, with a color scale applied by tree depth.

AAndresAnayaIsaza
92% match
Loading thumbnail…

Zoomable Circle Packing

Nested circles represent the hierarchical structure of the Flare visualization toolkit, with each circle’s area proportional to the underlying data value. Clicking a circle smoothly zooms the view to focus on that subtree, while the background color shifts and labels fade in and out during the animated transition. The visualization uses D3 v4’s `d3.pack` layout, `d3.hierarchy`, and `d3.interpolateZoom` to calculate circle positions and drive the zoom animation, rendering the hierarchy as SVG circles and text elements. Data comes from the bundled `flare.json` file.

Mmbostock
92% match
Loading thumbnail…

Zoomable Circle Packing

This interactive visualization displays the flare software hierarchy as a nested circle packing layout, where each package and subpackage is represented by a colored circle whose size corresponds to its `size` value from the `flare.json` data. Clicking a circle zooms in to that node, and clicking the background returns to the root view, using animated transitions to smoothly interpolate the scale and translation. The example uses `d3.layout.pack` to compute circle positions and radii, with SVG circles and text labels, and `d3.interpolateZoom` to animate the zoom effect.

PPacsangon
91% 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
91% match