Colors with a Linear Scale
Explore how to use D3.js linear scales to transform numerical data into color gradients, creating heatmaps that visually represent variations within datasets. Learn to implement and adjust the draw function, apply color scales for continuous data, and understand limitations in readability and data interpretation.
We'll cover the following...
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.
In addition, we have updated the call to the draw() function to pass in a string that says linear. The scale ...