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
- "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


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
viSFest bl.ock submissions and the functions they use

10. tweety
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 😍
silly & datavizzy
By Shirley Wu
silly & datavizzy
- 5,232