Skip to main content
SimilarExport ZIP
100%

scatter plot

✓ Published1🌍 Public
GGogineni44
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…

Spotify_D3ScatterPlot

This animated scatter plot visualizes Spotify listening habits, showing the relationship between total songs played and several rotating attributes including average listening time, new artists discovered, skipped songs, and mood score. Built with D3.js 6.7.0, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data from a CSV file loaded via `csv()`. The visualization cycles through four x-axis variables every two seconds using `setInterval`, redrawing circles with updated `cx` positions as the x-axis changes.

Cchandanamahesh0215@gmail.com
80% match
Loading thumbnail…

SCATTER-PLOT

This example visualizes listening time versus songs played from a Spotify habits dataset, plotting each week as a circle where size reflects artists discovered and color indicates mood score. It uses D3.js’s `scaleLinear`, `scaleSequential`, `interpolateTurbo`, `axisLeft`, and `axisBottom` to construct the scatter plot. The data loads from a GitHub Gist CSV file, and the reusable `scatterPlot` module renders SVG circles with hover tooltips.

Cchandanamahesh0215@gmail.com
79% match
Loading thumbnail…

Spotify Dataset Basic Scatter Plot with Axis Using React & D3

This scatter plot visualizes 500 tracks from a Spotify Music Dataset, plotting song duration in milliseconds against a popularity score from 0–100. The chart uses a linear scale for both axes, with the x-axis labels formatted as minutes:seconds. Built with React and D3 v7, the visualization uses D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` functions to create and scale the plot. Data is loaded from a CSV file and rendered as black circles with a radius of 6.

JJose Morales
77% match
Loading thumbnail…

Example Spotify Songs Scatter Plot

This scatter plot maps 50 mock Spotify songs, with energy on the x-axis and popularity on the y-axis, while point color encodes valence using a three-shade blue palette. Both scales are constructed with `d3.scaleLinear` and `d3.extent`, and axes are rendered via the `@mjmacgregor/axis-labels` helper library for labeled ticks. The visualization is rendered as SVG circles with opacity, and the underlying data is generated randomly using `Math.random()` in the main script, mimicking song attributes without a real dataset.

Mmacgregorm01@gmail.com
77% 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…

SPOTIFY - Scatter Plot

This interactive scatter plot visualizes Spotify listening habits, mapping metrics like average listening time, total songs played, and mood score. Users switch X and Y axes via dropdown selectors, while circle color encodes Mood_Score through d3.interpolateTurbo, and size encodes New_Artists_Discovered via d3.scaleSqrt. Hovering reveals a tooltip and focus ring. The D3 v7 SVG chart includes gridlines, axes, transitions on points, and a custom CSV loader that flattens single-line data.

Cchandanamahesh0215@gmail.com
76% match