Timeline

Inspiration & Ideation

The group was interested in exploring music trends specifically relating to how generations of users can influence the music charts and dictate which types of music or artists become ‘mainstream’ and popular through mass streaming practices. Our initial idea was to take a deeper look and analyze music trends through Spotify, and further take these datasets and compare them with data from Billboard Hot 100s to get a more holistic outlook of the music industry, and the streaming activities of users for both of these music streaming platforms.

Dataset

These visualizations will narrate a story that unpacks the trends from the past decade regarding the changing preferences in music. Data from Spotify and Billboard Hot 100s will be used to create visualizations that tell the story of how music tastes have changed or stayed similar each year, and what contributing factors are present, specifically focusing on the user demographics of Spotify. Data such as music streams for songs and artists, user demographics, and song/artist ranking will be cross-referenced with the same data retrieved from the Billboard Hot 100s to examine for similarities or differences in the top ranking music genres, songs, and artists for each year from 2014 to 2023.

Visualizations & ChatGPT

Initial visualizations can be viewed and examined in the ‘ VISUALIZATIONS ’ page for further observation into music trends of listeners through online-streaming in these platforms.

Site Design & Brand Guidelines

Spotify's For the Record Site Pages

Colour Palette

Will include picture soon.

Challenges

• Inadequate visualization for the 2nd task. The comparison between the years 2013-2023 do not provide enough insight as to exactly how much Gen Zs and Millennial’s music taste has changed.
• Datasets for the visualizations had to be researched and pieced together manually as no one dataset covered all of the necessary data and information needed for the visualizations, therefore the team needed to manually synthesize and combine data form different sources to create one dataset for each visualization.
• The current visualizations are still rough ideas which means the team needs to iterate further and discuss what types of visualizations are appropriate for certain datasets to create a more effective display of the data that we want to present.

Use of Colour in Our Visualizations

There has been several changes on how to use colour in our visualizations. One feedback we received was to grey out the irrelevant data and another was to assign colours to all data but muting the colours for irrelevant data. Here are images of one that is greyed out and one that has muted colours. Due to time constraints we couldn't change the rest of our visualizations to have colour and kept them greyed out.

Visualization 3: Spotify User Genre

This visualization was one of the hardest ones to get right as the data we found online and from AI were either conflicting or incomplete across age groups and year. We then ended up choosing to show only Pop & Hip-Hop/Rap as they were the only ones to consistently show up across all age groups and years. If we had more time we would have looked further into completing this particular dataset. Click here to view the visualization.

                    
const data = [
    { "Year": "2013", "Age Group": "Millennials", "Top Music Genres": "Pop", "Percentage": 35 },
    { "Year": "2013", "Age Group": "Millennials", "Top Music Genres": "Hip-Hop/Rap", "Percentage": 25 },
    { "Year": "2013", "Age Group": "Millennials", "Top Music Genres": "R&B", "Percentage": 20 },
    { "Year": "2013", "Age Group": "Millennials", "Top Music Genres": "K-Pop/J-Pop", "Percentage": 5 },
    { "Year": "2013", "Age Group": "Millennials", "Top Music Genres": "Regional Mexican, Bollywood, Spanish Contemporary", "Percentage": 10 },
    { "Year": "2013", "Age Group": "Millennials", "Top Music Genres": "Other Genres (Latin, EDM, etc.)", "Percentage": 5 },
    { "Year": "2013", "Age Group": "Gen Z", "Top Music Genres": "Pop", "Percentage": 40 },
    { "Year": "2013", "Age Group": "Gen Z", "Top Music Genres": "Hip-Hop/Rap", "Percentage": 25 },
    { "Year": "2013", "Age Group": "Gen Z", "Top Music Genres": "Electronic", "Percentage": 10 },
    { "Year": "2013", "Age Group": "Gen Z", "Top Music Genres": "Indie/Alternative", "Percentage": 15 },
    { "Year": "2013", "Age Group": "Gen Z", "Top Music Genres": "Other genres (Latin, EDM, etc.)", "Percentage": 10 },
    { "Year": "2023", "Age Group": "Millennials", "Top Music Genres": "Pop", "Percentage": 40 },
    { "Year": "2023", "Age Group": "Millennials", "Top Music Genres": "Hip-Hop/Rap", "Percentage": 30 },
    { "Year": "2023", "Age Group": "Millennials", "Top Music Genres": "Rock", "Percentage": 15 },
    { "Year": "2023", "Age Group": "Millennials", "Top Music Genres": "Indie/Alternative", "Percentage": 10 },
    { "Year": "2023", "Age Group": "Millennials", "Top Music Genres": "Other genres (Latin, EDM, etc.)", "Percentage": 5 },
    { "Year": "2023", "Age Group": "Gen Z", "Top Music Genres": "Pop", "Percentage": 40 },
    { "Year": "2023", "Age Group": "Gen Z", "Top Music Genres": "Afrobeats", "Percentage": 25 },
    { "Year": "2023", "Age Group": "Gen Z", "Top Music Genres": "Alternative/Indie", "Percentage": 20 },
    { "Year": "2023", "Age Group": "Gen Z", "Top Music Genres": "Hip-Hop/Rap", "Percentage": 10 },
    { "Year": "2023", "Age Group": "Gen Z", "Top Music Genres": "Other genres (Latin, EDM, etc.)", "Percentage": 5 }
];
            
                    
                

                    
const filteredData = [
    { "Year": "2013", "Age Group": "Millennials", "Top Music Genres": "Pop", "Percentage": 35 },
    { "Year": "2013", "Age Group": "Gen Z", "Top Music Genres": "Pop", "Percentage": 40 },
    { "Year": "2013", "Age Group": "Millennials", "Top Music Genres": "Hip-Hop/Rap", "Percentage": 25 },
    { "Year": "2013", "Age Group": "Gen Z", "Top Music Genres": "Hip-Hop/Rap", "Percentage": 25 },
    { "Year": "2013", "Age Group": "Millennials", "Top Music Genres": "Other Genres (Latin, EDM, etc.)", "Percentage": 5 },
    { "Year": "2013", "Age Group": "Gen Z", "Top Music Genres": "Other genres (Latin, EDM, etc.)", "Percentage": 10 },
    { "Year": "2023", "Age Group": "Millennials", "Top Music Genres": "Pop", "Percentage": 40 },
    { "Year": "2023", "Age Group": "Gen Z", "Top Music Genres": "Pop", "Percentage": 40 },
    { "Year": "2023", "Age Group": "Millennials", "Top Music Genres": "Hip-Hop/Rap", "Percentage": 30 },
    { "Year": "2023", "Age Group": "Gen Z", "Top Music Genres": "Hip-Hop/Rap", "Percentage": 10 },
    { "Year": "2023", "Age Group": "Millennials", "Top Music Genres": "Other genres (Latin, EDM, etc.)", "Percentage": 5 },
    { "Year": "2023", "Age Group": "Gen Z", "Top Music Genres": "Other genres (Latin, EDM, etc.)", "Percentage": 5 }
];
            
                    
                

Please note that adding these images were a last minute decision for the presentation (if shown), they will be put in a slideshow below.

1 / 4

2 / 4

3 / 4

4 / 4

❮ ❯

Member Roles

Arielle:

• Research, Ideation and Storytelling
• Visualization 01, 02 & 03: Research and Visualizations
• Milestone 01: PDF file + process document + rationale and analysis
• Web Design & Development: Creation, Structuring & Styling
  (Following Spotify's Base Branding Guidelines and Inspiration from Spotify's For the Record Site).
• Formatting majority of visualizations on the site.

Clark:

• Research, Ideation and Storytelling
• Visualization 04, 05, 06 & 07 Research and Visualizations
• Milestone 01: PDF file and process document + rationale and analysis
• Figma website prototype
• Made majority of project slide decks