Skip to main content
SimilarExport ZIP
100%

Fork of Basic Scatter Plot with React & D3

✓ Published1🌍 Public
VVinayak Revankar
Last edited Sep 19, 2025
Created on Sep 9, 2025

A scatter plot visualizes the musical characteristics of Spotify's top songs from 2010 to 2019, positioning each track by its danceability and energy scores while sizing circles by popularity. A categorical color scale distinguishes genres, with a legend identifying the ten genre categories. The React app uses D3's `csv` loader to parse song attributes from a local CSV file, then leverages D3's `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart and its axes.

AI-generated description

Spotify Top Songs (2010–2019)

This dataset contains information about the Top 100 Spotify songs for each year between 2010 and 2019.
It includes metadata such as song title, artist, genre, and a variety of musical/audio features such as tempo, danceability, and popularity.

Attribute Descriptions (VAD Framework)

Attribute Type Description
index Quantitative Row index (unique ID for each record)
title Categorical Title of the song
artist Categorical Performing artist
top_genre Categorical Main genre of the song
year Ordered (Time) Release year (2010–2019)
nrgy Quantitative Energy score (0–100), higher = more energetic
dnce Quantitative Danceability score (0–100), higher = easier to dance to
dB Quantitative Loudness in decibels (negative values, closer to 0 = louder)
val Quantitative Valence score (0–100), higher = more positive/happy mood
dur Quantitative Duration in seconds
pop Quantitative Popularity score (0–100), higher = more popular
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Starter

This example presents a reusable React-based scatter plot that visualizes the relationship between song duration and popularity from a CSV dataset. The visualization employs D3.js v7 for data processing, linear scaling, and axis generation, while React 19 manages the component structure. The code uses `d3.csv()` to load data, `d3.scaleLinear()` for coordinate mapping, and `d3.axisBottom()` and `d3.axisLeft()` to render axes. All elements are drawn as SVG circles with a steelblue fill, positioned using `cx` and `cy` attributes derived from the scaled data values.

Mmynedisanjana@gmail.com
86% 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
86% match
Loading thumbnail…

Week 9 - Spotify data

This scatter plot maps music tracks by their danceability and energy levels, with each point’s size encoding popularity and color representing genre. A sidebar of checkboxes lets users toggle which genres appear, filtering the visualization to compare overlapping categories. Built with React and D3 v7, the chart uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for genre colors, and D3’s `join` operator to update SVG circles and legends as selections change.

VVinayak Revankar
85% 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
84% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes Spotify music attributes, plotting selected features against each other. The visualization uses React with hooks for state management and D3 scales to map data values to screen positions, rendering marks as SVG circles with tooltips. The example includes dropdown menus to switch between attributes, though the current implementation shows temperature and wind labels. Data loads via D3's tsv parser from a GitHub-hosted dataset, while axes are generated using custom React components that leverage D3's tick generation capabilities.

Pprint("Ayush")
84% match
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Spotify song dataset, allowing users to explore relationships between musical attributes such as valence, popularity, and danceability. Users select attributes for the X and Y axes via dropdown menus and filter data points using range sliders. The visualization updates dynamically, with points colored by musical key and a color legend that highlights specific keys on hover. Built with React and D3 v5, it uses SVG rendering with custom axes, scales, and a color legend.

Ppete0707
84% match
Loading thumbnail…

Spotify Dataset Basic Scatter Plot with React & D3

This example shows a basic scatter plot of Spotify track data, mapping song duration in milliseconds along the x-axis against track popularity on the y-axis. Each circle represents one of 500 songs from a Kaggle dataset subset. Using React hooks to load the CSV file, the rendering delegates to a D3 function that applies `scaleLinear` and `extent` to compute the scales. The D3 `select` and `join` methods create the circle elements.

JJose Morales
84% match
Loading thumbnail…

test2

This interactive scatterplot explores the top 20 Spotify songs per year in the U.S. from 2010 to 2019, plotting musical attributes like tempo and energy against each other. Users can switch the color encoding between top genre and artist, and hover over legend items to highlight specific categories while tooltips reveal song details. The visualization uses React with D3 v5 scales for positioning and color, rendering as SVG circles with dropdown menus for axis and color selections.

SSandyWu7179290504
83% match