Skip to main content
๐ŸŒ Public

Share visualization

Send this visualization to others.

circle packing D3 Version 05

Public visualization

circle packing D3 Version 05

0 stars0๐ŸŒ Public
JJaloYang
Last edited Mar 5, 2020
Created on Feb 5, 2020

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

Comments

Sign in to join the discussion.

MIT Licensed