top of page

Taylor Swift - Deep Dive

Design Process

Visualization on p5.js, 2017  

View Full Project.

Read Development Documentation.

Background & Objectives

 

The Love Machine Pt.1 uses data visualization to tell a story about Taylor Swift’s body of work as a musician, entertainer, and a public figure.

 

My objectives are as following:

  • Show her breadth and growth as a musician

  • Highlight interesting patterns in her work

  • Simplify the plethora of information in digestible formats

Part 0 - Context

I start with an introductory text. In this section, I used

“Look What You Made Me Do” video as the background to enrich the introduction with a visual context.

​

My keywords for the look & feel are sleek and femme fatale. The colors chosen are black, white, and neon pink.

Part 1 - Musicality

Multiple aspects of her music (BPM, genre, etc.) are each mapped into an element in a Cartesian plane.

 

  • x-axis: year released, to show growth & diversity of her work over time

  • y-axis: the songs' keys, mapped vertically like a musical scale

  • color: the genre of her songs are not always singular (i.e. pop-country, dance-pop), so I used an additive color system to represent the genres. Dark yellow is country, dark pink is pop, light pink is electro/dance, rock is grey. Whenever a song has multiple genres, the resulting color is an addition of each basic RGB values.

​​

  • beating circle: BPM, as the beat per minute is not always the most obvious aspect of a song, I decided to represent the BPM as a thin circular line, beating according to the speed of the song’s beats.

  • size: chart performance, a well-performing single is often described as a “big hit”, and therefore, I took the phrase literally and show chart’s performance as the size of the circle.

 

As user hovers over the circles (songs), the single artwork is displayed and it’s key and year are highlighted.

Part 2 - Lyricism

The design is pretty straightforward, the frequency of each word is mapped to the font size.

​

The word cloud excludes filler word such as “a”, “an”, “is”, “the”, etc.

Part 3 - Famous Relations

I decided to show her relations using a “map”. The position of each node/relation is decided by the type of relationship: ex-boyfriend, enemy, and friend/girlfriend, each type having their own color.

​​​

To represent fame, the number of social media following for each celebrity is mapped to the size of the circle.

Part 4 -

Cultural Prominence

The chart was developed for an earlier project, where I compare the “mention-worthiness” of different pop divas.

 

  • x-axis: year

  • y-axis: mention count

  • size: mention count, to indicate how “big” the singer was in that year.

​​

To help user scans through the chart, the chart highlights the dataset closest to the mouse position.

bottom of page