data

Ever since I was a kid, I've loved watching the summer Olympics, and out of all the events, I especially loved gymnastics and diving. And though it was mostly because I come from a Chinese household and it was all we watched, I also loved the two for their grace and beauty.

But as I've gotten older, I watched less. I missed the last two Olympics entirely because of travel. So I was a bit nervous when Nadieh suggested Olympics for this month - especially since I'd be traveling for the first 12 days of the events. But thanks to a whole afternoon fiddling with VPNs and Nadieh's guidance on which events to watch, I was able to binge an inordinate amount of gymnastics and diving when I got back from Asia.

Out of all of the events, I enjoyed synchronized diving the most. That wasn't around when I was a kid, and I marveled at the trust and respect of each partnership - what it must take to be so in sync with each other. They were driven by a responsibility to do well for their partner, by a fear of letting them down. And when the teams medaled, their tearful embraces were beautifully emotional.

I wanted to recreate that beauty somehow.

I thought maybe I could do something with their scores. The women's events have five rounds, and men's have six. Each round consists of a difficulty score, six execution scores and five synchro scores. I wanted to get the scores of the top three teams of each event.

That's a lot of data.

The actual data gathering process was absolutely painful: I re-watched all four synchro events and manually entered all of the scores. It wasn't until I had gotten all the data that I found them all on the Rio Olympics website. I threw a bit of a fit over that one 😭

sketches

Because of my travels this month, my process was thrown off all over the place. I actually had a sense of what I wanted to do before I even had my data gathered.

Somewhere in the middle of my trip, Micah tweeted me this beauty:

It was a link to Yuri Vishnevsky's experimentation with algorithmic art in trying to generate a set of unique business cards. Some of them in particular looked like the top-down view after the divers had entered the water, and I knew I wanted to have a similar effect for my visualization:

Yuri didn't provide a link to his code, but did mention a stackexchange challenge where he got his inspiration, and one mention of the term "fractal search algorithm". I latched on to that term, and figured it was as good a place as any to try. And a quick search for "fractal search algorithm javascript" got me to Dan Gries' tutorial for Sweeping Fractal Lines:

Gorgeous.

And though it wasn't Yuri's water splash, it reminded me of silk flowing through water. It reminded me of ink in water. I thought, if I could make the divers's data look like this - how beautiful would that be?

I had enough ideas (though no sketches) to get right into it as soon as I got back from Asia (with only 1.5 weeks to spare).

code

The first few days was spent just trying to understand Dan's code. At only ~250 lines, it was beautiful in its brevity. As with any piece of code I wanted to understand, I printed out all the lines, and went through them line by line for understanding:

(I don't promise my notes to be intelligent.)

The key was to understand enough of what was going on to be able to replace the randomly generated data with my diving data. After the first day, I was able to boil it down to two key points:

• setLinePoints uses the fractal subdivision process and generates the x- and y-coordinates for a closed curve.
• onTimer is passed two of those closed curves (along with a miriad of other info): one for starting, and one for ending. It then draws those curves one after the other, slowly morphing from the starting curve to the ending curve. And as soon as it hits the ending curve, it shifts the ending curve into the starting curve, generates a new curve, and starts over. This happens until it hits the edge of the screen.

From there, I knew how I wanted to map my data:

• Each round would be a distinct curve
• Instead of randomly varying the x- and y-coordinates of the curve, I would use the divers' execution scores at each round
• The radius of each curve is denoted by the difficulty score of that round's dive
• The length between each round/curve is the score the divers received for that round

My first attempt at adapting Dan's code took a while and didn't turn out quite as I expected. I understood setLinePoints quite well and thus was able to use the divers' execution scores to generate the curves, but didn't understand some of the key parts of onTimer. And because onTimer took care of actually drawing the circles, I ended up with this:

DS Aug, Code 1

Not quite what I was expecting, heh. Primarily, I wasn't grasping how Dan was interpolating the shapes of the curves, creating the weird discontinuity between sections. I knew then that I had to re-implement Dan's code in a way that I could understand. So I kept most of the code from setLinePoints, but completely rewrote the rest with a custom D3 interpolater to help transition from each curve/round to the next. This worked marvelously:

DS Aug, Code 3

And just for fun, I also made it animate like Dan's did (the gif isn't quite so smooth, but I promise the actual code is 😁):

DS Aug, Code 4

After that, I had to refactor the code a little bit to be able to show and animate multiple of the flows, with each flow representing a country. My happiest moment was getting the animation working for all of the flows, and having the length of the animation dependent on the length of the flow instead of a set duration (I'm all about these small wins ✌️).

DS Aug, Code 6

All I had left to do after that was add in the event names, team information, and the scores for each round:

I have to admit, I'm not fully satisfied with the final version. I wanted to add in annotations, pointing out incredible and emotional moments in each event - because that was what made each of the events so beautiful to me. I wanted to link to videos of those moments (I actually have all the links collected), but I was out of time; I had already bled into September. I was also unsatisfied with the aesthetics; I was hoping for silk flowing in water, and instead I got...smoke billowing in the wind?

But like Nadieh adviced me sometime in August: the important thing isn't perfection (or near-perfection), but to produce something. We'll have good months, and bad months, but the act of finishing is an important one. And she's absolutely right; though I'm not satisfied with the outcome, I am very happy that I pushed through the technical challenges and managed to finish. And in a way, smoke in the wind is beautiful too 😀.

‍