Zoomable Circle Packing

100%

Zoomable Circle Packing

✓ Published0🌍 Public

Last edited Aug 30, 2018

Created on Aug 30, 2018

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.

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

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

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

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

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

91% match

Loading thumbnail…

Untitled

This interactive zoomable circle packing visualization displays the hierarchical structure of the flare.json dataset, with nested circles representing parent and child nodes sized by their numeric values. Users click circles to zoom into deeper levels, with smooth animated transitions between views. The visualization uses D3.js v4’s `d3.pack` layout, `d3.hierarchy`, and `d3.interpolateZoom` to animate the zooming effect, rendered as SVG elements with a linear color scale distinguishing depth levels. Text labels appear and fade based on the current zoom focus.

CCHENNI-Nidhaleddine

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

90% match