circle packing D3 Version 05

100%

circle packing D3 Version 05

✓ Published0🌍 Public

Last edited Mar 5, 2020

Created on Feb 5, 2020

Forked from circle packing D3 Version 03

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.

AI-generated description

Reference: https://observablehq.com/@project-essex/introduction-to-d3-and-svg

D3 V4 for circle packing： https://bl.ocks.org/denjn5/6d5ddd4226506d644bb20062fc60b53f

D3 V5 for circle packing: https://bl.ocks.org/HarryStevens/4fba7a62b0ff302ef49768198d4c54c6 https://observablehq.com/@johnhaldeman/tutorial-on-d3-basics-and-circle-packing-heirarchical-bubb

计时器： https://codepen.io/freeCodeCamp/pen/XpKrrW

Similar vizzes

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

95% match

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

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

93% match

Loading thumbnail…

circle packing D3 Version 03

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.

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

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

90% match

Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

A hybrid visualization combines a scatter plot with circle packing to represent hierarchical sound design data. Using D3 v5 within a React framework, the SVG scene maps top-level sound categories (like Clap or Gunshot) as scatter points positioned by `xRange` and `yRange` scales, with nested child layers packed via `d3.pack`. Interactive hover events display sound names, while click events increment a visual counter. The interface integrates audio playback controls and a timer, though the core focus remains the layered spatial encoding of sound file relationships.

JJaloYang

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

87% match