Heatmaps

Heatmaps are powerful visualization tools that represent data density and patterns through color gradients. In this post, we’ll explore different types of heatmaps and build interactive demos to understand their implementation.

What is a Heatmap?

A heatmap is a data visualization technique that represents the magnitude of values as colors in a two-dimensional space. Originally developed for displaying temperature distributions (hence the name), heatmaps have evolved into a versatile tool for visualizing any type of spatial data density, from website user interactions to gene expression patterns.

At its core, a heatmap transforms numerical data into a visual representation where:

• Position represents the location or category of data points
• Color represents the intensity, frequency, or magnitude of values
• Gradients show smooth transitions between data regions

How Computers Draw Heatmaps

Creating heatmaps involves several computational steps that transform raw data points into colored pixels on screen:

1. Data Collection and Preprocessing

First, we collect spatial data points, typically as (x, y) coordinates with optional values. These points might represent:

• User clicks on a webpage
• Geographic locations with measurements
• Time-series data mapped to 2D space

2. Density Calculation

The computer calculates how “dense” or “intense” the data is at each pixel location using various algorithms:

• Binning/Histogram: Dividing the space into grid cells and counting points
• Kernel Density Estimation: Calculating smooth probability densities using mathematical kernels
• Interpolation: Creating continuous surfaces between known data points

3. Color Mapping

Once we have density values, we map them to colors:

// Example: Linear color interpolation
function densityToColor(value, min, max) {
  const normalized = (value - min) / (max - min);
  // Interpolate from blue (cold) to red (hot)
  const r = Math.floor(255 * normalized);
  const b = Math.floor(255 * (1 - normalized));
  return `rgb(${r}, 0, ${b})`;
}

4. Rendering

Finally, the colored pixels are drawn to a canvas or SVG element:

// Canvas rendering example
for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    const density = densityGrid[y][x];
    const color = densityToColor(density, minDensity, maxDensity);
    ctx.fillStyle = color;
    ctx.fillRect(x, y, 1, 1);
  }
}

Interactive Heatmap Demos

Let’s explore three different approaches to creating heatmaps, starting from the simplest algorithm and progressing to more sophisticated techniques.

Demo 1: Grid Binning Heatmap (Histogram-style)

Grid binning is the most fundamental technique for creating heatmaps. It’s simple, fast, and perfect for understanding the basics of spatial data visualization.

Key Concepts:

• 2D Binning: Dividing space into rectangular cells
• Data Aggregation: Counting points per bin
• Color Mapping: Converting counts to colors
• Normalization: Scaling values for consistent visualization

Try it out:

• Click anywhere on the canvas to add individual points
• Use the animation feature to see real-time updates
• Adjust the bin size to change the resolution
• Toggle between linear and logarithmic color scaling

Demo 2: Gaussian Kernel Density Estimation (KDE)

Kernel Density Estimation produces smooth, continuous heatmaps by applying a mathematical kernel function (typically Gaussian) to each data point. This creates a probability density surface that’s both mathematically rigorous and visually appealing.

Key Concepts:

• Gaussian Kernel: Each point contributes a smooth “bell curve” of influence
• Kernel Radius: Controls how far each point’s influence extends
• Density Summation: Overlapping kernels add together to create hot spots
• Continuous Surface: Unlike binning, KDE produces smooth gradients

Performance Optimizations:

• TypedArrays: Using Float32Array for efficient density calculations
• Spatial Culling: Only calculate within bounding boxes of points
• Render Modes: Choose between accuracy and performance
• Offscreen Canvas: Pre-render for smoother interactions

Try the features:

• Adjust kernel radius to see wider or narrower influence areas
• Toggle “Show Kernels” to visualize individual kernel boundaries
• Switch between Quality (accurate KDE) and Performance (fast approximation) modes
• Experiment with different color schemes for various visual effects

Demo 3: Radial Basis Function (RBF) Interpolation

RBF interpolation is an advanced technique that creates smooth surfaces passing exactly through your data points. Unlike the previous methods, RBF solves a system of linear equations to find the optimal interpolation weights, ensuring the surface matches your data precisely.

Key Concepts:

• Exact Interpolation: The surface passes through all data points exactly
• RBF Kernels: Different mathematical functions (Gaussian, Multiquadric, etc.) for different smoothness
• Linear Algebra: Solves Ax = b to find interpolation weights
• Shape Parameter (ε): Controls the “width” of influence for each point

Mathematical Foundation: The interpolated value at any point is computed as:

$f(x,y) = \sum_{i=1}^{n} w_i \cdot \varphi(\|p - p_i\|)$

Where $w_i$ are the weights, $\varphi$ is the RBF kernel, and $\|p - p_i\|$ is the distance to data point $i$.

Try the demo:

• Click to add data points with values (based on position)
• Watch the surface update in real-time
• Try different RBF kernels for varying smoothness
• Adjust the shape parameter to control interpolation behavior
• Explore different color maps for visualization

Summary

We’ve explored three increasingly sophisticated approaches to creating heatmaps:

1. Grid Binning: Simple, fast, and perfect for density visualization
2. KDE: Smooth probability surfaces with Gaussian kernels
3. RBF Interpolation: Advanced technique for exact surface fitting

Each method has its strengths and ideal use cases. Grid binning excels at showing data density, KDE creates beautiful smooth visualizations, and RBF interpolation is perfect when you need a surface that exactly matches your data points.

The mathematical complexity increases from simple counting (binning) to kernel convolution (KDE) to solving linear systems (RBF), but each technique opens up new possibilities for data visualization and analysis.