Scatter Plot with Legends

100%

Scatter Plot with Legends

✓ Published1🌍 Public

Last edited Feb 5, 2020

Created on Jan 28, 2020

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.

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

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

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

待实现功能： 1、当悬浮在某个声音上时，展示其叠层关系，比如当悬浮在Clap01.wav上时，Clap02.wav以及Clap03.wav会通过箭头的方式指向Clap01.wav，表明Clap02.wav以及Clap03.wav是Clap01.wav的叠层。此时高亮强调这三个声音，降低其他声音圆的透明度，通过键盘的1（Clap02.wav）,2（Clap03.wav）,3,4,5,6,7,8等来播放其叠层声音。

MIT Licensed

Similar vizzes

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

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

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

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

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

A hybrid visualization combines a scatter plot with circle packing to represent hierarchical sound design data. Using D3 v5 within a React framework, the SVG scene maps top-level sound categories (like Clap or Gunshot) as scatter points positioned by `xRange` and `yRange` scales, with nested child layers packed via `d3.pack`. Interactive hover events display sound names, while click events increment a visual counter. The interface integrates audio playback controls and a timer, though the core focus remains the layered spatial encoding of sound file relationships.

JJaloYang

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

83% match