Mapping a Super Bowl halftime show

Hey y’all! It’s Toni from the app development team and this week I wanted to challenge myself by trying to visualize a Super Bowl halftime show inside Datawrapper.

Kendrick Lamar's Super Bowl halftime show was a cultural moment — the most-watched U.S. television broadcast since the moon landing. I won’t try to unravel all the show's references, or the thoughtfully crafted lyrics from the only rapper to be awarded the Pulitzer Prize. (Others with way more knowledge of hip-hop culture have already been doing a great job at that!) Instead, I wanted to challenge myself to visualize the performance with Datawrapper by somehow drawing the field, stage setup, and most importantly the path that Kendrick traveled during his performance:

The show starts off with Uncle Sam, portrayed by Samuel L. Jackson, introducing us to the “great American game.” Kendrick sits on the hood of a Buick GNX parked on the square symbol in the upper left of the field, where he starts with an unreleased track called “Bodies.” Dancers start pouring out of the car for the song “squabble up” and Kendrick comes down to join them, performing along the width of the square.

After being interrupted by Uncle Sam for being “too ghetto,” Kendrick continues down the stairs of the square stage, performing his hit “HUMBLE.” He continues down for the next song “DNA,” where he runs across the long middle stage to the opposite side of the field, then moves back as the beat switches to “Euphoria.”

Below a street light near the middle of the field, Kendrick performs an a capella version of “man at the garden” with some homeboys, for which Uncle Sam orders the scorekeeper to “deduct one life.” Next up is “peekaboo,” performed inside the cross on the bottom left. He briefly considers singing “their favorite song,” but instead decides to cross the field toward the triangle symbol on the top right, with dancers following him in a wave-like pattern, while performing “Luther” with SZA. Both then perform “All The Stars” on the circle at the bottom right.

Uncle Sam interrupts again to approve of the “nice and calm” songs since “that's what America wants.” Sam gets interrupted by the beat of “Not Like Us,” as Kendrick dances his way from the right to the center of the long stage, finishing with a big circle in the middle while the whole stadium chants the infamous lyric “a minor.” The performance finishes with “tv off,” whose producer Mustard joins in the dancing until Kendrick ends the show by switching off an imagined television.

What is this visualization?

I created this visualization using a locator map. The American football field, stage setup, and Kendrick's path were all drawn in Figma and exported as SVGs. After some experimenting, I figured out how to use a JavaScript library called svg2geojson that would be able to convert these SVGs into the GeoJSONs that Datawrapper locator maps can recognize.

I used this Great Circle Calculator to adapt the 2D coordinate system of the SVG file to real latitude and longitude coordinates, setting the field's center at exactly 0°N 0°E to prevent the map projection from skewing the shapes. Conveniently, this is also a spot in the ocean without any land nearby. I had to take care that the paths I drew weren’t too complex, since otherwise the conversion library would crash. Thankfully this Figma extension called simplify path helped me out!

Thanks for reading, I hope you enjoyed it. While this might be the most convoluted way to display SVGs on the web, I learned a lot about GeoJSON and our locator maps in the process! Don’t forget to turn the “TV” back on next week for a Weekly Chart by our data vis developer Elliot!