Colors with a Linear Scale

Let’s add some color to the heatmap. At the moment, the rectangles are all the same color. We are going to be using a scale to calculate the color of the rectangle. This is where things can get tricky. Our dataset contains values between $0 and $300,000. How do we assign a color to an income?

Luckily, most scales in D3 are capable of working with colors. It is common practice to need to assign a color to a shape based on a value. The developers of D3 have developed scales to work with colors. This includes the linear scale. Let’s use the linear scale to paint the rectangles.

Adjusting the draw() function

Before we do, we are going to adjust the draw function. The heatmap will be drawn multiple times with different scales. This will allow us to compare the different scales on how they handle colors. We need to be able to tell the draw() function which scale it should use. We will add a parameter for the type of scale to use. In the draw() function’s parameters, we will add a second parameter called scale.