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.

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

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

Creating our wrapper and bounds elements.

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

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

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

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

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

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.

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

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

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

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

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.

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!

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

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

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

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

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.

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.

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.

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

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

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

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

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

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

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.

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

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

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

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

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

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

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.

To ease into our drawing data step, let's start by adding a circle that shows what temperatures are below 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.

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

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.

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

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.

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.

A quick debrief! Congrats on making it through!

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

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

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

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

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.

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

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.

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

We take a naive approach to creating an Axis component

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

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

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

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

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.

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!

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.

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.

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.