Skip to main content
SimilarExport ZIP
100%

circle packing D3 Version 03

✓ Published1🌍 Public
JJaloYang
Last edited Mar 7, 2020
Created on Mar 5, 2020

A circle packing visualization displays sound file names as nested circles, with each root circle representing a WAV file and child circles representing its layers. The SVG animation runs on D3 v3, using `d3.layout.pack` to position the hierarchy. Circles are colored blue, turn red on hover, and data is hardcoded as a JSON structure in the script.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

circle packing D3 Version 03

A hierarchical dataset of sound effect layers is visualized as a circle packing diagram, where each nested circle represents a file, with the outer circle naming the sound and inner circles its individual WAV layers. Built with D3 v3’s `d3.layout.pack`, the SVG renderer sizes circles by file size and applies radial gradients. Clicking a circle plays the corresponding audio file via the Web Audio API, creating an interactive sound exploration interface.

JJaloYang
92% match
Loading thumbnail…

circle packing D3 Version 05

A circle packing visualization displays hierarchical sound effect data, with nested circles representing audio layers and their relative sizes. The visualization uses D3 v5's `d3.pack` layout to position circles, rendered as SVG elements within a React framework. Users can hover over circles to change their color and click on them to trigger audio playback via the Web Audio API, while transitions animate layout updates. The data comes from a JSON file containing sound effect names and layer sizes, demonstrating interactive hierarchical data exploration with embedded audio playback.

JJaloYang
91% match
Loading thumbnail…

circle packing D3 Version 05(1)

This visualization combines a scatterplot with a circle-packing layout to display a hierarchical dataset of sound files. It positions parent nodes (sound names) according to their x and y coordinates while representing their child layers as nested circles, with circle sizes encoding the `size` attribute. The SVG rendering uses D3 v5, with axes and scales for numeric coordinates. Circles change color on hover, and the visualization includes a header displaying the filename. The data structure, defined in JavaScript, contains seven root sounds with multiple layer children.

Oocean1225
89% match
Loading thumbnail…

circle packing D3 Version 05

A hierarchical circle packing visualization maps an audio effects library into nested bubbles, with root nodes representing sound categories (Clap, Gunshot, MetalHit) and child nodes encoding individual waveform layers. The D3 v5 layout uses `d3.hierarchy` and `d3.pack` to compute circle positions, while `d3.forceSimulation` applies force-directed scattering to separate clusters. SVG circles render with partial opacity, and hovering highlights nodes red through CSS transitions. The code reads from an embedded `soundData` JSON structure, assigning each leaf a proportional area based on its `value` attribute, with the visualization updating dynamically as the simulation settles.

JJaloYang
89% 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
88% match
Loading thumbnail…

circle packing D3 Version 05

This example visualizes a hierarchical audio sample library as a circle packing diagram, where parent nodes represent sound categories like Clap, Gunshot, and MetalHit, and leaf nodes correspond to individual audio layers with proportional values. Built with D3 v5, the SVG rendering uses the script’s inline `soundData` object, scaling circle areas by `value` attributes to convey layer weight. Interactive hover feedback is applied via CSS classes: leaf circles turn red and ancestor circles yellow, highlighting the nested structure. The code also includes commented-out axis scales, but the primary focus is the packed circle layout.

JJaloYang
87% match
Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This example combines a scatter plot with a circle-packing layout to visualize a hierarchical collection of sound files and their layers. Each parent node (such as Clap01.wav) is positioned using x and y coordinates defined in the data, while child nodes representing individual audio layers are packed into circles. The visualization uses d3.hierarchy and d3.pack to compute the nested circle layout, with d3.scaleLinear handling the spatial mapping. Hovering over any circle highlights it in red via CSS transitions, and all elements are rendered as SVG.

JJaloYang
84% match
Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This example visualizes a hierarchical sound library as a circle-packing layout, with parent nodes representing sound categories like gunshots and explosions, and child nodes for individual layer files. The visualization uses D3 v5’s `d3.hierarchy` and `d3.pack` to generate the nested circles, rendered in SVG with hover effects that change circle fill color. Audio controls let users select and play a target sound, with a timer and play/mute buttons implemented in JavaScript, while leaf values modulate circle sizes.

JJaloYang
82% match