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

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

learnings

• 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 😍