Scatter → Heatmap · binning a large [x, y, value] dataset with d3.js

Data

Dataset

Points

Binning

Grid

Cell size

Aggregate

Min points

Smoothing

Colour

Scheme

Scale

Reverse Clip 1–99%

Layers

Contours

Raw points Profiles Blend

How it works

Bin. One pass over typed arrays drops every point into a cell and accumulates count, Σv, Σv², min and max.
Aggregate. The chosen statistic becomes the cell value; cells with too few points stay empty (hatched).
Colour. A d3 sequential or diverging scale maps values to colours; d3.contours traces the isolines.
Zoom. d3.zoom re-bins the visible window from the raw points on every frame.

Loading…

1.00×

Scroll zoom & re-bin Drag pan Shift + drag box zoom Double-click zoom in Hover cell statistics Drag the colour bar to filter values