My Concept
I wanted to make a visualization that’s both fun and interactive, inspired by something I love: music. I picked the top 50 Spotify songs of 2023 because I thought it would be exciting to explore popular tracks visually. The idea was to take a simple concept; songs with different features like energy, mood, popularity, and danceability, and show it in a more creative and engaging way, instead of a boring, standard chart. I wanted people to notice patterns and interact with the data while keeping it simple and playful. In my visualization, the size of each circle represents popularity, the color represents danceability, (where pink is the least and blue is the most and purple is the in between), the higher the circle is, the happier the song’s mood, and the further to the right, the more energy the song has. The dataset I used was from Kaggle: https://www.kaggle.com/datasets/yukawithdata/spotify-top-tracks-2023.
A Highlight of Some Code That I’m Particularly Proud Of
One part I’m really proud of is the hover effect that shows the song title and artist. It makes the visualization feel more interactive and personal because you can actually explore the songs instead of just seeing circles on a canvas. The code works by checking the distance between the mouse position (mouseX, mouseY) and the center of each circle (c.x, c.y). If the distance is smaller than the circle’s radius (size / 2), it means the mouse is hovering over that circle, and then the text appears above it. I used fill(0) to make the text black, textSize(12) to set the size, and textAlign(CENTER) so it’s centered nicely over the circle.
The ${} syntax is called a template literal in JavaScript. It lets you insert variables directly into a string, so ${songs.getString(i, ‘track_name’)} pulls the song name from the table and ${songs.getString(i, ‘artist_name’)} pulls the artist. Using it this way makes it easy to combine them into one neat line of text without writing extra code to join them. I like this part because it’s simple, but it really makes the visualization interactive and fun to use.
// if mouse is hovering over the circle, show the song name and artist
if (dist(mouseX, mouseY, c.x, c.y) < size / 2) {
fill(0);
textSize(12);
textAlign(CENTER);
text(`${songs.getString(i, 'track_name')} - ${songs.getString(i, 'artist_name')}`, c.x, c.y - size);
}
}
Reflection and Ideas for Future Work or Improvements
I’m happy with how the visualization turned out because it’s simple, colorful, and interactive, and you can immediately see patterns in the data. In the future, I’d love to explore adding more interactivity, like filtering songs by genre or letting users compare two songs directly. I could also experiment with different visual encodings, like using different shapes to represent additional variables. Another idea is adding key press options to trigger effects or even including sound, so the circles could play a snippet of the song when clicked or hovered over. Overall, I think it’s a fun way to combine data and creativity, and it shows how you can turn something as tricky as data into a playful visual experience.