Learning how to visualize data well, is complicated and covers many wide-ranging topics: using d3.js to manipulate data, using SVG to “draw” in the browser, designing an effective visualization, to only name a few.

In this workshop, Amelia can help you by distilling what she’s learned in the last decade of visualizing data in the browser, and give you the tools you need to explore your own data!

Who Is This For?

If you have experience developing websites using HTML, CSS and basic JavaScript, and want to build interactive, custom data visualizations, come join us! You’ll walk away with a great foundation and process to tackle your own data.

What will attendees learn in this workshop?

• How to code with d3.js — d3.js is a massive library that can be overwhelming at first. We’ll learn how it works, one step at a time.
• How to “draw” in the browser with SVG — once you learn to use SVG, you’ll find uses for it everywhere! It’s a very flexible way to create custom, crisp shapes in the browser.
• How to combine d3.js & Svelte.js — most d3.js code examples are using imperative code that manipulates the DOM imperatively. Using a JavaScript framework lets us work declaratively: describing what we want, and leaving how exactly to build it up to the framework. We’ll be using Svelte.js, which has a very shallow learning curve and can scale up to be very powerful.
• 7 basic steps for creating any chart — breaking the process into discrete steps lets us learn each part in isolation and gives you a checklist to use when working on your own.
• Animation, Transition and Interaction — When we update our charts, we can animate elements from their old to their new positions. These animations can be visually exciting, but more importantly, they have functional benefits. The biggest advantage of creating charts with JavaScript is the ability to respond to user input.
• How to design custom data visualizations — creating good data visualizations isn’t only about the how — what and why are just as important.
• A great process to go from “I have data” to polished data visualization — Amelia will walk you through her own process, starting with a new dataset.

About Amelia Wattenberger

Amelia Wattenberger is a Principal Engineer prototyping our way to future developer experiences at GitHub Next. She has lived at the intersection of web development, design, and data visualization for the past decade, and is the author of Fullstack D3 and Data Visualization.

Time & Schedule

This workshop is split over five days. Our virtual doors open at 8:45, we start at 9 AM PT.

The workshop sessions will run on the following days:

• Tue, July 4, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Wed, July 5, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Tue, July 11, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Wed, July 12, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Tue, July 18, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

Day 1: D3.js, Svelte and SVG basics

8:45 am PT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am

• Introduction to Svelte and D3.js. What does it do and how do you get started? We’ll learn how it works, one step at a time.
• We’ll take an in-depth look at how SVG’s are build up, so we can learn how to animate them properly.

11:00 am – 11:30 am
Q&A with Amelia on the day’s material. Networking!

Day 2: Drawing with Data

8:45 am PT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am

• In this session, we’ll look at the different types of visualizations, which works best for which dataset, and how you pick the one that works best?
• We’ll create our own scatterplot and line-chart visualization.

11:00 am – 11:30 am
Q&A with Amelia on the day’s material. Networking!

Day 3: Animations and Interactions

8:45 am PT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am

• Today we’ll learn how to animate elements from their old to their new positions.
• Next we’ll show how to make animations visually exciting, and give them functional benefits.
• We’ll explore how visualizations can respond to user input.

11:00 am – 11:30 am
Q&A with Amelia on the day’s material. Networking!

Day 4: Data Viz Design

8:45 am PT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am

• Today we’ll go into how to create the best designs for your visualizations. We’ll start with how to go from a data set to a data visualization
• We’ll go over some basic rules-of-thumb, and how to pick the right colors
• In case you get stuck, some tips & tricks how to find inspiration
• And finally we’ll run through a chart makeover together

11:00 am – 11:30 am
Q&A with Amelia on the day’s material. Networking!

Day 5: Learn and Build Session

8:45 am PT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am

• The final workshop day we’ll do a step-by-step build a data visualization together, using your own data.
• If you’re proud of what you’ve made, present it!

11:00 am – 11:30 am
Q&A with Amelia on the day’s material. Networking!