silly && #datavizzy

a portfolio of side projects

shirley wu

1994: received first art set

2004-2008: took way too many math & science classes

2008: went to college, decided to major in business out of misplaced sense of rebellion

I love art, numbers, and code

Spring 2011: took first official CS class and it was love

Summer 2011: banking internship = holy crap no thanks

Summer 2012: started full-time as software developer, used side projects to augment lack of formal CS training

1. lammy

surprise birthday planning website

October 2012 | D3+Node
link to code

  • first fully finished side project
  • "learned" node, express, mongoose
  • no input validation
  • no understanding of database design
  • but really proud of it anyways

2. Checking in ponies

simple checkin visualization for d3 meetups

Fall 2013 | Backbone+D3

link to code and Ian's show & tell

  • @enjalot tricked me into it, but good things came out of it
  • learned to use d3.svg.arc and svg clip-path
  • working with constraints: ipad vs. laptop performance, and slow/lack of internet connection

3.  80k

annual salary and cost of living of BART employees

October 2013 | Backbone+D3

link to code and viz

  • "if they make 80k, why are they striking?" → 80k is their overall income, including benefits
  • concept: let visitor explore and form opinion for themselves
  • important lesson: 30% of visitors on mobile, couldn't access information hidden in hover interaction
  • first time working with a fixed dataset, significant impact

4. yolanda

path of Typhoon Haiyan told in Instagram images

Winter 2013 | Backbone+D3+Geo

link to code

  • wanted to map donation info, did Instagram pictures instead (credit: @milr0c)
  • unexpected learning: even in tragedy, there is beauty and hope
  • used an API to get data for the first time!
  • geo is hard, don't use svg to draw the country it ruins performance

*due to Instagram and Facebook changing their image hosting, all of the image links are broken 😞

5. Wongfu

collaboration between youtube channels, first attempt

Spring 2014 | Backbone+D3

link to v1 & v3 code, and show & tell video

  • inspired by a session at d3unconf 2014 about visualizations in mobile
  • limit interactions to scrolling and clicking

6. octokitty

relationship between github developers and their repos

Fall 2014 | Backbone+D3+Rails

link to code

  • Third Annual Github Data Challenge  
  • wanted to learn Ruby on Rails
  • threading and locking is hard
  • realized I knew nothing about developing a backend
  • too much data crammed into one screen, can't get any insight from it

7. expenses

simple expense tracking app

Spring 2015 | React+D3+Flux

link to code, app, and blog post

  • wanted to showcase approach for d3, react, flux beyond a Todo app
  • v2 with sleeker interface and Redux

8. wongfu again

Summer 2015 | React+D3

link to code, and React+D3 approach

  • wanted to try a different approach for React and D3
  • animate svg path on scroll
  • play sounds on scroll :D

collaboration between youtube channels, second attempt

9. visfest

October 2015 | D3

link to code, and viz

  • saw all the raw data for the blocks and knew had to play with it
  • used blockbuilder for the first time → changed how I work on side projects, quicker iterations, faster releases

viSFest bl.ock submissions and the functions they use

10. tweety

Winter 2015 | React+D3

link to code, and viz

  • inspired by @kosamari's Image Processing talk at @wafflejs
  • wanted to learn how to interact with and animate with canvas
  • apparently first time using fisheye
  • also apparently people really like dots

a portrait of tweets


  • versioning is kind of important 😱
  • documentation is kind of really important 😨
  • projects I finished asked clear questions from the beginning
  • incredible how much I've learned over the years by just doing side projects

Thank you 😍

silly & datavizzy

By Shirley Wu

silly & datavizzy

  • 4,788