Interactively Explore the YOLO Flip

In preparation of the Winter Olympic Games 2014 in Sochi, we helped the Swiss newspaper Neue Zürcher Zeitung publish a long-form article about Iouri Podladtchikov, a professional snowboarder and – since yesterday – freshly baked Olympic gold medalist. To help readers better understand the sport and its terminology, we created a series of illustrations and an interactive animation in collaboration with scientific illustrator Roland Ryser, who brought a unique visual style and a didactic background to the project.

Our main goal was to explain how the Cab Double Cork 1440 works, the trick Iouri invented and aptly named the YOLO flip. “Cab Double Cork 1440?” This insider vocabulary confused us as well, so we wanted to provide the readers with a short introduction to snowboarding. We started with showing the context – the half-pipe where everything takes place – and visualized the numbers that are mentioned in the text using a Swiss train composition.

The halfpipe in Sochi in comparison with a SBB-Intercity train.

To teach readers what they should look out for in a snowboard trick, we chose to create animations of three distinct tricks that show the basic ingredients: flips, twists and style. A bit more snowboarding terminology: these are, from left to right, a Backside Air, a Frontside 900 and a Frontside Double Cork 1080.

Backside Air, Frontside 900, Frontside Double Cork 1080

To make the YOLO flip itself tangible, we combined several techniques to guide the reader through the trick, but also allow them to explore it at their own speed. Here are some decisions we made. If you want to follow along, it’s best if you open the visualization in another window.

Overview first

The first thing a reader sees is an overview of the jump so they get the whole context of what’s happening. By showing ghosted keyframes, we can take the time dimension out of the equation, making it easier focus on position in space.

YOLO flip overview

Guidance

3-yolo-guidanceBy providing a guided tour of the trick, the reader learns what to look out for. This way, we can also highlight important moments of the jump, that the reader can later revisit and explore.

Remove distractions

3-yolo-distractionsBy zooming in on just the body of the performer, we can keep out unnecessary distractions like the half-pipe and viewers. But more importantly, we can remove the position-in-space dimension, so readers can focus on the rotations of the snowboarder’s body over time instead of tracking him in the air above the half-pipe.

Viewpoints

3-yolo-viewpointsWith the two displays that monitor flips and twists, we let the reader know that these movements are important to observe. If you watch a video of a jump and know nothing about these two movements, all you will see is whirlwind of arms and legs. Because these displays reflect the current rotation around one body axis only, a reader can learn to observe rotations individually instead of all mixed together and apply this to other snowboard tricks as well.

Interactive exploration

3-yolo-scrubbingTo get a “feel” of the jump, a reader can scrub through the video frame-by-frame to go back and forth at their own speed and repeat certain movements to observe them from different viewpoints.

The video itself

To get a feeling of how fast this jump actually happens and under what conditions, the frame-by-frame animation can be expanded into the original video, that shows how it all happened in real-time.

This leaves us with with the fully interactive interface:

3-yolo-full

The most difficult part of producing this visualization was bringing it all together into a package that lots of people with different technical backgrounds can enjoy and understand. We started out with having a top navigation and three different screens: an introduction, a video player, and the interactive part. This didn’t feel right, because the parts were too separate and not as discoverable. We then considered using a toggle to switch between modes, but again, this was hard to discover. Through playing with our own visualization, we discovered that the different pieces of content worked quite well as target areas to toggle the different modes. This felt right, as it allowed for both guided interaction and accidental exploration. Try it yourself!

Process

To produce the YOLO flip visualization, we worked a lot with design sketches, storyboards, and prototypes. We used Final Cut Pro to track the snowboarder, then exported this video as still images to play with it. We put one d3 prototype online for you to play with and see how the scrubbing part was done.

Because we’re not used to extracting rotations in a snowboard jump ourselves, we built a small script that allowed us to track the snowboarder’s rotation in space during each frame of the video. We did this by holding our iPhone in a similar position to the snowboarder in the video and sending the gyroscope data to our computer using the SensorLog iPhone app. This way we were able to track pitch, roll and yaw data for each frame and understood the movements better. We planned on using this data in the visualization, too, but because the individual axis-rotations are really all interwoven, we had to adjust the rotation data slightly to provide better visual matching, although it’s not quite correct.

If you’re interested in more than just the YOLO jump, head over to the original article and read more about Iouri Podladtchikov.

Share this article

Subscribe for more

Give Feedback