Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

circle packing D3 Version 05

Public visualization

Viewing a saved revision (read-only)

9c7297c3f34241ad8968d3e61d69d3ef

circle packing D3 Version 05

0 stars0🌍 Public
JJaloYang
Last edited Mar 6, 2020
Created on Mar 6, 2020
Forked from Untitled

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.

AI-generated description