Line charts that show income growth

A line chart is a very common way of visualizing linear data (for example, time-based data). For our discussion on line charts, we're going to create a chart that shows the increase in income in the US over the last 30 years. We'll show this data indexed to a specific year and the absolute growth. We'll use the following two datasets:

1. Unadjusted dollars: https://fred.stlouisfed.org/series/MEHOINUSA646N
2. Adjusted dollars: https://fred.stlouisfed.org/series/MEHOINUSA672N

These datasets are based on the US Census data, but have already been cleaned up. We can use the adjusted dollars to show the relative increase in income, and the unadjusted to show the absolute growth in income:

So, while it might seem that people are getting richer, at this point we're basically at the level of 1996, and in no way back before the 2008 crisis. At the top right, you can download the data in CSV format. When downloaded, we can use this data directly since it's in a very basic format:

DATE,MEHOINUSA672N 
1984-01-01,48664 
1985-01-01,49574 
1986-01-01,51329 
1987-01-01,51973 
1988-01-01,52372 
1989-01-01,53306

Now that we've got our data, let's look at the line graph that we'll create. The final chart that we'll create looks like this:

In this line chart (which you can see for yourself by opening http://localhost:8080/src/chapter-02/D02-02.html), you can see a line that shows the indexed income, and the absolute index. When you move your mouse over the chart, it will show the value of both graphs and highlight the exact value.

First, let's look at the different steps we need to take to accomplish this:

1. The first thing we need to do is load the data and set up the relevant D3 scales.
2. Next, we'll add the indexed line and the gradient area beneath it.
3. After that, we'll add the normal income line.
4. We've got multiple axes in this line chart. We add these next.
5. And finally, we add the mouse tracker, which highlights a specific data point.

For this chart, we'll skip the default setup of the margin and the basic chart, since we've already done that a couple of times. We'll start directly with how to load the data.