Click Heatmap Density Calculator

Step-by-Step Guide

1. 1Choose a Background: Upload a screenshot, webpage mockup, or app screen, or start with a blank canvas.
2. 2Add Click Data: Click directly on the canvas, import a CSV or JSON file of coordinates, or generate random test data.
3. 3Adjust Heatmap Settings: Tune the heat radius, intensity, opacity, blur, and color palette to control the visualization.
4. 4Analyze the Statistics: Review live density statistics — hotspot and cold-zone counts, coverage percentage, and active regions.
5. 5Export Your Heatmap: Download as PNG or SVG, export the click data as CSV or JSON, or copy the statistics summary.

Key Features

• ✓Click-to-place point capture on an interactive canvas
• ✓Drag-and-drop image upload with PNG/JPG/WEBP support
• ✓CSV and JSON coordinate import with auto delimiter detection
• ✓Random test data generator with clustered, realistic distribution
• ✓Adjustable radius, intensity, opacity, and blur controls
• ✓6 color palettes — Classic, Inferno, Magma, Viridis, Plasma, Grayscale
• ✓Grid overlay and coordinate label toggles
• ✓Zoom levels from 50% to 400% with scrollable panning
• ✓Undo/redo history with keyboard shortcuts
• ✓15 live density statistics including hotspots, cold zones, and coverage
• ✓Most and least active region detection on a 3×3 grid
• ✓Export heatmap as PNG (including 2x high-resolution) or SVG
• ✓Export click data as CSV or JSON, or copy statistics as text
• ✓Auto-saves click points and settings, restored on return
• ✓Friendly error handling for invalid files and oversized images
• ✓All processing runs locally — no data leaves your browser

Pro Tips

• 💡Start with a larger heat radius on sparse datasets and a smaller one on dense datasets — this keeps individual hotspots distinct instead of merging the whole canvas into one blob.
• 💡Use the Grayscale palette when preparing a report for print, since color heatmaps often lose meaning once printed in black and white.
• 💡Enable coordinate labels only when working with a small dataset — the tool automatically hides them above 200 points to keep the canvas readable.
• 💡Use PNG 2x export for presentations and print, where a sharper image matters more than file size.
• 💡Save frequently-used click datasets as JSON so you can re-import them later instead of regenerating random data or re-clicking manually.

Common Mistakes to Avoid

• ✕Don't set intensity to maximum on a dense dataset — it saturates the color scale quickly and hides meaningful differences between hot areas.
• ✕Don't forget that Average Distance Between Clicks is estimated from a sample on datasets above 500 points, marked with an asterisk in the statistics panel.
• ✕Don't upload an image larger than 20MB — oversized files are rejected up front with a clear error message rather than silently failing.
• ✕Don't mix coordinate scales between imported datasets and the canvas — points are automatically clamped to the canvas bounds, which can distort a dataset captured at a different resolution.
• ✕Don't rely on SVG export for exact pixel-for-pixel accuracy — it recreates the heatmap using vector gradients and is best used for editable, scalable graphics rather than an exact canvas replica.