Project circularPacking

100%

Project circularPacking

✓ Published1🌍 Public

Last edited Dec 4, 2022

Created on Sep 28, 2022

A zoomable circular packing diagram displays hierarchical music-genre data, with artists as leaf nodes sized by fan count and color-coded by depth. The visualization uses D3 v5’s `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom` to animate transitions between parent and child clusters on click, with tooltips showing artist names and fan counts on hover. Rendered as SVG, it imports D3 via a CDN and is built within a Vue framework.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Project circularPacking

This example visualizes a hierarchical dataset of CERFACS researchers using a zoomable circular packing layout in D3. Clicking a non-root circle zooms into that node’s subtree, while clicking the background returns to the full view, with smooth animated transitions. It renders circles and text labels in SVG, using `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom`. The code also demonstrates ES6 module imports and loads data from a local JSON file.

YYiorgos Bagakis

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

78% match

Loading thumbnail…

Zoomable packing celeb

This interactive zoomable packing visualization displays celebrity samples grouped by category and gender, with each circle sized proportionally to the sample count. Users can click circles to zoom between hierarchy levels through smooth transition animations. The visualization is built with React and D3 v5, using the `d3.pack` layout on hierarchically nested CSV data, while `d3.scaleOrdinal` and `d3.scaleSequential` with the magma interpolator handle color encoding. Celebrity images are placed within clipped circles, positioned using each record's offset value, with zoom transitions driven by `d3.interpolateZoom` and `transition.attrTween`.

MManies Raj

78% match

Loading thumbnail…

Layout

This example shows an interactive circular packing diagram where each circle represents a node in a hierarchical dataset, with leaf nodes as white circles and parent nodes colored by depth. Clicking a circle zooms to focus on that subtree, smoothly transitioning the view. Built with D3 v4, it uses the `d3.pack` layout to compute circle positions and radii, and `d3.hierarchy` to process the data from a local `flare.json` file. The visualization is rendered as SVG, with hover highlighting on nodes and a zoom transition that repositions and rescales circles and labels via the `transition` API.

AAkriti97

78% match

Loading thumbnail…

circle packing D3 Version 05

This interactive circle packing visualization displays hierarchical audio file data as nested bubbles, with each node representing a sound effect and its associated layers. Built with D3 v5 and React, the visualization uses `d3.pack` to generate the circular layout and renders via SVG. Users can explore the hierarchy through hover effects that highlight leaf and ancestor circles, while a Web Audio API integration allows playback of individual audio files when clicking on nodes. The code also incorporates jQuery for keydown event handling and includes axis scales from `d3.scaleLinear` for coordinate reference.

JJaloYang

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

77% match

Loading thumbnail…

Store constraining + zoomable pack circle

This zoomable circle packing visualization displays hierarchical data from altData.json using nested circles sized by leaf node values. The chart starts centered on the root node and animates through zoom transitions when clicking child circles, revealing deeper levels of the hierarchy. Built with D3 v5, the code uses `d3.pack`, `d3.hierarchy`, and `d3.interpolateZoom` to calculate layouts and smooth zooming, while transitions update circle radii and label visibility. The SVG rendering uses a color scale to distinguish depths, with click handlers enabling interactive navigation through the tree structure.

CCalvin Gomez

77% match

Loading thumbnail…

Untitled

This interactive visualization uses a circular packing layout to display a hierarchical dataset from the file `flare.json`. The code employs D3.js v4, React, and SVG with animation, leveraging `d3.hierarchy` to aggregate leaf sizes and `d3.pack` to position circles. Clicking on a node triggers a smooth zoom transition via `d3.transition` and `interpolateZoom` to focus on that subtree, while text labels fade in and out based on parent relationships.

LLaowei42

77% match