Skip to main content
SimilarExport ZIP
100%

Find 3 Datasets Assignment - Music

✓ Published0🌍 Public
AAlisha Peeriz
Last edited Sep 20, 2024
Created on Sep 9, 2024

This example displays the first row of the 10,400 Classic Hits music dataset from Spotify, parsed into a JSON object. It uses the `data.csv` file, which includes attributes like track name, artist, year, and musical features. The code imports the CSV, converts all quantitative fields to numbers, and renders the resulting object as formatted text in a `<pre>` element. It demonstrates parsing and basic data inspection.

AI-generated description

The Music Dataset, loaded and parsed as CSV.

This is music data from 1923-2023 from Spotify. It includes the title of the song (Track), the name of the performing artist or band (Artist),the year the track was released (Year), the length of the track in milliseconds (Duration),the musical time signature (Time_Signature), how suitable the track is for dancing (Danceability),how intense and active the track is (Energy), the key of the track(Key),the loudness of the track in decibels (Loudness), if the track is major or minor (Mode),how much spoken words are in the track (Speechiness), how acoustic a track is(Acousticness),how likely the track is instrumental (Instrumentalness), how present a live audience is in the track (Liveness),how musically positive the track is (Valence), the speed of the track in beats per minute (Tempo),how popular the track is (Popularity), the genre of the track(Genre).

Challenge

  • Find 3 datasets on a topic you are interested in
  • For each of those, fork this viz and replace the data
  • Parse the quantitative attributes into numbers
  • Update README.md to indicate the original data source

5 Tasks:

  • Identify correlations between danceability and energy for different genres
  • Explore the distribution of popularity scores across different years to see if older tracks are more popular
  • Examine trends in tempo and loudness over time to identify any differences in musical styles
  • Filter tracks with high acousticness and see how it correlates with instrumentalness
  • Compare average track durations by genre to see if certain genres tend to have longer or shorter tracks
MIT Licensed

Similar vizzes

Loading thumbnail…

Spotify Music Dataset Loading Data

This example loads a Spotify music dataset and displays the first 500 entries as raw JSON text in a `pre` element. The visualization uses a state machine to sequentially render three states: `undefined`, `'LOADING'`, and the parsed data array. It fetches `data.csv`, parses it with `d3.csvParse`, and converts `track_popularity` and `duration_ms` to numbers. Each state transition triggers a re-render via the D3 `select` and `.join` pattern, showing how asynchronous data loading can be handled transparently with D3 v7.

JJose Morales
75% match
Loading thumbnail…

Spotify Song Data

This example showcases a single sample record from a large random Spotify dataset, displaying its raw attributes in a formatted JSON structure. The main component takes a container element and injects a preformatted text block containing the first data point, with all quantitative fields converted from strings to numbers. The code relies on a custom CSV import module to load the data and exports the dataset for use across the application. It is built with Vue and rendered on a web page using the WebGL framework.

Mmacgregorm01@gmail.com
73% match
Loading thumbnail…

Loading and Parsing spotify Data

This example shows the size and structure of a Spotify top-tracks CSV dataset by displaying three summary metrics in large text: file size in kilobytes, row count, and column count. It loads the remote CSV with `d3.csv`, then reports the byte size using `d3.csvFormat`, while accessing row and column counts directly from the parsed data array and its `columns` property. The code also includes commented alternatives using `fetch` with `async`/`await` and `d3.csvParse`, plus a nested promise chain, illustrating different approaches to asynchronous data loading.

Llynz09
72% match
Loading thumbnail…

Data Table Summary - Dataset 3

This example displays a text-based summary of a dataset containing music listening history. It shows the total row count, column count, and file size in kilobytes, followed by the first ten rows of data presented as a formatted JSON object. The visualization uses the D3 library's `csv` and `csvFormat` functions to parse the data and calculate its size. The data originates from a last.fm profile, and the output is styled with a terminal-like aesthetic using black background and green text.

OOxfordComma
72% match
Loading thumbnail…

Data Visualization Homework 9: Spotify Tracks Dataset

This visualization explores a Spotify tracks dataset through multiple interactive views: a grid of per-attribute pie charts and histograms, a correlation matrix, a stacked bar chart of genre popularity, and a scatter plot relating artist and album popularity. Users switch views via dropdown menus and filter by genre. D3 v5 handles the SVG rendering, animations, and scales, while the jeezy and data2grid libraries compute the correlation matrix. The stacked bar chart uses `d3.stack` and a custom tooltip, and a legend highlights categories on mouseover.

Dderrick373519@gmail.com
72% match
Loading thumbnail…

SpotifyData

This example loads a Spotify track dataset from a CSV file and renders a scatter plot using D3.js v7, which is imported via UNPKG. The visualization maps the `popularity` column to the x-axis and the `loudness` column to the y-axis, with each track represented as a red circle. The implementation uses D3’s `scaleLinear` for axis scaling, and the data is preprocessed in the main `index.js` module before being passed to the `scatter` function. The SVG output is 900 by 500 pixels.

Aaaron.chu626@gmail.com
71% match
Loading thumbnail…

Spotify Music Attributes

This example loads a Spotify dataset of 2017 songs and displays basic file metadata in a large-text overlay. It uses `d3.tsv` to fetch and parse the tab-separated data, then reports the approximate file size in kilobytes, the total number of rows (songs), and the column count. The visualization also demonstrates an alternative async/await fetch method with `d3.csvParse`, though the primary path relies on `d3.tsv` and promise-based loading. Each song includes a binary label indicating whether the author liked it.

DdaojunL
71% match
Loading thumbnail…

Spotify Tracks Dataset

This interactive visualization explores a Spotify tracks dataset, letting users examine tracks by artist, album, and genre through a series of linked bar charts. Each chart displays tracks sorted by popularity, with dropdown menus to filter the data. Clicking a bar reveals detailed track information, including danceability, energy, and tempo. Built with Vue and D3 v5, the SVG-based charts use `scaleBand` and `scaleLinear` for axes and `select` for DOM manipulation, with a custom tooltip providing hover feedback. The dataset includes track metadata such as artist, album, and audio features.

Cchristina030
71% match