Scatter Plot Design
A recipe for building clean, interactive scatter plots that reveal relationships between two numeric variables without overwhelming the viewer.
1. Data Structure
Each point needs an x and y value. Optionally include a category for color grouping and a radius for bubble charts.
2. Axis Scaling
Compute the domain from your data. Add 5% padding so points never touch the edges. Use linear scales unless your data spans orders of magnitude — then switch to log.
3. Color Palette
For categorical grouping, use distinct hues with equal perceptual weight. For continuous values, interpolate between #8B5CF6 and #F472B6.
4. Opacity & Overplotting
Set fill opacity to 0.6–0.8. When thousands of points overlap, reduce radius and drop opacity to 0.3 so density becomes visible through accumulated alpha blending.
5. Tooltips
Show exact values on hover. Keep tooltips minimal: x label, y label, and category name. Position above the point with a small offset to avoid occlusion.
6. Grid & Ticks
Use subtle horizontal grid lines only — vertical grids add noise. Tick labels should be short; format large numbers with SI suffixes (K, M) to keep the axis readable.
Pro tip
Always render a regression line or LOESS curve when the relationship is the story. Without it, viewers see noise instead of signal.