This workshop has already been published as a course!
Introduction to d3.js, v2
By coding along with us in the Workshop, you'll:
- Learn how to navigate the D3 API reference, and the bl.ocks ecosystem
- Understand selections and how they work under the hood
- Get your hands on data binding and how that works with the enter-update-exit pattern
- Experience building a full chart with scales, axis, and legends
- Gain an understanding of D3 layouts, in particular hierarchy or force layout
Your (Awesome) Instructor
Spend A Full Day Immersed in D3.js with Shirley Wu
We'll start by looking at the D3 documentation, which is vast and very thorough, but could be overwhelming to navigate. I'll point out how the docs are structured, and also explore the bl.ocks and blockbuilder ecosystems and how to use them to our advantage. After that, we'll dive right into the code, starting with how D3 selections and data binding work under the hood. After we have a good grasp of those concepts, we'll use enter-append to create our first no-frills bar chart. We'll learn scales and axes to annotate our previous chart, then learn update/merge and exit-remove to transition the chart between different data states. Finally, we'll go beyond the bar chart and learn how to create trees and network diagrams with D3's hierarchy and force layouts.
We've already held over 300 workshops with thousands of attendees in-person and online. In this time we've discovered ways to schedule the day, so it goes smoothly and efficiently. Regardless if you're in-person or participating with us online you'll have the full ability to replay things you missed, get your questions answered LIVE and interact with the teacher throughout the day.
- 11:30AMTech Check and Hello
- 12:00PMIntro: D3 API reference, bl.ocks ecosystem
- 12:30PMSelections and data binding
- 2:00PMScales and axes
- 2:30PMColors and shapes
- 11:30AMUpdate and exit
- 2:00PMHierarchy and force layouts
- 2:30PMMore D3 modules to explore
Interact with the Instructor
Is This Workshop for Me?
This workshop is for those that are new to D3.js, or have tweaked the example bl.ocks but haven't yet made their own visualizations from scratch. The goal is to gain an intuitive understanding of D3's core concepts and how they work under the hood, as to equip the participant with the tools to explore and learn the rest of the library on their own. To that end, this workshop isn't meant to be a comprehensive introduction to the whole D3 library, but rather a deep dive into specific core modules.
2 Full Day Workshop Sessions
Replay Videos (available immediately)
August 11 to 12, 2020 - 11:30am to 3:00pm Central Daylight Time
Attend online on our full HD live stream