Create infographics

Making of “History of Rock in 100 Songs”

Developer Susie Lu explains the challenges behind this fun visual exploration

June 10, 2014

[This is a guest post by Susie Lu*, about the visualization project “History of Rock in 100 Songs”]



History of Rock in 100 Songs screenshot
Figure 1. History of Rock in 100 Songs screenshot, live site here

The world of Rock ‘n’ Roll has always been very confusing to me. I grew up listening to whatever my grandmother was listening to—mostly classical music and opera. U2? The Who? Who you? Let’s just say I was very confused in adolescence. My collaborator on this project, John Akred, is the complete opposite. He grew up on Rock ‘n’ Roll. John plays the guitar and still records music in his studio every year.

When I found the Guardian’s list of 100 songs representative of rock music, I was inspired to use skills from my day job, creating data visualizations, to learn more about Rock ‘n’ Roll. With John as a domain expert to sanity check my work and a quick Google search of music APIs, we were ready to begin.

The original Guardian dataset only had the song title, artist, and release year of the song. I looked up more band information, such as its members and lifetime, using and more song information, such as length and energy, using Echo Nest.

Exploring the data began with asking questions. I started simple. How do these songs appear over time? How do the timelines of the bands overlap with each other? I begin all of my visual brainstorming on paper like in Figure 2. It allows me to quickly see ideas. Plus, there is no hesitation to nix bad ideas because I’ve only invested a few minutes in the concept.

Figure 2. Initial sketches on how to show the songs, very abstract and loose


These early sketches used visual inspiration from music itself. There are cues from sheet music, records, and sound waves. The sounds waves inspired drawings of a streamgraph, a stacked area graph displaced around a horizontal axis, to represent the timeline of bands. Figure 3 shows how the sound waves drawing looks using real data. Each line in the graph represents a band’s lifetime. The spikes in a band’s line indicates when one of their songs, from the Guardian’s list of 100, was released.

Figure 3. Streamgraph data exploration of band timelines using d3.js


I liked the visual abstract look, but from a data visualization perspective, the graph was very hard to read. You could understand that many of theses bands were formed at the same time and that most are still together today, but the areas that represented the songs were very distorted and provided a poor way to compare songs or compare bands.

I wasn’t satisfied with how the timeline turned out. I also realized the timeline only provided me with some basic facts; it lacked any insight on how these artists sculpted a new genre of music. This sparked a new question: How did these bands influence each other? This meant continuing to explore other parts of our dataset and even expanding to include other sources. I found a website called Music Bloodline that lists influences from band to band. After gathering data for all the bands from the list of 100 songs, I created a network graph.

Figure 4. Screenshot of the network graph, originally created in Gephi, and then exported into sigma.js using the Sigmajs Exporter


Using Gephi’s Force Atlas algorithm, the nodes in Figure 4 were positioned based on the number of links between the nodes. More links between nodes meant they were closer together. As a result, the distance between bands provided one perspective on the “similarity” between bands.

From the network graph, I could understand what bands were most influential as well as what bands they influenced. It began to answer my questions about relationships. For example, The Beatles and The Rolling Stones were “similar.” Knowing that, it wasn’t surprising to find they were influenced by many of the same bands: Elvis, Chuck Berry, Bob Dylan, Jerry Lee Lewis, and Buddy Holly. But the network graph also raised new questions. While Bob Dylan influenced Dire Straits, did their bands overlap in time? What bands started between Dire Straits and Bob Dylan? Did those intermediary bands also influence Dire Straits? We resurfaced our initial timeline exploration because we realized we wanted to see the relationships between bands and the progression of a genre over time.

Back to sketching ideas… I combined the network graph and timeline into a single monster visualization. And a monster it was. The ideas were over-complicated and had too many dimensions to be encoded in visual attributes. This is the main reason I sketch out ideas before attempting to develop them. In this case, it stopped me from attempting to make an application that already had a crippling problem: the concept was too jumbled to be dissected by any audience. After brainstorming on the challenge of how to show so many different dimensions while maintaining the insights we wanted from both graphs, I combined a revised version of the timeline with the network graph into a single interactive space instead of a single visualization, seen in Figure 5.

Figure 5. From this sketch you can see how the final version of the web app took inspiration from this initial drawing


The graphic below, Figure 6, shows one of the earlier iterations of the web app that attempts to bring the initial sketch to life. From the revised version of the timeline, you are able to see how the different songs and bands stack up around 1970. Is this a visual confirmation of the golden age of rock ‘n’ roll? Perhaps. We also commonly think of new bands being disrupters—the most influential at the beginning of their lifetime. The data agrees: the majority of the songs from the Guardian’s list were released at the beginning of a band’s timeline.

Figure 6. Intermediary version of the final application


While we finally had the general idea of the data visualization, it still took many hours of refining the design before I was happy with the user experience. Developing the application became an iterative process, jumping between adding features, testing, and critiquing. The final visualization still embodies the iteration above, but many details were changed to improve the application. For example:

– The lines between the nodes in the network graph were arced clockwise or counterclockwise depending on if it was an influencer or influencee, inspired by Mike Bostock’s block

– The main colors were changed to preserve readability while keeping the attributes differentiable.

– The song stats changed from a vertically-centered graph to a more traditional histogram to make it more intuitive to understand.

– The songs on the timeline were changed to triangles to make it clear the circles in the network graph and the circles on the timeline weren’t related data points.

All of these updates arose from constantly self-critiquing and focusing on the most important question: How will the audience perceive the graph? Even more importantly, we involved real users to help us test the UI and uncover what elements were confusing.

Figure 7. A snapshot of the final visualization with Dire Straits selected

Using the final music visualization, it was easy to answer the questions I had raised earlier about the lineage of Dire Straits in relation to Bob Dylan. Bob Dylan started in 1961. Dire Straits started 16 years later. There were 38 bands on this list that started after Bob Dylan and before Dire Straits. Dire Straits was only influenced by two other bands, Bruce Springsteen and Eric Clapton. They both began after Bob Dylan. Or as John summarized “all roads lead to Bob Dylan.”

Most importantly, this project expanded the visual vocabulary we use at SVDS for attacking client problems. Knowing how to visualize many competing data dimensions to answer our users’ most important questions is a challenge we face every day. For example, we have used visualization to help enterprises understand gaps in their data across different applications, business units, and partners. In order to help one client create a roadmap to grow their business, we used complex visualizations that distilled the company’s business objectives and technical capabilities into a single view that prioritized these dimensions. Like in our Rock ‘n’ Roll example, both of these visualizations transformed complicated multidimensional datasets into an intuitive view of their data.

We hope this post has given you insight into how we create data visualizations that empower our users. Check out the final interactive visualization at


*Excited about data visualization and design, Susie is an experienced front-end developer who has spent recent years focussed on data visualization. She draws from her degrees in art and engineering to bring a well-rounded perspective to data science, telling compelling stories with data and visualization. Company Website: | Personal Website: |
Twitter: @DataToViz.

Written by Tiago Veloso
