OneTaskBy Tim King · Updated
Contour Plot Maker
2D Density Chart from x,y Points, Download SVG or PNG Free
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Contour Plot Maker works
This contour plot maker draws density lines over points. A contour plot draws lines of equal density over a cloud of points, the way a map draws lines of equal height over a hillside, so the peaks where observations pile up and the valleys between them are obvious at a glance. It is the two-dimensional cousin of the smoothed curve in a violin plot. Paste two columns of numbers, choose filled bands or outlines, and download the chart as SVG or PNG. Nothing is uploaded.
Contour plot maker: what to paste
Two numeric columns, x then y, one point per row, separated by commas or tabs. A header row becomes the axis labels when present and is skipped otherwise. Rows missing either value are dropped. The estimate needs a reasonable number of points to be meaningful; a few dozen give a rough shape, a few hundred a good one.
How the density is estimated
Every point is replaced by a small round Gaussian bump and the bumps are summed on a fine grid across the plot, giving a smooth surface whose height at any spot is how crowded the data is there. Contour lines are then traced at evenly spaced heights, using the marching squares algorithm, and each band between two lines is filled with a colour from the scale. Smoothing sets the width of the bumps: Narrow follows the data closely and can show several small peaks, Wide merges them into broad hills. Levels sets how many contour heights are drawn; more levels give finer gradation but a busier chart. The lowest level is skipped so the empty parts of the plot stay white.
Style and colour
Filled paints each band, darkest at the peak, which reads well on screen and in slides. Lines only draws the contours as coloured outlines with nothing inside, the better choice when the plot will be overlaid on something else or when the points are shown and should stay visible. The six colour scales are the same perceptual ramps used across the chart makers, from the colour-blind-safe Viridis to single-hue Blues, Greens and Reds. Data points overlays every observation as a small dot so readers can see what the smooth surface is built from.
Reading the chart
Concentric rings mark a peak; the innermost ring is the most typical combination of x and y. Two separate sets of rings mean two clusters. Elongated rings sloping one way mean the two variables are correlated in that direction. Rings that are round mean roughly equal spread in both. The stats panel gives the point count, the number of levels actually drawn, the centre of the densest region and the plain mean of the points, which differ when the data is skewed.
Exporting
Download SVG gives a vector file with one path per contour band and editable text. Download PNG renders at one, two or three times the preview width. Copy SVG puts the markup on the clipboard.
FAQ
Contour, hexbin or scatter?
A scatter plot shows individual points and is right for small sets. A hexbin counts points in cells and is honest about exactly where data is and is not. A contour plot smooths those counts into a continuous surface, which is the clearest picture of shape but can invent gentle slopes in places with little data; showing the points alongside guards against that.
Why do the contours run off the edge?
The density surface is estimated across the whole plot area, so a cluster near an edge produces bands that are clipped there. The plot area already extends ten percent beyond the data on each side; if a cluster still touches the edge, choose Narrow smoothing.
Can I plot a measured third value as height?
No; the height here is always point density. Data that already has a z value at each x,y is a different job, and if it sits on a regular grid the heatmap maker will plot it directly.
The plot looks like one big blob
Smoothing is too wide for the spread of the data, or the levels are too few. Try Narrow and 15 or 20 levels; if it is still a single hill, the data really does have one mode.
See also: all Chart Makers tools, Images, Audio, Video & Screen, PDF, SVG, Simulations & Screensavers, Generative Art, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
Hexbin Plot Maker
Paste x,y points, get a hexagon density plot; download SVG or PNG.
Scatter Plot Maker
Paste x,y pairs, get a scatter plot with trend line and r value.
Heatmap Maker
Paste a labelled table, get a colour-coded heatmap grid; download SVG or PNG.
Violin Plot Maker
Paste groups of numbers, get a violin plot per group; download SVG or PNG.
SVG To PNG
Rasterise an SVG to a PNG at any width.