Scatter Plot

100%

✓ Published0🌍 Public

Last edited Jun 7, 2019

Created on Jun 3, 2019

A scatter plot displays metric1 against an index for each data point, with a circular tooltip revealing the ID on hover. Clicking a circle loads an audio file from a CSV of URLs and plays it through an HTML audio element. The visualization uses D3 v5's `csv`, `scaleLinear`, `axisLeft`, `axisBottom`, and `select` APIs, rendering two SVGs with mouse event handlers for interactive feedback.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange

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

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

80% match

Loading thumbnail…

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

JJames Huang

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

78% match

Loading thumbnail…

scatterPlot

A scatter plot displays letters from a CSV file against their corresponding numeric values as circles. The chart uses D3 v5 with an SVG rendering, loading data via `d3.csv` and scaling positions with `scaleLinear` for the x-axis and `scalePoint` for the y-axis. Axes are generated using `axisBottom` and `axisLeft`, with tick lines spanning the plot area.

VVvgupta

78% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables from a CSV dataset, plotting each point with x and y coordinates. It uses D3 version 6 with an SVG rendering approach, employing `d3.scaleLinear` to map the data domains to pixel ranges and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded asynchronously via `d3.csv`, and circles are appended and joined to the data using `.join('circle')`. The plot is styled with a teal fill and includes axis labels for "Numbers" and "Amount."

Bbugfree55

78% match

Loading thumbnail…

Scatter Plot

A scatter plot displays dummy data from a CSV file, mapping the numeric `value` field to the x-axis and the categorical `index` field to the y-axis, with circle size fixed and fill color transitioning from yellow to green based on value. Using D3 v5, the code employs `d3.scaleLinear` for both x and y scales, `d3.scalePoint` for categorical positioning, and `d3.axisBottom` with a `~s` format tick label for the value axis. Circles are rendered as SVG elements with a color scale, while the chart includes axis labels and a title.

MMert Gürkan

78% match