Heatmaps: Patterns in 2D Data

Heatmaps use color intensity to represent values across a grid. They're perfect for spotting patterns in data that has two categorical dimensions - like finding the busiest times for food delivery orders.

When to Use Heatmaps

Heatmaps excel at showing:

• Patterns across two dimensions: Hour vs Day, Category vs Region
• Density distributions: Where are values concentrated?
• Correlation matrices: How do multiple variables relate?
• Calendar patterns: Activity by day/month over years

They're NOT ideal for:

• Precise value comparisons (hard to read exact colors)
• Single-dimension data (use bar charts)
• Trend analysis (use line charts)

Try It: Order Density Heatmap

Explore when QuickBite customers order the most. The heatmap shows order volume by day of week and hour of day:

Reading Heatmap Patterns

In the QuickBite heatmap above, you can observe:

Temporal Patterns

• Lunch Rush: 12-1 PM shows high intensity across all days
• Dinner Peak: 7-8 PM is the busiest time, especially weekends
• Afternoon Lull: 2-5 PM shows lighter colors

Day-of-Week Patterns

• Friday Evening: Higher than other weekday evenings
• Weekend Brunch: Saturday/Sunday mornings are busier
• Sunday Dinner: Strong family dinner ordering pattern

Choosing Color Scales

Sequential Scales

Single color from light to dark. Best for data that goes from low to high.

• Use for: Order counts, revenue, ratings

Diverging Scales

Two colors meeting at a neutral center. Best when there's a meaningful midpoint.

• Use for: Above/below average, positive/negative change

Categorical Scales

Distinct colors for distinct categories.

• Use for: Segmentation maps, cluster visualization

Building Heatmaps with Canvas

Heatmaps are typically built with raw Canvas or SVG since Chart.js doesn't natively support them:

function drawCell(ctx, x, y, width, height, value, maxValue) {
  // Calculate color intensity
  const ratio = value / maxValue;
  const r = Math.round(240 - ratio * 227);
  const g = Math.round(253 - ratio * 105);
  const b = Math.round(250 - ratio * 114);

  ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
  ctx.fillRect(x, y, width, height);
}

// Draw grid
for (let row = 0; row < data.length; row++) {
  for (let col = 0; col < data[row].length; col++) {
    drawCell(ctx, col * cellWidth, row * cellHeight,
             cellWidth, cellHeight, data[row][col], maxValue);
  }
}

Heatmap Best Practices

1. Include a Legend

Always show the color scale so viewers can interpret values.

2. Order Axes Meaningfully

• Temporal data: chronological order
• Categories: by size, alphabetically, or logical grouping

3. Handle Missing Data

Use a distinct color (gray) for missing values - don't leave blank.

4. Consider Accessibility

• Don't rely on color alone - offer value labels option
• Use colorblind-friendly palettes when possible

5. Limit Grid Size

Very large grids (50x50+) become hard to read. Aggregate if needed.

Common Applications

Key Takeaways

• Heatmaps visualize numeric values across two categorical dimensions
• Color intensity represents magnitude - darker = higher
• Choose sequential scales for low-to-high data
• Use diverging scales when there's a meaningful midpoint
• Always include a legend and consider value labels for precision
• Great for spotting temporal patterns and correlations

Next, we'll explore geographical maps for visualizing location-based data.