Data Visualization Masterclass

Amelia Wattenberger

Your instructor: Amelia Wattenberger

Workshop includes:

Unfortunately, this workshop is fully sold out! To be notified when we run the workshop again, please join the waiting list below:

Workshop, 5×2h + Q&A • Thu & Fri, Apr 21 – May 5 2022
09:00 – 11:30 AM PT • 18:00 – 20:30 CET • Check your time zone ⏰

Have you been ogling the beautiful interactive data visualizations on news sites like the New York Times? Do you need to code up charts to make data tangible for a website or dashboard?

There’s data about everything these days, and being able to craft it into a story is a real superpower. In this workshop, Amelia will give you all the tools you need to build your own stunning data vizualizations!

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.

$450 ^.00Register for this workshop →5 × 2h live sessions + Q&A. Apr 21 – May 5.
With all video recordings & slides. Get a ticket.

🎪 Save up to 25% on this workshop with a Smashing Membership.

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 Staff 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:

Thu, April 21, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Fri, April 22, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Thu, April 28, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Fri, April 29, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
Thu, May 5, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

$450 ^.00Register for this workshop →5 × 2h live sessions + Q&A. Apr 21 – May 5.
With all video recordings & slides. Get a ticket.

🎪 Save up to 25% on this workshop with a Smashing Membership.