silly && #datavizzy

@shirleyxywu

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