Scatter Plot with Layers

100%

Scatter Plot with Layers

✓ Published2🌍 Public

Last edited Feb 26, 2020

Created on Feb 17, 2020

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.

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

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

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

92% match

Loading thumbnail…

Scatter Plot with Layers

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.

Jjacoyat08

92% match

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

91% match

Loading thumbnail…

Scatter Plot with Menus

This scatter plot visualizes audio samples (claps, gunshots, whooshes, punches, roars, metal hits, and swishes) from a sound dataset, plotting each sample’s x and y coordinates as circles. It uses d3.v5 with SVG rendering, featuring an interactive color legend that filters and highlights points by sound category via click events. The plot also supports zooming and panning through d3.zoom, and displays tooltips with sample names. Data is loaded from soundData.json, with colors assigned using d3.schemeCategory10.

JJaloYang

87% match

Loading thumbnail…

Untitled

An interactive sound visualization displays a scatterplot of audio samples, each represented by a draggable circle colored by sound category (Clap, Whoosh, Punch, etc.) using d3.scaleLinear and d3.schemeCategory10. Clicking a circle plays the corresponding audio file via the Web Audio API and WebAudiox library, while a color legend filters highlights by category. Hovering shows tooltips, and the view supports zooming and panning through d3.zoom. The project uses D3 v3 with SVG rendering and imports from d3 modules for scales, axes, drag behavior, and data binding.

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…

Scatter Plot with Layers UMAP

This interactive scatter plot displays audio samples as draggable circles, UMAP-embedded by x/y coordinates, with each circle playing its associated sound on click. The visualization uses d3.v5 for SVG rendering, d3.zoom for pan/zoom controls, and d3.drag to move circles, while the WebAudiox API manages audio playback through a `createBufferSource`. Hovering reveals a sample's name via a `<title>` element, and a color legend filters sounds by category. The code also references a CirclePack.json for potential layer relationships, though not yet implemented.

JJaloYang

84% match