scatter plot

100%

✓ Published1🌍 Public

Last edited Mar 23, 2023

Created on Mar 19, 2023

This scatter plot displays the duration of 100 popular songs on the y-axis against their titles on the x-axis, using a point scale for song names and a linear scale for duration. Each song is represented by a steel-blue circle with a radius of 10 pixels. The visualization loads data from a CSV file via `d3.csv`, scales axes with `d3.scaleLinear` and `d3.scalePoint`, and renders axes using `d3.axisLeft` and `d3.axisBottom`. The SVG output is generated through D3 v5, with margins applied to position the chart within a 960-by-1200 pixel canvas.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Most streamed songs of all time

This visualization shows the most streamed songs of all time, plotting each song's name against its duration in minutes using a scatterplot. The horizontal axis represents duration, while the vertical axis displays the song titles, with points positioned to reveal the distribution of track lengths across popular hits. The chart is built with D3.js v7, using standard SVG rendering and scales to map the data from the CSV file to screen coordinates. The d3.csv function loads the dataset, and the scaleLinear and scaleBand APIs position the elements.

GGogineni44

81% match

Loading thumbnail…

Most streamed songs of all time

This visualization displays the most streamed songs of all time, plotting each track’s name against its duration in minutes using a simple scatterplot or bar layout. It loads data from a local CSV file with D3.js v7, using the `csv` and `select` APIs to parse the dataset and render the visual elements directly into the HTML page. The chart highlights how song lengths vary across popular hits.

GGogineni44

80% match

Loading thumbnail…

Scatter Plot

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.

KKan Kawabata

77% match

Loading thumbnail…

310553047-HW1

This interactive scatter plot visualizes a Spotify dataset, allowing users to compare any two musical attributes by selecting them from dropdown menus for the x- and y-axes. The visualization shows how the chosen variables correlate across tracks, with each data point represented as a semi-transparent blue circle. The code uses D3 v5’s `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` APIs to load data, render the SVG, and update the chart dynamically. Axis labels and gridlines are included, and the plot refreshes whenever the user changes the selected attributes.

Yyujun12689

76% match

Loading thumbnail…

Scatter Plot

This scatter plot displays 50 data points plotting area against value, with purple circles positioned using linear scales derived from the data's extent. The visualization demonstrates D3 axis customization, including tick lines that span the full chart dimensions, a rotated y-axis label, and a capitalized title. The code uses d3.csv to load the data and d3.scaleLinear, axisBottom, axisLeft, and extent functions from D3 v5, rendering everything as SVG elements within an 960x500 viewport.

Ccarlos157oliveira

75% match

Loading thumbnail…

Spotify

This interactive scatterplot visualizes a dataset of Spotify tracks, plotting pairs of audio features such as acousticness, energy, and valence on x- and y-axes. Users select features from two dropdown menus, and the visualization updates the axes and data points accordingly. Rendered as an SVG using D3.js version 5, the chart uses `d3.scaleLinear` for both axes and draws semi-transparent circles to indicate track distributions. The code reads from a local CSV file and updates the chart dynamically via a polling function that checks selector changes.

Gginnyching

75% match

Loading thumbnail…

Data

This example presents an interactive scatter plot of Spotify song attributes, allowing users to compare musical features such as Tempo, Energy, and Danceability across tracks from 2010 to 2020. A year slider filters the dataset, while dropdown menus let users select which attributes to plot on the x- and y-axes and which categorical field, either Top Genre or Artist, to use for color encoding. The visualization is built with React, using D3 v6 and v5 APIs including `scaleLinear` and `scaleOrdinal` for axes and color, alongside ReactDropdown for menu selection, and it renders SVG circles with native tooltips. Data is loaded via `d3.csv` from a GitHub gist containing the yearly music trend dataset.

Nnikki81140

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

75% match