Earlier this month, we released an interactive animation describing how data science is woven into the fabric of Stitch Fix: our Algorithms Tour. It was a lot of fun to make and even more fun to see people’s responses to it. For those interested in how we did it, we thought we’d give a quick tour of what lies under that Tour.
In a short series of blog posts, we’ll describe how we made it and provide some starter-kit code with each one. In this post we’ll first describe our high-level motivations and our development process, and then explain how this translated into our overall code structure. (If you’re itching for the code, feel free to jump right in.)
There is a surprising breadth and depth of data science application at Stitch Fix. Some of this is demonstrated in our blog, but we hoped to find a more cohesive public expression of it. We drew inspiration from the scrollytelling coherence of Stephanie Yee and Tony Chu’s Visual Introduction to Machine Learning, from the illustrative clarity of Victor Powell and Lewis Lehe’s Explained Visually project, and from the content and mathematical descriptions in Ilya Katsov’s post on Data Mining Problems in Retail. Our goal was to create something fun, informative and hopefully attractive.
Two aspects of our development process are pertinent here. One is that it was highly iterative and creative: sketch, build, repeat, with a tight loop of hours to days. Even the ‘build’ step was essentially a creative loop of minutes to hours; the process had more in common with jointly developing text in a google doc or group-painting than it did with some sort of spec design and handover. New ideas would flow from seeing the previous ideas in situ, and dead-ends quickly avoided, and the faster we could get ideas into animated form the better this loop worked.
The second noteworthy aspect of our process was that the text, mathematical descriptions, images and animations all grew up together as a single entity, rather than building one first and then appending the others to it. Though we didn’t know exactly where it was all going until we saw it start to converge, we knew all along that it was meant to be a cohesive animated-mathy-illustrated-story, and we treated it as such throughout.
Scrollytelling Code Structure
We’ve open-sourced the code for the tour in its final form, and the readme provides a bit of an entry point and guide. But it’s not the cleanest code you’ll ever see, and maybe not ideal as a starting point for other such animated-mathy-illustrated-stories, so we’ve created a relatively bare-bones version of the high-level structure we used for the tour: see the code and demo. We’ll be excited to see it used by others, so please do.
In forthcoming posts we’ll walk through some of the simulations used in the Tour and go over some other animation details. More code ahead!