Project

📍 Our Objective

In this lesson, our goal is to recreate a famous heatmap that illustrates the impact of vaccination on measles infection rates.

This heatmap includes several great features:

• Clear, intuitive color scale
• Legend
• Tooltip
• Hover effect

The Data

The dataset is straightforward!

It’s an array where each item represents a cell. The x value is the year, mapped to the X-axis. The y value is the US state, mapped to the Y-axis. Finally, the value is used to determine the cell color.

const data = [
  {
    x: 1928,
    y: "Alaska",
    value: null
  },
  {
    x: 1928,
    y: "Ala.",
    value: 334.9621212
  },

You can find the complete js object here.

Get full data

Good Luck!

Here are a few helpful hints

🌈 Color scale

The color scale is not straightforward. It is built like below. See the power of scaleLinear? it can interpolate between several colors in an array.

const COLORS = [
  "#e7f0fa",
  "#c9e2f6",
  "#95cbee",
  "#0099dc",
  "#4ab04a",
  "#ffd73e",
  "#eec73a",
  "#e29421",
  "#e29421",
  "#f05336",
  "#ce472e",
];

const THRESHOLDS = [
  0, 0.01, 0.02, 0.03, 0.09, 0.1, 0.15, 0.25, 0.4, 0.5, 1,
];


const colorScale = d3
  .scaleLinear<string>()
  .domain(THRESHOLDS.map((t) => t * max))
  .range(COLORS);
      

🦄 Color legend

Take a few seconds to think about how you would build it. Also, did you notice that a little arrow appears on the legend when a cell is hovered over?

Once you have a good idea, read and use the code of the legend componenthere.

Legend Component

📏 Scales

x and y scales are band scales made with scaleBand()

Solution