Top 50 Spotify Songs of 2019
Design Brief - Using a dataset of our choice, and creating a visualization narrative that must: guide users to gain insight from the selected dataset, and animate at least one visualization via user interaction.
To view the interactive webpage, click here
The Dataset
This dataset is sourced from Kaggle. The dataset is about the Top 50 songs of Spotify in 2019, with variables like Genre, Track name, Artist name, Energy, Popularity, and Liveness.
Exploratory Data Analysis
As an avid music enthusiast, Spotify has been my loyal companion through every adventure and study session. Given my profound admiration for this music streaming platform, I decided to embark on an exploratory journey with the "Top 50 Spotify Songs of 2019" dataset, allowing me to delve deeper into the realm of music and visualization.
The "Top 50 Spotify Songs of 2019" dataset contains a wealth of information about the most popular songs on Spotify during that year, including details about their artists, genres, tempo, and popularity.
Manipulating Data in Javascript
Arrays have a built-in "forEach" function that allows you to loop through every item in an Array to analyze and/or change things. Here I’m using the built-in parseFloat function to change strings into numbers.
I started coding Bubble Chart in D3.js. D3.js is a popular JavaScript library for visualizing data using HTML, CSS, and SVG.
The bubble function creates data for the SVG, such as where to position each circle on the chart and its radius. This makes use of d3.pack, which generates a pack layout. The size function determines the size of the SVG. The padding determines the distance between circles.
