Shirley Wu

sxywu.com
@sxywu
Shirley Wu is an award-winning creative focused on data-driven art and visualizations. She has worked with clients such as Google, The Guardian, SFMOMA, and NBC Universal to develop custom, highly interactive data visualizations. She combines her love of art, math, and code into colorful, compelling narratives that push the boundaries of the web.
Workshop
WORKSHOP: Creative Data Visualizations with SVG and D3.js

MONDAY, JUNE 8th • 9:00AM • WALKER ART CENTER



D3.js is the most powerful tool for creating data visualizations on the web because of the amount of control and flexibility it gives. Yet we often hear that it has a learning curve, and could be intimidating. Similarly, having a good understanding of SVG paths is really powerful for creating any shape in the browser, but the path commands are hardly human friendly. This workshop will introduce these concepts in a fun, intuitive way and participants will go home feeling empowered to design and code their own data visualization projects from scratch!



OVERVIEW

In this workshop, we will go through the entire process of creating a custom data visualization from scratch. We will learn how to create any shape we want with SVG paths, and translate our data into those shapes with D3.js. We will cover the core fundamentals of D3.js, including selection, data-binding, the enter-update-exit pattern, and scales. We will learn all this while turning movies data into fun, beautiful flowers, like in this project: film flowers. Finally, we will use D3.js transitions to animate the flowers, and force simulation to position them!



SKILL LEVEL: Intro



WORKSHOP OUTLINE:
- SVG paths, with an emphasis on the cubic bezier curve to design a custom flower petal
- D3.js fundamentals to create a flower (selection, data binding, enter-update-exit).
- D3.js scales to translate movie data.
- Render all film flowers to the screen!
- D3.js transitions to animate the flowers in.
- D3.js force layout to cluster and position flowers by their movie genres.


WHAT TO BRING:
• Laptop

• Colored pens or pencils & paper



SOFTWARE TO HAVE INSTALLED:
• A modern browser (Chrome or Firefox) and a Github account.



GOOD TO BE FAMILIAR WITH:
• Basic data knowledge (JSON, CSV)
• Basic Javascript and coding knowledge (arrays, objects, map/filter/reduce, callback functions).



REGISTRATION FEE: $315
MATERIALS FEE: None