Scatter Plot with Menus

100%

Scatter Plot with Menus

✓ Published1🌍 Public

Last edited Jan 28, 2020

Created on Jan 28, 2020

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.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set. The user can select which columns map to X and Y using dropdown menus.

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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

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

80% match