Scatter Plot with Layers

100%

Scatter Plot with Layers

✓ Published0🌍 Public

Last edited Feb 17, 2020

Created on Feb 17, 2020

An interactive scatter plot maps sound effects as colored, draggable circles organized by category using a custom legend. Clicking a circle plays its corresponding audio file, while hover reveals the name via a tooltip. The visualization supports zooming, panning, and keyboard controls to pause playback. Built with D3 v5, it uses SVG for rendering and the Web Audio API alongside jQuery for sound management.

AI-generated description

Reference: Drag SVG: https://observablehq.com/d/68afc6dedb39f9e4 https://bl.ocks.org/mbostock/2b534b091d80a8de39219dd076b316cd http://jsfiddle.net/mdml/da37B/

Webaudiox API:https://github.com/jeromeetienne/webaudiox

Draw Line Between Circles: https://observablehq.com/@harrylove/draw-lines-between-circles-nodes-using-d3-links

Draw an arrow between circles

Circle Pack: https://observablehq.com/@eesur/d3-enclosing-diagram-circle-pack https://observablehq.com/@d3/zoomable-circle-packing https://observablehq.com/@d3/circle-packing https://d3-wiki.readthedocs.io/zh_CN/master/Pack-Layout/ https://bl.ocks.org/denjn5/6d5ddd4226506d644bb20062fc60b53f https://strongriley.github.io/d3/ex/pack.html

jquery-3.4.1.min.js以及webaudiox.js为引用JS库

目前已实现的功能： 1、通过点击圆播放每一个声音，拖过按下键盘上的Q键，可暂停播放声音 2、选择图例强调某类声音 3、放大缩小以及左右拖动画面 4、鼠标悬浮在某个声音上，会显示其名字 5、遇到重叠的圆，可以通过鼠标拖拽圆，若需圆恢复原位，再次长按圆即可恢复

待实现功能： 1、当悬浮在某个声音上时，展示其叠层关系，比如当悬浮在Clap01.wav上时，Clap01Layer01.wav以及Clap01Layer02.wav会通过CirclePack的方式聚拢到Clap01.wav，表明Clap01Layer01.wav以及Clap01Layer02.wav是Clap01.wav的叠层。此时高亮强调这三个声音，降低其他声音圆的透明度，通过键盘的1（Clap02.wav）,2（Clap03.wav）,3,4,5,6,7,8等来播放其叠层声音，或者直接通过HOVER播放。 2、为CirclePack设计新的Json文件

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Layers

This interactive scatter plot visualizes sound-effect files and their layered components as color-coded circles, with each main sound accompanied by its sub-layers. Built with D3 v5, it uses SVG and canvas rendering, enabling users to play audio by clicking circles, pause with the Q key, drag overlapping circles, and zoom or pan the view. A legend filters sounds by category, and hover reveals file names. The visualization incorporates Web Audio API via webaudiox.js for sound playback and jQuery for keyboard event handling.

JJaloYang

95% match

Loading thumbnail…

Scatter Plot with Layers

This interactive scatter plot displays sound samples categorized by type, such as Clap, Whoosh, or Gunshot, with each circle representing an audio file. Users can click circles to play sounds, drag them to reposition, and hover to see names. Selecting a legend item highlights matching sounds and dims others. Built with D3 v5, it uses SVG for rendering, d3.zoom for panning and scaling, d3.drag for circle movement, and the WebAudiox library with the Web Audio API for playback.

Oocean1225

92% match

Loading thumbnail…

Scatter Plot with Layers

A scatter plot displays sound samples as colored circles, organized by category such as Clap or Gunshot. Hovering reveals the sample name, clicking plays the audio via the Web Audio API, and dragging repositions circles. The visualization uses D3 v5 with SVG rendering, supporting zooming, panning, and a clickable legend that filters data by category. A drag behavior updates circle positions, while a color scale maps each sound type to a distinct category color.

Oocean1225

90% match

Loading thumbnail…

Scatter Plot with Legends

This interactive scatter plot maps sound samples by their audio features, with color-coded categories such as Clap, Gunshot, and Whoosh. Users click circles to play audio, press Q to stop playback, and select legend items to highlight categories. The visualization supports zooming, panning, and dragging circles to explore overlapping points, with hover tooltips revealing names. Built with D3 v5, it uses SVG rendering, d3-drag for interactions, and the WebAudiox API for audio playback, displaying data from a JSON file.

JJaloYang

90% match

Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

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.

Oocean1225

86% match

Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This example visualizes a hierarchical dataset of sound files as an animated scatterplot and circle packing diagram using D3 v5. Root nodes represent audio categories positioned by their `scatX` and `scatY` coordinates, while child nodes appear as packed circles sized by their `value`. The layout is rendered as an SVG, with interactive hover effects that change circle colors. Additionally, the visualization includes a timer, audio playback controls, and a file selector, demonstrating integration of multiple JavaScript libraries alongside D3's selection and scale APIs.

Oocean1225

85% match

Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This example demonstrates a hybrid scatter plot and circle-packing visualization for layered sound effects, using D3.js v5 with SVG and animation. Hierarchical audio sample data, such as Clap01 and Gunshot01, is mapped to nested circles positioned by custom `scatX` and `scatY` coordinates. The visualization renders via `d3.select` and `d3.scaleLinear` for axes, with interactive hover styling through CSS. A timer interface and sound selection drop-down accompany the chart, enabled by jQuery and custom JavaScript timer functions.

Oocean1225

85% match

Loading thumbnail…

ScatterPlot circlepacking D3 Version 05

This example combines a scatter plot with a circular packing layout to visualize a hierarchical dataset of sound files, where each parent node represents a sound category and its children are individual audio layers. The visualization uses D3 v5 to render an SVG, with circles positioned according to normalized x/y coordinates from the data. Hovering highlights circles in red with reduced opacity, while a set of timer controls and a sound selection dropdown provide interactive utility features. The code leverages D3’s scales for coordinate mapping and jQuery for DOM manipulation.

Oocean1225

85% match