Grid Heat Map

A grid heat map visualizes a two-dimensional array of values by mapping each value into a color and composing colored cells into a two-dimensional grid.

Interface

Let's implement the following function:

def grid_heat_map(values: list[list[float]], width: float, height: float) -> Graphic:

The parameters have the following meaning:

• values -- a rectangular matrix of numbers
• width -- the width of the overall visualization
• height -- the width of the overall visualization

You can call the function like this:

data = [
    [0.5, 1.0, 0.9],
    [0.4, 1.1, 0.5],
]
show_graphic(grid_heat_map(data, 150, 100))

This will produce the following heat map:

Decomposition

A grid heat map is a two-dimensional grid of cells, where each cell is a colored rectangle. Cells can be grouped into rows, and then the rows can be stacked above each other. Alternatively, cells can be grouped into columns, and the columns can be placed beside each other.

Implementation

Now let's develop a function that can compose a heat map given a matrix of numeric values.

Map Value to Color

To draw the heat map, we need to map from numeric values to colors. We can use the hsv_color function for that.

For example, we can pick a fixed hue (e.g., 0.0, red) and a fixed saturation (e.g., 1.0, fully saturated), and then map a numeric value from our matrix into a value (the v of hsv, which corresponds to the amount of light) from 0.0 to 1.0. A value of 1.0 corresponds to a fully saturated red, and a value of 0.0 corresponds to black.

Assume that the matrix can contain arbitrarily large positive values. To map any matrix value into a value in the range from 0.0 to 1.0, we need to find the maximum value, and then divide the values by the maximum.

When you run the above code cell, it should output the number 4.

You should see three circles, the top one colored black, the middle one in 50% lit red, and the bottom one in 100% lit red.

Render the Heat Map

Now that you can map from values to colors, let's compose the complete heat map.

You should see a 3-column, 2-row matrix of more or less red cells. The bottom-middle cell should be the brightest.

What You Learned

You learned how to map values into colors and how to compose a grid heat map from colored rectangles.

Would you prefer a different hue? How about picking blue (a hue of 240 degrees)? Or maybe you prefer to represent cells with circles instead of rectangles? Try it out! You have complete freedom to compose the visualization the way you prefer! Of course not every visualization is equally effective; you want to focus on clearly communicating your data, not on looking fancy without purpose. So, using circles, well, that might not be the best idea.