Building an SVG Scatter Plot by Hand
A scatter plot is a set of circle elements whose cx and cy come from scaling data values into pixel coordinates.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Scaling Data Values into Pixel Coordinates
The core of any hand-built chart is a scale function that maps a data value from its domain, the minimum and maximum in the dataset, to a pixel range within the chart area, and a scatter plot applies one such scale to the x values and another to the y values.
- A scale function maps a data domain onto a pixel output range
- One scale handles x values while a separate scale handles y values
- This mapping is the fundamental building block of every hand-coded chart
Remembering the Inverted Y Axis
SVG's y coordinate increases downward while charts conventionally show larger values higher up, so the y scale must invert its output range, mapping the data minimum to the bottom pixel coordinate and the maximum to the top, a detail that trips up most first attempts.
- SVG y coordinates increase downward, opposite to chart convention
- The y scale must map the data minimum to the larger pixel coordinate
- Forgetting this inversion produces an upside-down chart on first attempt
Frequently Asked Questions
Why does my hand-coded scatter plot appear upside down?
SVG's y axis increases downward while charts show larger values upward, so the y scale must invert its range to map the data maximum to the top of the chart area.
What element should represent each scatter plot point?
Circle elements are the most common choice, with cx and cy set from the scaled data coordinates and r controlling the point's visual size.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG