Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

ScatterPlot circlepacking D3 Version 05

Public visualization

ScatterPlot circlepacking D3 Version 05

0 stars1🌍 Public
Oocean1225
Last edited Mar 11, 2020
Created on Mar 8, 2020

This interactive visualization merges a scatterplot with a circle-packing layout to map sound files and their component layers. Each top-level node represents a sound, positioned by its normalized x/y coordinates, while nested children are packed into circles whose sizes reflect their `value` attributes. The D3 v5 (d3.v5) code uses a force-directed simulation to resolve overlaps between nodes, rendering them as SVG circles. Hovering highlights nodes in red per the CSS. A JavaScript timer and sound-preview selector provide playback controls, though the core graphic remains a static, animated-free representation of hierarchical audio data.

AI-generated description

An example showing the capabilities of VizHub.

Comments

Sign in to join the discussion.

MIT Licensed