Building an SVG Box Plot by Hand
A box plot summarizes a distribution using a box spanning the interquartile range with whiskers extending to the extremes.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
The Five Statistics a Box Plot Encodes
Building a box plot starts with computing five values from the data: the minimum, first quartile, median, third quartile, and maximum, which respectively determine the lower whisker end, box bottom, median line, box top, and upper whisker end.
- The first and third quartiles determine the box's bottom and top edges
- The median renders as a line drawn across the box's interior
- Whiskers extend from the box edges to the minimum and maximum values
Rendering the Box, Whiskers, and Outliers
The box itself is a single rect element, the median and whisker caps are line elements, and any outliers beyond the whisker range render as individual circle elements, making the whole plot a small handful of primitive SVG shapes positioned by scaled statistics.
- The interquartile box renders as a single rect element
- Median, whiskers, and caps render as line elements
- Outliers beyond the whisker range render as individual circles
Frequently Asked Questions
What do the box edges in a box plot represent?
The box spans from the first quartile to the third quartile, so it contains the middle fifty percent of the data — the interquartile range.
How should outliers be shown on a box plot?
Points beyond the whisker range are typically drawn as individual circle elements, keeping them visible without stretching the whiskers to accommodate extreme values.
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