Skip to main content
SimilarExport ZIP
100%

Week 4 - testing

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

This visualization displays the relationship between danceability and energy for popular music tracks from 2010, with circle size encoding popularity and color-coded genres. Built with React and D3.js v7, the scatter plot uses `scaleLinear` for both axes, `scaleOrdinal` with `schemeCategory10` for genre colors, and renders as SVG. The chart includes axis labels, grid lines, a legend, and tooltips. Data is loaded from a local CSV file and mapped to numeric values for the visual encoding.

AI-generated description

Music Track Visualization

An interactive data visualization of popular music tracks using React and D3.js. This visualization shows the relationship between danceability and energy of songs, with bubble size representing popularity and color representing genre.

Features

  • Scatter plot visualization with D3.js
  • Bubble chart showing track attributes
  • Color-coded by genre
  • Interactive tooltips with track information
  • Responsive design

Data

The visualization uses a dataset of popular music tracks from 2010 with the following attributes:

  • Danceability (dnce): How suitable a track is for dancing (0-100)
  • Energy (nrgy): Intensity and activity of the track (0-100)
  • Popularity (pop): Popularity score (0-100)

How to Run

  1. Clone this repository
  2. Open index.html in a web browser

Implementation Details

  • Uses native ES modules with import maps
  • No build step required
  • Data loaded from local CSV file
  • Built with React 19 and D3.js v7
MIT Licensed

Similar vizzes

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
89% match
Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

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.

VVinayak Revankar
80% 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
79% 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
77% match
Loading thumbnail…

Data Visualization viz

The visualization loads a CSV sample of songs and presents a data summary with row and column counts, then renders an SVG scatter plot of Year versus Energy, with circle size encoding popularity. Hovering reveals artist, song, year, energy, and popularity details. The code uses D3 v7's `d3.csv` to fetch and parse data with type inference, and `d3.select` to build the chart. A preview shows the first five rows formatted as JSON. The dark-themed interface includes KPI cards and a source link to the raw dataset.

Ssakethpapareddy@gmail.com
76% match
Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the top 15 Spotify songs from 2010-2019 as a horizontal bar chart, displaying danceability scores. The chart uses a pink background with purple accents and includes axis tick marks and labels. Built with React and D3 v5, the code leverages `d3.csv` for data loading, `scaleBand` and `scaleLinear` for scales, and renders SVG rectangles as marks. Data comes from a gist-hosted CSV file containing Spotify track metadata.

PPrathyusha Jampala
76% match
Loading thumbnail…

Comparison of different range of popularity

This interactive visualization compares musical attributes—such as danceability, energy, and tempo—across different popularity ranges using a song dataset from a CSV file. Users select a left and right popularity range via dropdown menus, and a diverging bar chart shows the average attribute values for each selection, with separate axes and color-coded bars. Built with React and D3 v7, the SVG rendering uses scales and custom axis components to display the filtered averages, allowing side-by-side comparison of how attribute profiles differ between popularity brackets.

Sstephanie0215
76% match
Loading thumbnail…

Stylized Bar Chart - Top 100 Songs Of Spotify

This visualization displays the danceability scores of the top 100 Spotify songs from 2018, ranked by artist as horizontal bars. Each bar’s length encodes the numeric danceability value using d3.scaleLinear, while artist names are positioned along the y-axis with d3.scaleBand. The React components render SVG elements, with axes generated by custom AxisBottom and AxisLeft components. Data is loaded via d3.csv from a GitHub-hosted dataset, and tooltips appear on hover using native SVG title elements.

Ssamemurk21
76% match