Symbol Channel Examples

This page demonstrates the use of the symbol channel in Observable Plot to differentiate data points by shape.

Basic Symbol Channel

Using different symbols to distinguish species in the iris dataset:

View Source

data:
  source: [
    { "sepal_length": 5.1, "sepal_width": 3.5, "species": "setosa" },
    { "sepal_length": 4.9, "sepal_width": 3.0, "species": "setosa" },
    { "sepal_length": 4.7, "sepal_width": 3.2, "species": "setosa" },
    { "sepal_length": 7.0, "sepal_width": 3.2, "species": "versicolor" },
    { "sepal_length": 6.4, "sepal_width": 3.2, "species": "versicolor" },
    { "sepal_length": 6.9, "sepal_width": 3.1, "species": "versicolor" },
    { "sepal_length": 6.3, "sepal_width": 3.3, "species": "virginica" },
    { "sepal_length": 5.8, "sepal_width": 2.7, "species": "virginica" },
    { "sepal_length": 7.1, "sepal_width": 3.0, "species": "virginica" }
  ]
type: dot
x: sepal_length
y: sepal_width
symbol: species
fill: steelblue
r: 5
width: 600
height: 400
title: Iris Measurements by Species (Symbol Channel)

Symbol with Color Channel

Combining symbols and colors for multi-dimensional data:

View Source

data:
  source: [
    { "x": 1, "y": 10, "category": "A", "region": "North" },
    { "x": 2, "y": 15, "category": "B", "region": "North" },
    { "x": 3, "y": 20, "category": "C", "region": "North" },
    { "x": 4, "y": 12, "category": "A", "region": "South" },
    { "x": 5, "y": 18, "category": "B", "region": "South" },
    { "x": 6, "y": 22, "category": "C", "region": "South" },
    { "x": 7, "y": 14, "category": "A", "region": "East" },
    { "x": 8, "y": 16, "category": "B", "region": "East" },
    { "x": 9, "y": 24, "category": "C", "region": "East" }
  ]
type: dot
x: x
y: y
symbol: category
fill: region
r: 6
width: 600
height: 400
title: Multi-dimensional Data (Symbol + Color)

Symbol with Size Channel

Combining symbols, colors, and sizes:

View Source

data:
  source: [
    { "x": 1, "y": 10, "type": "A", "region": "North", "value": 100 },
    { "x": 2, "y": 15, "type": "B", "region": "North", "value": 200 },
    { "x": 3, "y": 20, "type": "C", "region": "North", "value": 150 },
    { "x": 4, "y": 12, "type": "A", "region": "South", "value": 180 },
    { "x": 5, "y": 18, "type": "B", "region": "South", "value": 220 },
    { "x": 6, "y": 22, "type": "C", "region": "South", "value": 160 },
    { "x": 7, "y": 14, "type": "A", "region": "East", "value": 140 },
    { "x": 8, "y": 16, "type": "B", "region": "East", "value": 190 },
    { "x": 9, "y": 24, "type": "C", "region": "East", "value": 250 }
  ]
type: dot
x: x
y: y
symbol: type
fill: region
r: value
width: 600
height: 400
title: Three Channels (Symbol + Color + Size)
scales:
  r:
    range: [3, 15]

Constant Symbol

Using a fixed symbol shape for all data points:

View Source

data:
  source: [
    { "x": 1, "y": 10, "category": "A" },
    { "x": 2, "y": 15, "category": "B" },
    { "x": 3, "y": 20, "category": "C" },
    { "x": 4, "y": 12, "category": "A" },
    { "x": 5, "y": 18, "category": "B" },
    { "x": 6, "y": 22, "category": "C" }
  ]
type: dot
x: x
y: y
symbol: triangle
fill: category
r: 6
width: 600
height: 400
title: All Points as Triangles

Multiple Marks with Symbols

Combining different mark types with symbol channels:

View Source

data:
  source: [
    { "x": 1, "y": 10, "group": "Observed", "trend": 10.5 },
    { "x": 2, "y": 15, "group": "Observed", "trend": 13.0 },
    { "x": 3, "y": 20, "group": "Observed", "trend": 15.5 },
    { "x": 4, "y": 12, "group": "Predicted", "trend": 18.0 },
    { "x": 5, "y": 18, "group": "Predicted", "trend": 20.5 },
    { "x": 6, "y": 22, "group": "Predicted", "trend": 23.0 }
  ]
type: composite
width: 600
height: 400
title: Observed vs Predicted with Trend Line
marks:
  - type: line
    configuration:
      x: x
      y: trend
      stroke: "#666"
      strokeWidth: 2
      strokeDasharray: "4 2"
  - type: dot
    configuration:
      x: x
      y: y
      symbol: group
      fill: group
      r: 7

Available Symbol Shapes

The default symbol sequence includes: circle, square, diamond, triangle, cross, and star.

View Source

data:
  source: [
    { "shape": "circle", "x": 1, "y": 1 },
    { "shape": "square", "x": 2, "y": 1 },
    { "shape": "diamond", "x": 3, "y": 1 },
    { "shape": "triangle", "x": 4, "y": 1 },
    { "shape": "cross", "x": 5, "y": 1 },
    { "shape": "star", "x": 6, "y": 1 }
  ]
type: dot
x: x
y: y
symbol: shape
fill: steelblue
r: 10
width: 700
height: 200
title: Available Symbol Shapes

Tips for Using Symbols

1. Use with color: Symbols work best when combined with colors for maximum distinction
2. Size matters: Make symbols large enough (r >= 5) to be clearly distinguishable
3. Limit categories: Use symbols for 2-6 categories for best clarity
4. Accessibility: Symbols improve accessibility by providing shape distinction in addition to color
5. Constant values: You can use constant symbol values like 'triangle' for all points

Configuration Notes

• The symbol channel can reference a data field or be a constant value
• Symbols automatically scale when using the r (radius) channel
• Combine with fill or stroke channels for maximum visual distinction
• Legends are automatically generated when using data-driven symbols