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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2123224/tumblr_m0u9h5wDYx1rrevd7o1_500.jpg)
I love art, numbers, and code
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2126604/tumblr_m0u9jm2yze1rrevd7o1_500.jpg)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2430379/pasted-from-clipboard.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2122713/lammy.gif)
2. Checking in ponies
simple checkin visualization for d3 meetups
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2116992/checkin.gif)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2117044/80k.gif)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2127632/yolanda.gif)
*due to Instagram and Facebook changing their image hosting, all of the image links are broken 😞
5. Wongfu
collaboration between youtube channels, first attempt
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2123026/Screen_Shot_2014-03-16_at_10.11.25_PM.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2123149/wongfu_v1_2.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2123151/wongfu_v3_2.gif)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2123134/Screen_Shot_2014-09-07_at_10.57.32_PM.png)
7. expenses
simple expense tracking app
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2123184/add.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2123188/drag.gif)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2123300/wongfu2.gif)
9. visfest
viSFest bl.ock submissions and the functions they use
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2126535/visfest.gif)
10. tweety
a portrait of tweets
![](https://s3.amazonaws.com/media-p.slid.es/uploads/415741/images/2126546/tweety.gif)
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,236