Scatter Plots

Explore relationships between two variables with scatter plots.

---

Basic Scatter Plot

Show correlation between two measurements.

View Source

type: scatter
data:
  source: '[{"height": 165, "weight": 62}, {"height": 170, "weight": 68}, {"height": 175, "weight": 75}, {"height": 180, "weight": 82}, {"height": 168, "weight": 65}, {"height": 172, "weight": 70}, {"height": 178, "weight": 78}, {"height": 182, "weight": 85}]'
x: height
y: weight
title: Height vs Weight

When to use: Finding correlations or patterns between two numeric variables.

---

Colored Scatter Plot

Group points by category.

View Source

type: scatter
data:
  source: '[{"x": 10, "y": 25, "group": "A"}, {"x": 15, "y": 32, "group": "A"}, {"x": 20, "y": 28, "group": "A"}, {"x": 12, "y": 45, "group": "B"}, {"x": 18, "y": 52, "group": "B"}, {"x": 22, "y": 48, "group": "B"}, {"x": 14, "y": 18, "group": "C"}, {"x": 19, "y": 22, "group": "C"}, {"x": 24, "y": 20, "group": "C"}]'
x: x
y: y
color: group
title: Grouped Data Points

When to use: Comparing relationships across different categories.

---

Bubble Chart

Add a third dimension with point size.

View Source

type: scatter
data:
  source: '[{"gdp": 21400, "life_exp": 78.5, "population": 331, "country": "USA"}, {"gdp": 14700, "life_exp": 76.9, "population": 1400, "country": "China"}, {"gdp": 2900, "life_exp": 69.7, "population": 1380, "country": "India"}, {"gdp": 1900, "life_exp": 72.4, "population": 273, "country": "Indonesia"}, {"gdp": 4100, "life_exp": 84.4, "population": 126, "country": "Japan"}]'
x: gdp
y: life_exp
r: population
color: country
title: GDP vs Life Expectancy (size = population)

When to use: Showing three numeric dimensions at once.

---

Connected Scatter Plot

Connect points to show sequence or time.

View Source

type: scatter
data:
  source: '[{"year": 2019, "revenue": 100, "profit": 15}, {"year": 2020, "revenue": 85, "profit": 8}, {"year": 2021, "revenue": 120, "profit": 22}, {"year": 2022, "revenue": 145, "profit": 30}, {"year": 2023, "revenue": 160, "profit": 35}]'
x: revenue
y: profit
marks:
  - type: line
  - type: dot
  - type: text
    text: year
title: Revenue vs Profit Over Time

---

Scatter with Regression Line v1.2+

Show trend line through points.

View Source

type: scatter
data:
  source: '[...]'
x: x
y: y
marks:
  - type: dot
  - type: regression
title: Data with Trend Line

---

Configuration Options

Option	Type	Default	Description
r	string/number	3	Point radius or field for bubble size
color	string	-	Field for color grouping
symbol	string	circle	Point shape
opacity	number	0.7	Point opacity (0-1)

---

Symbol Options

symbol: circle    # Default
symbol: square
symbol: triangle
symbol: diamond
symbol: cross

---

Tips

Tip: Use opacity: 0.5 when you have many overlapping points.

Common Mistake: Using scatter plots for non-numeric data. Scatter plots need numbers on both axes.

---

See Also

• Line Charts - For time series
• Bar Charts - For category comparisons