intro-to-d3-nicar-2020
Bring your data to life with elegant and intelligent visualizations with the D3 JavaScript library. We'll start with some Scalable Vector Graphics (SVG) basics and learn what makes the D3 library so powerful, then use real-world datasets to build your first D3 chart. We will build on D3 basics by exploring more complex chart forms, covering functions for fetching and manipulating data, and introducing transitions and interaction. We will write working code together, break down how some of our favorite examples of D3 charts work and practice reading documentation so you can gain expertise on your own.
Prerequisites: Attendees should have some knowledge of HTML/CSS and JavaScript. Previous D3 experience is not required.
-
Intro - Darla
- What is D3? (not a charting library) What is it good for and when should you use it? (sparingly, things that need lots of updates)
- What is an SVG, and what is the best way to get one onto your site or in the paper? (crowbar + ai2html)
-
Start coding- Darla
- Quick refresher on JS data types frequently seen in d3
- numbers, strings, boolean
- arrays
- objects
- objects inside arrays
- Use D3 to draw some non-SVG chart-like elements on the page
- First time we'll present the concept, let them work for 10 minutes, then solve together
-
Getting data- John
- Fetching data
- Manipulating data
-
Make your first chart- John
- A more complex chart
-
Transitions and interaction (John)
- A bit of this plus coolest features of v5 (and pitfalls if you have used earlier versions)
- What's next? Our favorite resources and how to make this useful at home.