Skip to main content
100%

Zoomable Circle Packing

✓ Published0🌍 Public
WWeikerWT
Last edited Jun 22, 2018
Created on Jun 22, 2018

This visualization presents a zoomable circle packing diagram of business metrics, organized by quarter (2017Q4, 2018Q1, 2018Q2) and then by category such as Demos, Pipeline Growth, and Proof of Concept. Each circle’s area encodes a numeric value, and clicking any circle zooms in to reveal its child categories, with smooth animated transitions. The D3 v4 implementation uses a linear color scale from light purple to dark blue, with leaf nodes rendered in white. Hovering highlights circles with a black stroke. The hierarchical dataset (flare.json) is structured by quarters and business activities, with leaf sizes representing counts or scores for items like Workplace, Teams, and Yammer. The visualization is built with SVG and includes interactive zooming driven by D3's pack layout.

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

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…

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
83% 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
83% 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
81% 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
80% match
Loading thumbnail…

SAVE POINT Circle Packing

This interactive circle packing visualization displays a medical dataset as a hierarchical arrangement of nested circles, where each node represents a category or item and its size corresponds to its value. Users can click on any circle to zoom into that subtree, with the view smoothly animating to focus on the selected level. Built with D3.js v4 and React, the visualization uses the `d3.pack()` layout algorithm, `d3.hierarchy()` for data structuring, and `d3.interpolateZoom()` for the zoom transitions. Node colors are assigned via a linear scale with HCL interpolation based on hierarchy depth. The visualization loads its data from a remote JSON file hosted on GitHub.

QQuinn Sebso
80% match
Loading thumbnail…

Zoomable Circle Packing with Canvas & D3.js - I

This example visualizes the hierarchical structure of occupational data through a zoomable circle packing layout, where nested circles represent job categories and their sizes correspond to employment counts. The visualization uses D3.js for data binding and layout computation via `d3.layout.pack`, while all rendering occurs on an HTML5 Canvas element. A hidden second canvas, where each circle receives a unique color, enables click-based selection and zooming through color-to-node lookup in a dictionary. The animation zooms between hierarchy levels, though the transition remains jittery and requires a hybrid approach to manage performance.

AAlexayEugine
79% match