We dig in right away, starting with a timeline of temperature over time. First, we need to get our bearings.

Making Your First Chart

First things first, we learn how to load our dataset and look at the structure.

Loading the weather dataset

We learn how to set up our chart - accessor functions are crucial for easy changes, documentation, and framing.

Setting up our line chart

To set up our chart environment, we learn why we need two containers: wrapper and bounds.

Drawing our chart

We create our wrapper and learn about d3 selection objects.

Creating our workspace

We learn how to create new elements inside of a d3 selection object.

Adding an SVG element

We create our bounding box, and shift it to respect our margins.

Creating our bounding box

We learn about scales and create our first ones: our y and x scales.

Creating our scales

We learn about path SVG elements and how to construct a string for their d attribute.

Drawing the line

We learn how to create axes and transform them into position.

Drawing the axes

Let's consolidate what we just learned with an exercise to play with this week.

Week 1: Exercise

Datasets

We dive into making a slightly more complex chart: a scatter plot. In this lesson, we talk about why you would create a scatter plot and its basic anatomy.

Making a Scatterplot

We solidify our foundation by splitting our chart-creating code into seven general steps.

Steps in drawing any chart

We talk through our first step: accessing our data.

Step 1: Access data

The second step: creating chart dimensions. This time, we learn how to create a square chart that fits within any browser window.

Step 2: Create chart dimensions

The third step: drawing our canvas. We create our wrapper & bounds, then shift them to respect our margins.

Step 3: Draw canvas

The fourth step: creating our scales. We talk about scales in more depth, and learn about d3.extent() & .nice().

Step 4: Create scales

The fifth step: drawing our data. This is an important lesson! We talk about data joins, which are one of the trickiest parts of d3, and necessary for updating our charts & binding our visualization to data.

Step 5: Draw data

Our sixth step: drawing peripherals. We draw our axes, learn about the text SVG element, and how to add (and rotate) labels.

Step 6: Draw peripherals

Our hard work completed, we sit back and talk about what insights our chart can teach us.

Looking at our chart

We learn how to create a custom color scale, then we color our circles based on another metric: cloud cover.

Extra credit: adding a color scale

Week 2: Exercise

Next, we embark on a mission to create a slightly more complex chart: a bar chart. We talk about what we can learn from a bar chart, and what a histogram is.

Making a Bar Chart

Next, we grab our data and create our accessor function (only one this time!)

Access data

A hopefully familiar step by now: creating our chart dimensions.

Create dimensions

Creating our wrapper and bounds elements.

Draw canvas

We create our scales, but first, we learn how to split our data into equally-sized bins.

Create scales

We finally get to draw our bars! We draw them in groups, so we can position them as well as labels.

Draw data

We draw a label over each bar, showing the number of points within that bin.

Adding Labels

We draw a line depicting the mean of our distribution, as well as our axes.

Draw peripherals

We talk about how to generalize our code, and change it so that we draw multiple histograms for different metrics.

Extra credit

This is a great lesson, and one that's hard to find good content on. We talk about the ways to make our charts accessible to screen readers, and walk through changing our histogram.

Accessibility

Week 3: Exercise

We talk about the different ways we can animate changes in our charts, and rule out SVG <animate>.

Animations and Transitions

We learn about CSS transitions and the different CSS transition properties, then run through a concrete example and look at how to debug them.

CSS transitions

We add CSS transitions to our histogram, animating changes as the bars change.

CSS transitions with a chart

We learn about d3.transition, and talk about when we would use it instead of CSS transitions. We then update our histogram to animate using d3.transition.

d3.transition

We talk through a more complex example: animating our line chart when it gets new data. This is trickier than it might seem at first!

Lines

Week 4: Exercise

Let's start talking about adding interactions to our charts!

Interactions

We learn how to add interaction event listeners using our d3 selection objects, then run through a concrete example.

d3 events

We can't let our event listeners hang around forever - we learn how to clean up after ourselves and cancel old ones.

Destroying d3 event listeners

We add a tooltip to our histogram. This involves creating a tooltip, updating its contents to show information about the hovered bar, and moving above the hovered bar.

Bar chart

We add a tooltip to our scatter plot. Along the way, we learn about d3.timeFormat and learn a great trick for making our tooltips feel smoother, using voronoi.

Scatter plot

Lastly, we add a tooltip to our timeline. We talk about how to add a listener rectangle, d3.leastIndex(), and how to add a dot to mark our place.

Line chart

Week 5: Exercise

It's really important that we understand the fundamentals of data visualization design, and what kind of chart to create.

Data Visualization Basics

We talk about the different types of data: the main buckets of qualitative and quantitative metrics, and their sub-categorizations.

Types of data

We talk about the different ways to visualize a single metric, and how to combine that with the different data types.

Ways to visualize a metric

We talk through a few tips & tricks that I use when designing charts.

Chart design

We run through a full redesign of a chart, learning about the motivation and implementation of each change.

Example redesign

Choosing colors is one of the hardest parts of designing a data visualization! We talk about the three main types of color scales, and related functions that are built into d3.

Color scales

We learn how to create our own custom color scales and specify their color space.

Custom color scales

We learn about three color spaces (rgb, hsl, and hcl) and the pros and cons of each.

Color spaces

We talk about a few tips & tricks for choosing effective, accessible colors for our data visualizations.

Color tips

Week 6: Exercise

Let's dive into a complicated data visualization: a circular chart showing overall weather for the whole year

Radar Weather Chart

We're going to breeze through the first four steps: accessing our data, creating our dimensions, drawing our canvas, and creating our scales.

Getting set up

We're going to skip step 5 and use step 6 to get our feet wet with angular math. We'll draw angular grid lines for each month, circular grid lines for temperature, and label both axes.

Adding gridlines

To ease into our drawing data step, let's start by adding a circle that shows what temperatures are below freezing.

Adding freezing

We create a radial area shape, bounded by the min and max temperatures for each day. Then we create a gradient and use it to color our area.

Adding the temperature area

We add marks to show which days are above a certain UV index threshold.

Adding the UV index marks

Next, we'll add our ring of circles around the outside to represent the amount of cloud cover for each day. We'll also learn something really important about visualizing data using circles.

Adding the cloud cover bubbles

Next, we learn about ordinal scales and create the inner ring of circles to show the precipitation probability and type for each day.

Adding the precipitation bubbles

We'll add annotations to our chart to tell our viewer what the different parts of the chart are showing. To do this, we'll create a generic function, since there are so many things to label.

Adding annotations

Onto our last step: adding interactions! The tooltip we'll build will be unlike any you've seen before - it will follow the mouse all the way around our chart, highlight the relevant data elements, and describe the weather for that hovered date.

Adding the tooltip

A quick debrief! Congrats on making it through!

Wrapping up

Week 7: Exercise

Advanced example

We'll talk about the best way to incorporate d3 when using a javascript framework like React, Svelte, or Angular.

D3 + Javascript Frameworks

We are introduced to React.js and learn a basic principle for combining d3 + React.

React.js

We walk through the structure of our React application, then dive into the first step of our chart drawing checklist: accessing our data

Digging in

Creating dimensions in React can be really easy! We use a custom hook for watching the size of our wrapper and automatically calculating the dimensions of our bounds.

Creating dimensions in React

We create our wrapper and bounds within our Chart component to prevent from having to repeat ourselves for every chart we create.

Drawing our canvas in React

Next, we need to create our scales. We also create scaled accessor functions to pass to the children of our Timeline, so they don't need to know about our scales.

Creating our scales in React

Next, we fill out our Line component for a flexible way to draw our data.

Drawing our data in React

We take a naive approach to creating an Axis component

Drawing our peripherals in React

We learn an alternate, less hacky solution for creating an Axis component that lets React do all of the rendering.

Drawing our peripherals in React, take two

We wrap up by talking about how to add interactions and look at the completed code for a Timeline, Scatter plot, and Histogram.

Setting up interactions in React, and wrapping up

We take a look at how to combine d3 + Angular, with a complete codebase.

Using d3 with Angular.js

We take a look at how to combine d3 + Svelte.js, with a complete codebase.

Using d3 with Svelte.js

Coming soon! Interviews with amazing experts in the data visualization field. You'll learn about how different people get into data visualization, what most excites them, and their tips & tricks.

Interviews

Shirley and I talk about her job title, how she got into data visualization, how working in industry is different than working as a freelancer, and her new book!

Shirley Wu

Ian and I talk about his long history of building up the d3.js community, his day-to-day working at Observable, and the value of breaking projects down into small pieces.

Ian Johnson

Russell Goldenberg talks to us about what it's like working at the Pudding, his journey from Comp Sci to creative computation, and drops some great tips for working on data viz projects.

Russell Goldenberg

Will Chase talks us through how he got into data viz, the difference between work and freelance projects, and walks us through his most recent, wonderful visualization of hurricane names.

Will Chase

Charts communicate ideas with simplicity, clarity, and detail.

Once you're comfortable with D3 you can quickly:

* understand key metrics at a glance
* catch anomalies (before they turn into problems)
* give key insights to your customers
* and impress your boss and co-workers

Today, I will show you the exact methods I use to create beautiful, understandable data visualizations using D3.

The Fullstack D3 masterclass is the complete guide to D3. With dozens of code examples showing each step, you will gain new insights into your data by creating visualizations in this self-paced online course.

Fullstack D3 Masterclass

How to create any visualization you can imagine

So today we're talking to Russell Goldenberg, he's a Senior Journalist Engineer with me at The Pudding, creating data-driven essays. If you haven't heard of The Pudding, you should definitely check them out at pudding.cool. We make essays with data viz on really interesting topics.
Yeah, I'd love to hear a little bit about how you got into the field, Russell.

I'll give you a medium version of the story because I can talk too long sometimes, but basically my journey was I started out in computer science, so kind of a very traditional Comp Sci track in undergrad. Decided that it was a little bit too technical and conceptual for me in a lot of ways, once I got to the more advanced concepts. I happened to be taking some classes in visual arts with some more kind of programming explorations and stumbled upon the programming language Processing when it was in its alpha phase. That kind of keyed me into this other side of programming and doing more visually driven things and creative things.
And I was much more into that. So that kind of changed my career trajectory into this field of... I called it like creative coding or like computational art. So I was very much following in the footsteps of people like Casey Reas, and other people doing artwork and installation work with computer programming.
That landed me at a job at the Engagement Lab at Emerson college, where I was doing a mixture of front-end game development for civic engagement. And also doing, basically, these games where we create them for communities and about social issues, but then we get a lot of data from it.
And so that's when I started actually playing around with presenting that data, having like no background in data visualization. So I was still kind of applying this visual art-way of looking at data. And then, really, I didn't get into the true field of data visualization or data journalism until I went to Open Viz Conf and I saw a reporter from the Boston Globe, Gabriel Florit. He spoke about basically how hard it was to do data viz on mobile, and it was a really interesting talk because realized this whole other challenge space of presenting information. So, yeah, I guess that's when I officially entered into data journalism and visualization.
I applied for a job at the globe after seeing that. And that's where it began for me.
So it was kind of a meandering path, just like that story just felt.

Oh, that's interesting. I'd like to hear the long version, but, that's definitely an interesting path. How do you think your day-to-day is different than if you had kept on with the typical Computer Science career path?

I feel like I much more likely would have ended up in like a software development firm or shop. I didn't even take any classes related to web development. And my Computer Science track is very much like a... there's like one elective about it. So it wasn't even on my mind of doing anything on the web.
And again, graphical programming was not something that was big in the undergraduate courses during the time, I feel like it's very different now. The landscape of opportunity in the college world and obviously any type of online learning. So I felt like, yeah, I think the path was really narrow, so I've probably wouldn't have ended up doing anything remotely similar to what I'm doing now.

And what does your day-to-day look like? Like how much do you spend coding or, doing art-like things.

I'd say about half my day is spent actually programming. I spend a fair bit of time just doing a lot of research and like around... so as you mentioned, we tell like all sorts of data-driven stories at The Pudding.
The one I'm working on now, I'm looking at the usage of the word "Oreo" in crossword puzzles and why it's so common and kind of contextualizing that because  there's a big corpus of crossword puzzle data that I've been playing with. So a lot of it is just kind of really steeping myself in this domain that I have no expertise in.
I'm a very immature crossword puzzle player, but I don't know a lot about crossword puzzle construction. So a lot of it is just doing background research, sometimes, reaching out to experts and interviewing them. And then, yeah, the other half is doing a lot of programming, putting together mock ups, writing the narrative for stories, and kind of, it's just a whole hodgepodge of kind of creative madness, I guess.
I like to think that I could spend more than half of my time coding, but it ends up being a lot of obvious stuff than just coding.

Yeah. Half the time, that's a lot, though!

We should all do time tracking. One thing I think a lot of people run into that's hard when they start doing data viz is... if you get this new dataset, it's going to be in this field that you know nothing about. and you're going to have to really quickly learn about: the context and the field and everything that has to do with that data set, like crossword symbols. Do you have any tricks for doing that? And you usually want to do it quickly because you don't want to spend too much time just doing that research.

Yeah. I think one of my self-pointed rules is: do it before I really get too far into the data, because I feel like once you start playing with data or even exploring it, not even visualizing it, you start to have assumptions about... and things that, you're like... "Okay, I now know what this thing is about." but like you, might've kind of conceived it wrong all along if you didn't understand why that was the case.
So I like to try to understand the context of the data before I even jump into it too much. I guess that's one thing. I feel like another is... I definitely will pause whenever I've noticed anything that's slightly amiss, so when I was doing this Oreo thing, I was like, "Oh cool! The first time they used Oreo as a brand was in 1993, even though we had data going back to the forties." So, pretty much, never accepting something, and figuring out why that's the case rather than just accepting it and moving on.
I think just constantly questioning what you see because I very suddenly... and that's the only, just like talking about the context of understanding of the data set. I feel like lots of times, more often than not, the thing I'll find is actually an issue with how the data it was collected or put together.
So I think just not having... not trusting the data you see, either, is probably the biggest thing for me, too.

---
title: "Russell Goldenberg"
description: "Russell Goldenberg talks to us about what it's like working at the Pudding, his journey from Comp Sci to creative computation, and drops some great tips for working on data viz projects."
useMdx: true
privateVideoUrl: https://fullstack.wistia.com/medias/ru7j0g584v
---

# Russell Goldenberg

## Links

[The Pudding](https://pudding.cool/)
[website](http://russellgoldenberg.com/)
[@codenberg](https://twitter.com/codenberg)

## Transcript

**Amelia**:
[00:00:00]

So today we're talking to Russell Goldenberg, he's a Senior Journalist Engineer with me at The Pudding, creating data-driven essays. If you haven't heard of The Pudding, you should definitely check them out at pudding.cool. We make essays with data viz on really interesting topics.
Yeah, I'd love to hear a little bit about how you got into the field, Russell.

**Russell**:
[00:00:26]

I'll give you a medium version of the story because I can talk too long sometimes, but basically my journey was I started out in computer science, so kind of a very traditional Comp Sci track in undergrad. Decided that it was a little bit too technical and conceptual for me in a lot of ways, once I got to the more advanced concepts. I happened to be taking some classes in visual arts with some more kind of programming explorations and stumbled upon the programming language Processing when it was in its alpha phase. That kind of keyed me into this other side of programming and doing more visually driven things and creative things.
And I was much more into that. So that kind of changed my career trajectory into this field of... I called it like creative coding or like computational art. So I was very much following in the footsteps of people like Casey Reas, and other people doing artwork and installation work with computer programming.
That landed me at a job at the Engagement Lab at Emerson college, where I was doing a mixture of front-end game development for civic engagement. And also doing, basically, these games where we create them for communities and about social issues, but then we get a lot of data from it.
And so that's when I started actually playing around with presenting that data, having like no background in data visualization. So I was still kind of applying this visual art-way of looking at data. And then, really, I didn't get into the true field of data visualization or data journalism until I went to Open Viz Conf and I saw a reporter from the Boston Globe, Gabriel Florit. He spoke about basically how hard it was to do data viz on mobile, and it was a really interesting talk because realized this whole other challenge space of presenting information. So, yeah, I guess that's when I officially entered into data journalism and visualization.
I applied for a job at the globe after seeing that. And that's where it began for me.
So it was kind of a meandering path, just like that story just felt.

**Amelia**:
[00:02:52]

Oh, that's interesting. I'd like to hear the long version, but, that's definitely an interesting path. How do you think your day-to-day is different than if you had kept on with the typical Computer Science career path?

**Russell**:
[00:03:13]

I feel like I much more likely would have ended up in like a software development firm or shop. I didn't even take any classes related to web development. And my Computer Science track is very much like a... there's like one elective about it. So it wasn't even on my mind of doing anything on the web.
And again, graphical programming was not something that was big in the undergraduate courses during the time, I feel like it's very different now. The landscape of opportunity in the college world and obviously any type of online learning. So I felt like, yeah, I think the path was really narrow, so I've probably wouldn't have ended up doing anything remotely similar to what I'm doing now.

**Amelia**:
[00:03:57]

And what does your day-to-day look like? Like how much do you spend coding or, doing art-like things.

**Russell**:
[00:04:05]

I'd say about half my day is spent actually programming. I spend a fair bit of time just doing a lot of research and like around... so as you mentioned, we tell like all sorts of data-driven stories at The Pudding.
The one I'm working on now, I'm looking at the usage of the word "Oreo" in crossword puzzles and why it's so common and kind of contextualizing that because  there's a big corpus of crossword puzzle data that I've been playing with. So a lot of it is just kind of really steeping myself in this domain that I have no expertise in.
I'm a very immature crossword puzzle player, but I don't know a lot about crossword puzzle construction. So a lot of it is just doing background research, sometimes, reaching out to experts and interviewing them. And then, yeah, the other half is doing a lot of programming, putting together mock ups, writing the narrative for stories, and kind of, it's just a whole hodgepodge of kind of creative madness, I guess.
I like to think that I could spend more than half of my time coding, but it ends up being a lot of obvious stuff than just coding.

**Amelia**:
[00:05:16]

Yeah. Half the time, that's a lot, though!

**Russell**:
[00:05:19]

Who knows if that's accurate.

**Amelia**:
[00:05:21]

We should all do time tracking. One thing I think a lot of people run into that's hard when they start doing data viz is... if you get this new dataset, it's going to be in this field that you know nothing about. and you're going to have to really quickly learn about: the context and the field and everything that has to do with that data set, like crossword symbols. Do you have any tricks for doing that? And you usually want to do it quickly because you don't want to spend too much time just doing that research.

Amelia Wattenberger

So today we're talking to Russell Goldenberg.

He's a senior journalist engineer with me at the Pudding,

you should definitely check them out at Pudding.cool.

We make essays with data viz on really interesting topics.

Yeah, I'd love to hear a little bit about

- I'll give you a medium version of the story

But basically, my journey was I started out in computer science,

so kind of a very traditional comp side track in undergrad.

Decided that it was a little bit too technical and conceptual for me

in a lot of ways once I got to the more advanced concepts.

Happened to be taking some classes in like visual arts

and stumbled upon the programming language processing

And that kind of keyed me into this other side of programming

and doing more visually driven things and creative things.

So that kind of changed my career trajectory into this field.

I called it like creative coding or like kind of computational art.

So I was very much following in the footsteps of people like Casey Rees

and other people doing kind of artwork and installation work

And that landed me at a job at the engagement lab at Emerson College

where I was kind of doing a mixture of front end game development