UX Designer + Researcher
Lauryn Visualization Cover.png

Lauryn Hill Visualization

The Influence of Lauryn Hill

An interactive visualization of tracks that sample Lauryn Hill.

Spring 2019

Overview

Ms. Lauryn Hill is often cited as one of the most influential artists in hip-hop. But what does this influence look like and sound like? This project was inspired by my love of Lauryn Hill, my interest in sampling, and my goal of creating a compelling data visualization. The Influence of Lauryn Hill is an interactive visualization of songs that sample tracks from Lauryn Hill’s debut (and only!) solo album, The Miseducation of Lauryn Hill. I designed and coded this project from scratch using p5.js.

Collecting the Data

WhoSampled has a rich database of music that samples Lauryn Hill

WhoSampled has a rich database of music that samples Lauryn Hill

A dull csv waiting to be transformed into a beautiful visualization

A dull csv waiting to be transformed into a beautiful visualization

I wanted to collect data that would reveal connections between Lauryn Hill and other artists, and this led me to WhoSampled, a site and database of information on sampling — the reuse of parts of one song in another song. Sampling is a particularly common practice in hip-hop, and I became interested in how Lauryn Hill’s music has been sampled by different artists. I wrote a short script to scrape all the data I could get from WhoSampled and converted it into an informative yet not-so-engaging spreadsheet.

The data I was able to collect on the sampled tracks included year, time stamp, sampled musical elements, and label. Considering the available data, I then worked on sketching different visualizations that could reveal patterns or relationships between this data.

Sketching

I considered representing the data in a variety of layouts and with different types of contextual information, such as the date that Lauryn Hill’s music was released. While the dataset initially included samples from Fugees (a hip-hop group Lauryn Hill was a part of before going solo), I eventually narrowed it to focus on her solo album and MTV Live album. While I wanted to reveal the general patterns of when her music was sampled the most throughout time, I also wanted to enable more granular visualizations of which parts of a certain track were sampled.

Initial paper sketches

Initial paper sketches

More detailed wireframes and mockups incorporating different views by Year, Track, and Genre

More detailed wireframes and mockups incorporating different views by Year, Track, and Genre

Visualizing the Data

After testing out different mockups, I implemented the first version of the visualization, which emphasized how often Lauryn Hill’s music was sampled since she released her solo album. I wanted the style of the visualization to evoke audio levels, so I designed each track as a square that could be clicked on or highlighted in orange — the color reminiscent of album cover for The Miseducation of Lauryn Hill. While I was happy with how the overall visualization looked, I felt that another layer of exploration would strengthen engagement with the visualization.

Mockup 1.png
Mockup 2.png

In addition to visualizing tracks by year, I added another view that allowed the viewer to explore tracks by the times at which they were sampled. The same song could be sampled in a variety of ways, and I wanted to enable more interesting comparisons between tracks. For example, the track Doo Wop was sampled at 12 different spots, which led to an array of tracks that emphasized different elements, such as the vocals, the beat, and the melody.

Mockup 3.png

After finalizing the layout, I created the final version of the visualization, with some different UI elements and fonts.

The final version!

The final version!

Lauryn Final 2.png

Takeaways

  1. More data doesn’t necessarily lead to a better story.

    I started out with much more data than I ended up using. Initially, I felt that I had to use as much data as I could in order to create a more compelling visualization. However, I realized that working with a smaller data set can allow you to reveal more interesting patterns, such as the patterns of sampling for an individual track vs. all tracks.

  2. Interactive visualizations should enable different levels of engagement.

    Not everyone is a music nerd! In order to make this visualization accessible to audiences with varying levels of interest, I needed to think about providing varying layers of information. So I started broad with the first layer, by showing all of the tracks, and I later added a more specific layer for individual tracks.

  3. Programming with p5.js is fun and rewarding!

    It’s a great way to create relatively quick, interactive visualizations. It’s easy to debug and gets both my coding and artistic juices flowing~