Formula 1 World Circuits

It’s time to go retro racer in 2018.

Formula 1 screenshot

Check out this animated map of Formula 1 World Circuits!

Even though it is already May, the college basketball excitement and hype of March Madness inspired me to do a sports-related data visualization or mapping project.  It was a lot of fun working with animations for the gerrymandering topic in What’s Your Vote Worth?, and it eventually crossed my mind to explore Formula 1 circuits.

What we do here is stack all the circuits on top of each other, like misshapen pancakes, and show you only 1 at a time.  Even though they’re scattered throughout several continents, here they share the same space and the same map scale.  Then, we continually move on to another circuit by morphing between the current shape and the next shape in the pancake stack.  The world reference map is also updated to provide geographical context.

An argument for doing this (other than just because I can) would be that you can directly compare the circuits’ shapes, sizes, and orientations, without having to find and navigate to each circuit separately as with a traditional web map.

I wanted to style this with an 80’s retro racer vision of a neon, cyberpunk future we’re all speeding towards, so we employed SVG and CSS effects along with an awesome font to achieve the final look.  (Thanks, Sarah!)

The stacking and morphing is all done on-the-fly in JavaScript with some neat map projection and shape animation techniques.  We’ll walk through how D3 and flubber were used to make all this come together in upcoming blog posts.

https://petrichor.studio/2018/05/formula1/

Leave a Reply

Your email address will not be published. Required fields are marked *