• Stars
    star
    169
  • Rank 224,453 (Top 5 %)
  • Language
    HTML
  • Created over 7 years ago
  • Updated 3 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

How data science is woven into the fabric of Stitch Fix

Stitch Fix Algorithms Tour

See it here: algorithms-tour.stitchfix.com

Made by: Eric Colson, Brian Coffey, Tarek Rached and Liz Cruz

Made with: Mike Bostock's D3.js and Jim Vallandingham's scrollytelling code

Inspired by: Stephanie Yee and Tony Chu's Visual Introduction to Machine Learning, Victor Powell and Lewis Lehe's Explained Visually project, and Ilya Katsov's post on Data Mining Problems in Retail

Code

This project was an iterative creative endeavour; we've cleaned up the code a bit, but acknowledge that it is not the prettiest thing you'll ever see. Apologies in advance for any pain caused. That said, we hope you find some bits of it useful or interesting.

The figure below illustrates the overall structure. The two most important <div> elements are the #sections and #vis elements, which play the roles described in Jim Vallandingham's description: the #sections div contains a set of <section class="step"> elements that form the text column on the left, and whose positions determine which javascript functions are called when to manipulate the visual elements in the #vis div. To these two we've added a #topics div at the far left for "story" buttons / progress indication. These three <div>s are wrapped in a #graphic <div> (not shown below to avoid clutter), in keeping with Vallandingham's structure.

structure-illustration-1

If you take a quick gander at the index.html file, you will see a lot of svg syntax. There are two <svg> elements in the file: the first one you encounter is the less important one which is only used for the introduction animation (it is a full-screen svg within the #intro-area div); the second one is the main <svg> and is within the #vis div.

The drawing elements within these <svg>s constitute almost all of the static elements within the animation (i.e. those which are only made to appear for a particular section or set of sections and then disappear again, and which are not otherwise animated) and starting points for many of the elements that are actively animated. (Some other DOM elements are added via javascript, usually those which are simpler, in multiples and actively animated.)

These svg elements were drawn primarily in Adobe Illustrator (though any such graphical program could be used so long as it supports svg saving or export) and then simply pasted into the index.html file: this certainly bloats the file and is ugly to see in an html file, but it does make for a handy iterative workflow.

The first hierarchical level within the <svg> is composed entirely of <g> elements, each with an id that corresponds to the layer name in Illustrator and which gets referenced by the javascript functions that control the animation (e.g. by turning their display property on or off for different parts of the animation). Among these id'd high-level <g> elements, there are also some empty ones, which are used as stages for js-constructed elements as the animation proceeds.

structure-illustration-1

For each <section class="step"> element in #sections (contained in index.html), there are two corresponding functions in conductor.js: an "activate" function, which is called when that section is scrolled into prominence (i.e. when the section above it reaches the top of the window); and a "progress" function, which is called for any scroll action within that section, and which uses the relative position within the section as a function parameter named progress.

These "activate" and "progress" functions reference other functions found in files the js/ tree, some of which are used in almost every section (e.g. in js/scrolling-lib/scrollerAddOn.js there is a function to smoothly highlight particular svg > g elements and turn everything else off), and some of which only apply to particular "stories" (i.e. those in the js/stories/ folder). There is also a set of multiple-use functions in js/anim-lib that are referenced by various the functions of various "stories".

It is in the js/stories/ folder that you will find most of the code that looks like more typical D3 usage. If / when we get time, we'll return to some of our favorite animations therein and produce cleaner and better documented versions of them.

Note: Jim Vallandingham has recently updated his scrollytelling code to use D3 version 4 - we used his earlier version in building this tour, but we have used his updated code in our illustrative repo here.

Have Fun!

We hope you enjoy playing with it at least half as much as we've enjoyed making it.

More Repositories

1

pyxley

Python helpers for building dashboards using Flask and React
JavaScript
2,270
star
2

hamilton

A scalable general purpose micro-framework for defining dataflows. THIS REPOSITORY HAS BEEN MOVED TO www.github.com/dagworks-inc/hamilton
Python
863
star
3

stitches

Create a Microservice in Rails with minimal ceremony
Ruby
552
star
4

nodebook

Repeatable analysis plugin for Jupyter notebook
Jupyter Notebook
261
star
5

fauxtograph

Tools for using a variational auto-encoder for latent image encoding and generation.
Jupyter Notebook
226
star
6

d3-jupyter-tutorial

JavaScript
197
star
7

flotilla-os

Open source Flotilla
Go
192
star
8

immutable-struct

Create struct-like classes that don't have setters, but have an awesome constructor.
Ruby
171
star
9

pyxleyJS

Collection of React components for dashboards
JavaScript
155
star
10

Algorithms-Notebooks

Algorithm's team Jupyter Notebooks
Jupyter Notebook
113
star
11

diamond

Python solver for mixed-effects models
Python
98
star
12

colornamer

Given a color, return a hierarchy of names.
Python
89
star
13

resque-brain

NOT MAINTAINED [ Better resque-web that can monitor multiple Resque's in one place ]
Ruby
57
star
14

hello-scrollytelling

A bare-bones version of the scrollytelling framework used in the Algorithms Tour
HTML
52
star
15

pwwka

Interact with RabbitMQ to transmit and receive messages in an easy low-configuration way.
Ruby
51
star
16

mab

Library for multi-armed bandit selection strategies, including efficient deterministic implementations of Thompson sampling and epsilon-greedy.
Go
49
star
17

NTFLib

Sparse Beta-Divergence Tensor Factorization Library
Python
47
star
18

splits

A Python library for dealing with splittable files
Python
42
star
19

context2vec

Using Word2Vec on lists and sets
Python
34
star
20

seetd

Seating optimization
Python
23
star
21

extra_extra

Manage in-app release notes for your Rails application using Markdown
Ruby
20
star
22

tech_radar

Rails engine to manage your team's own Technology Radar
Ruby
16
star
23

MomentMixedModels

A Spark/Scala package for Moment-Based Estimation For Hierarchical Models
Scala
15
star
24

stitchfix.github.io

CSS
15
star
25

merch_calendar

Calculations around the National Retail Federation's 4-5-4 calendar
Ruby
14
star
26

s3drive

S3 backed ContentsManager for jupyter notebooks
Python
13
star
27

resqutils

Handy methods, classes, and test support for applications that use Resque
Ruby
5
star
28

go-postgres-testdb

Library for managing ephemeral test databases in Postgres
Go
3
star
29

redis_ui_rails

A Rails engine for inspecting your Redis instances
Ruby
3
star
30

fittings

Fork of mc-settings, which is a “convenient way to manage ruby application settings/configuration across multiple environments”
Ruby
3
star
31

librato

Librato client library for go
Go
1
star
32

arboreal

Tree based modeling for humans
Python
1
star