Complex Data Visualizations

In these bonus chapters, we'll combine everything we've learned into three complex data visualizations. These walkthroughs will not be as in depth as the previous chapters — instead, they are meant to show you how to build on your new knowledge.

We'll take a higher-level look at each chart — what are the motivations, and what are the tricky code bits that crop up when making them. When you take your new skills and set out to make your own complicated, awesome data visualizations, you'll run into new challenges that we haven't covered here.

But fear not! You'll be able to use your solid foundation that we've built in this book to tackle those new puzzles. Let's get a sneak peak of how to approach these puzzles in the road ahead.

First, we'll focus on enhancing a chart we've already made: our scatter plot. This chart will have multiple goals, all exploring the daily temperature ranges in our weather dataset:

• do most days have a similar range in temperatures? Or do colder days vary less than warmer days?

• did we have any anomalous days? Were both the minimum and maximum temperatures anomalous, or just one?

• how do the temperatures change throughout the year?

As you can see, more complicated charts have the ability to answer multiple questions — we just need to make sure that they're focused enough to answer them well.

To help answer these questions, we'll add two main components to our scatter plot:

• a color scale that shows when the day falls in the year

• one histogram on the x axis to show the distribution of minimum temperatures and one histogram on the y axis to show the distribution of maximum temperatures

To start, we can use the scatter plot code that we've already created. Let's start up our server in the terminal (live-server, if that's your preference) and navigate to the url http://localhost:8080/10-marginal-histogram/draft/. We can see our old scatter plot friend, this time with the minimum daily temperature on the x axis and maximum daily temperature on the y axis.

As usual, this code lives in the /code/10-marginal-histogram/draft/ folder. You have two options in this chapter:

1. Follow along with the code examples and try to fill the missing code gaps. We won't go over every line of code in this chapter, but the completed code is available at /code/10-marginal-histogram/completed/ if you need a reference.

2. Read through each example to follow the journey, then dive into the code and try to re-create the chart, using the /completed/ folder as a reference.

The choice is yours, but make sure to choose whichever option will increase your confidence in your skills so you can launch into your own crazy custom data visualizations after.

Let's go through each of the enhancements of the final chart.

Chart bounds background#

Let's start with an easy one — we can see that the final chart bounds have a white background. This lighter background serves two purposes:

1. to help the reader focus on the chart, and

2. to clarify the edges of the x and y axis range.

Since our bounds are rectangular, this will be as simple as creating a new <rect> element with a white fill. Our main concern here is to draw our <rect> early on in our chart code to make sure it doesn't cover any other chart elements.

First, we'll create the <rect>:

const boundsBackground = bounds.append("rect")

We'll set the <rect>'s fill in our CSS file, to keep our static styles out of the way of the general chart logic.

.bounds-background {

Equal domains#

Next, we'll notice that in our completed chart, our x and y scales have the same domain — they both run from 0 to 100 degrees (at least in the New York City data). This is to keep the frame of reference the same on both axes, so readers can more easily compare minimum and maximum temperatures.

If we draw a diagonal line from the bottom left of our bounds to the top right of our bounds, we can see the general range of temperatures in a day by looking at how far the dots are to the left (or to the top) of this line.

To find the smallest minimum temperature and the largest maximum temperature, we can find the extent of a new array of minimum and maximum values.

const temperaturesExtent = d3.extent([

Sometimes it's easier to hand d3 a new array with multiple values per data point than to create several variables and choose the smallest and largest ones.

We can then use temperaturesExtent as the domain for both of our axes: xScale and yScale.

We could have used the same scale for both of our axes, since our xScale and yScale have the same domain and range, but it's also nice to keep them separate to be more explicit and to be prepared for future changes.

Color those dots#

Next up, we'll make a more drastic change — we can see that the dots in our completed chart are colored based on their date.

We don't already have a way to access the date of a data point, so we'll scroll to the top of our scatter.js file and add a colorAccessor.

To remind yourselves of the data structure, it's often a good idea to temporarily add a console.table(dataset[0]) line right after we retrieve our dataset.

const colorAccessor = d => parseDate(d.date)

Hmm, what if our dataset spans multiple years? We want to show the time of year, not the absolute date. Let's normalize our dates to all be in a specific year — that way we can color them according to their month and day, without taking the year into account.

  const colorAccessor = d => parseDate(d.date).setYear(colorScaleYear)

Great! Now we need to create a scale to convert our date objects into colors. We'll want to place this in our Create Scales section, probably after the other two, more basic, scales.