JavaScript Heatmap Visualization

An interactive heatmap experiment built with the Canvas 2D API and plain JavaScript. Move your pointer across the page (or touch a supported device) to add heat; the visualization cools, blurs, and maps that intensity to color in real time.

Live demo

Open the interactive heatmap demo.

Run locally

No build tools or package installation are required. Serve the folder with any static web server, for example:

python -m http.server 8000

Then open http://localhost:8000/Heatmap-v.99.html.

How it works

1. Pointer or touch movement heats blocks on a low-resolution buffer canvas.
2. Each animation frame cools existing values and adds heat around the current pointer position.
3. The buffer is scaled to the display canvas, blurred on the CPU, and recolored through a precomputed RGB gradient.

The result is intentionally dependency-free and designed as a compact visualization experiment rather than a production analytics library.

Project structure

Heatmap-v.99.html  Interactive canvas visualization
index.md           GitHub Pages landing page
_config.yml        GitHub Pages metadata and theme

Development notes

• The display canvas is fixed to the viewport and responds to resize events.
• Performance depends on viewport size and device CPU/GPU capabilities. The screenres and bRes values in the demo control its render resolution and block size.
• Contributions should preserve the no-dependency approach unless a change clearly requires otherwise.