Last.fm Genre Visualizer

Overview

A personal project during my Minor in Information Design & Technology, focused on fetching Last.fm user data to render interactive visualizations of their most listened-to music genres using Svelte and D3.js.

Project snapshot

• My role: Front-end developer / Data visualization
• Team: Individual project
• Type: Educational / Personal project
• Stack: Svelte, D3.js, Fetch API, JavaScript, CSS

The challenge

This was my first project working with external APIs and music data. I had to fetch user data from Last.fm, process it to extract genre information, and then create meaningful visualizations. Managing asynchronous data, mapping it to dynamic graphics, and handling edge cases for missing or inconsistent data were all new challenges, which made it a bit intimidating but mostly exciting. If there's anything I love, it's new challenges.

The solution

I built the frontend entirely in Svelte for reactive updates, and used D3.js to create interactive charts representing users' listening habits. The data was fetched via the Last.fm API, processed in JavaScript, and rendered dynamically in the browser. I focused on designing intuitive, visually clear representations while keeping the app responsive and performant.

My contributions

• Implemented data fetching from the Last.fm API and processed it to extract genres
• Built interactive and responsive visualizations using D3.js within Svelte components
• Handled asynchronous updates and edge cases for incomplete user data
• Experimented with visual design and user interaction for data-driven interfaces
• Gained hands-on experience integrating Svelte reactivity with D3 visualizations

Challenges & learnings

I learned how to handle external data, structure it for visualization, and integrate a reactive framework with a powerful visualization library. I discovered the challenges of building interactive graphics, mapping data effectively, and handling edge cases. This significantly improved my confidence with data-driven frontend development and is what encouraged me to keep learning more!

Outcome

I successfully created an interactive tool that renders users’ top music genres dynamically. The project gave me my first real experience with data visualization in the browser and awakened my curiosity for working with dynamic, interactive frontend applications.