🎵Hits Songs Through Time🎵

Project for COM-480 Data Visualization Course at EPFL

🚩Our final website link: https://com-480-data-visualization.github.io/project-2024-VisuaLoom/

🚩Our screen cast link: https://www.youtube.com/watch?v=55HVT1g9m8Q

Student's name	SCIPER
Heling Shi	370001
Jingren Tang	374079
Hanwen Zhang	370374

Milestone 1 • Milestone 2 • Milestone 3

⭐Abstract

Introduction

In the dynamic landscape of the music industry, hit songs not only reflect musical innovation but also echo cultural changes over time. This visualization project meticulously documents the evolution of popular music from 2000 to 2019. Through a series of insightful visualizations, we illustrate changes in the popularity of different genres, the rise and fall of artists, and the distinguishing characteristics of hit songs from one year to the next. Our goal is to illuminate patterns of musical dominance and evolution, providing users with an interactive exploration of hit songs through engaging visual representations.

Problem Statement

Our objective is to identify shifts in preferences for song styles and genres across different years, thereby enabling songwriters and listeners to deepen their understanding of musical trends. While our initial goal included a focus on lyrical content, our research has evolved to more comprehensively explore changes in song styles and genres. This refined approach allows our investigation to become more focused and in-depth. With our data visualization, we aim to answer the following questions:

• How have musical genres evolved over the last two decades?
• Which artists dominated the music scene in various years?
• What are the defining characteristics and genres of music that resonate with audiences, and how do they change over time?

Dataset

The dataset "Top Hits Spotify from 2000-2019" provides comprehensive information for about 2000 songs, offering a rich resource for analyzing the music industry. Each entry in the dataset contains:

• Artist's name
• Song title
• Release year
• Musical features such as danceability, energy, key, loudness, mode, speechiness, acousticness, instrumentalness, liveness, valence, genre, and tempo (BPM).

This dataset, popular on Kaggle, contains no NaN values, minimizing the need for extensive cleaning.

🚀Architecture & Set up

• src/

  • App.css , App.tsx : Main styles and main component files, defining the overall structure and style of the application.
  • main.tsx : Application entry file, responsible for initializing and rendering the main application component.
  • assets/ : Contains static resource files such as images and fonts.
  • components/ : Contains functional component files and their styles, such as RadarChart.tsx , Features.tsx , Navbar.tsx , etc.
  • picture/ : Contains image resources.

• set up

  • Clone the repo: git clone https://github.com/com-480-data-visualization/project-2024-VisuaLoom.git
  • Run the following command to install the dependencies npm install
  • Running the project npm run dev

📽 Screen cast

https://www.youtube.com/watch?v=55HVT1g9m8Q

Milestone 1 (29th March, 5pm)

10% of the final grade

This is a preliminary milestone to let you set up goals for your final project and assess the feasibility of your ideas. Please, fill the following sections about your project.

(max. 2000 characters per section)

🚩 Milestone 1

Milestone 2 (26th April, 5pm)

10% of the final grade

🚩 Milestone 2

Milestone 3 (31st May, 5pm)

🚩 Process Book

🚩Our final website link: https://com-480-data-visualization.github.io/project-2024-VisuaLoom/