Marks Reference

Observable Plot marks for creating chart layers.

---

What are Marks?

Marks are the visual elements that display your data. Each mark type represents data differently:

marks:
  - type: line        # Draw a line
  - type: dot         # Add dots at data points
  - type: text        # Add labels

---

Basic Marks

dot

Points at x,y coordinates.

marks:
  - type: dot
    x: date
    y: value
    r: 4              # Radius
    fill: category    # Fill color by field

line

Connected line through points.

marks:
  - type: line
    x: date
    y: value
    stroke: category  # Line color by field
    strokeWidth: 2

area

Filled area under a line.

marks:
  - type: area
    x: date
    y: value
    fill: "steelblue"
    opacity: 0.5

bar / barY / barX

Bars from baseline to value.

marks:
  - type: barY
    x: category
    y: value
    fill: category

rect

Rectangles with explicit bounds.

marks:
  - type: rect
    x1: start
    x2: end
    y1: 0
    y2: value

text

Text labels.

marks:
  - type: text
    x: date
    y: value
    text: label       # Field containing text
    fontSize: 12

---

Rule Marks

rule / ruleX / ruleY

Reference lines.

marks:
  - type: ruleY
    y: 50             # Horizontal line at y=50
    stroke: "red"
    strokeDasharray: "4 2"

tick / tickX / tickY

Short tick marks.

marks:
  - type: tickX
    x: date
    y: value

---

Statistical Marks

box / boxY / boxX

Box plot (quartiles and outliers).

marks:
  - type: boxY
    x: category
    y: value

regression

Linear regression line.

marks:
  - type: dot
  - type: regression
    x: x
    y: y
    stroke: "red"

---

Interactive Marks

crosshair

Show coordinates on hover.

marks:
  - type: line
  - type: crosshair

tip

Tooltip on hover.

marks:
  - type: dot
  - type: tip
    title: name

---

Special Marks

cell

Grid cells for heatmaps.

marks:
  - type: cell
    x: month
    y: day
    fill: value

waffle

Waffle chart cells.

marks:
  - type: waffle
    y: value
    fill: category

density

2D density estimation.

marks:
  - type: density
    x: longitude
    y: latitude

contour

Contour lines for density.

marks:
  - type: contour
    x: x
    y: y
    thresholds: 20

hexbin

Hexagonal binning.

marks:
  - type: hexbin
    x: x
    y: y
    fill: "count"

---

Network Marks

link

Lines connecting nodes.

marks:
  - type: link
    x1: source_x
    y1: source_y
    x2: target_x
    y2: target_y

arrow

Directional arrows.

marks:
  - type: arrow
    x1: from_x
    y1: from_y
    x2: to_x
    y2: to_y

vector

Direction and magnitude.

marks:
  - type: vector
    x: x
    y: y
    rotate: angle
    length: magnitude

---

Layout Marks

frame

Border around plot area.

marks:
  - type: frame
    stroke: "gray"

gridX / gridY

Grid lines.

marks:
  - type: gridY
    stroke: "#eee"

axisX / axisY

Custom axis configuration.

marks:
  - type: axisX
    ticks: 5
    tickFormat: ".0f"

---

Geographic Marks

geo

Geographic shapes (requires projection).

marks:
  - type: geo
    geometry: geometry
    fill: value

sphere

Globe background.

marks:
  - type: sphere
    fill: "lightblue"

graticule

Latitude/longitude grid.

marks:
  - type: graticule
    stroke: "#ddd"

---

Mark Options

Common options available on most marks:

Option	Type	Description
x, y	string	Position channels
x1, x2, y1, y2	string	Range bounds
fill	string/color	Fill color
stroke	string/color	Stroke color
strokeWidth	number	Line thickness
strokeDasharray	string	Dash pattern
opacity	number	Transparency (0-1)
r	number/string	Radius (dots)
rotate	number/string	Rotation angle
fontSize	number	Text size
fontWeight	string	Text weight
text	string	Text field
title	string	Tooltip text
filter	function	Data filter
sort	object	Sort order

---

Combining Marks

Layer multiple marks for rich visualizations:

marks:
  # Background area
  - type: areaY
    x: date
    y: value
    fill: "steelblue"
    opacity: 0.2

  # Main line
  - type: line
    x: date
    y: value
    stroke: "steelblue"
    strokeWidth: 2

  # Data points
  - type: dot
    x: date
    y: value
    fill: "steelblue"
    r: 3

  # Reference line
  - type: ruleY
    y: 50
    stroke: "red"
    strokeDasharray: "4 2"

  # Crosshair interaction
  - type: crosshair

---

See Also

• YAML Schema - Complete configuration
• Scales Reference - Color and axis scales
• Chart Gallery - Visual examples