Complete Mark Showcase - All Supported Visualizations

This comprehensive guide showcases all supported Observable Plot mark types in the DataGlass plugin. Each example uses exactly 50 data points with embedded JSON and demonstrates both single-mark and multi-mark compositions.

---

Table of Contents

1. Point and Dot Marks
2. Line Marks
3. Area Marks
4. Bar Marks
5. Rectangle Marks
6. Text and Label Marks
7. Rule Marks
8. Tick Marks
9. Link Marks
10. Vector Marks
11. Cell Marks (Heatmaps)
12. Statistical Marks
13. Multi-Mark Compositions

---

Point and Dot Marks

Basic Scatter Plot with Dots

Simple scatter plot showing relationship between two variables.

View Source

data:
  source: [
    {"x": 1, "y": 23}, {"x": 2, "y": 27}, {"x": 3, "y": 25}, {"x": 4, "y": 31}, {"x": 5, "y": 35},
    {"x": 6, "y": 33}, {"x": 7, "y": 38}, {"x": 8, "y": 42}, {"x": 9, "y": 40}, {"x": 10, "y": 45},
    {"x": 11, "y": 48}, {"x": 12, "y": 46}, {"x": 13, "y": 52}, {"x": 14, "y": 55}, {"x": 15, "y": 53},
    {"x": 16, "y": 58}, {"x": 17, "y": 62}, {"x": 18, "y": 60}, {"x": 19, "y": 65}, {"x": 20, "y": 68},
    {"x": 21, "y": 66}, {"x": 22, "y": 72}, {"x": 23, "y": 75}, {"x": 24, "y": 73}, {"x": 25, "y": 78},
    {"x": 26, "y": 82}, {"x": 27, "y": 80}, {"x": 28, "y": 85}, {"x": 29, "y": 88}, {"x": 30, "y": 86},
    {"x": 31, "y": 92}, {"x": 32, "y": 95}, {"x": 33, "y": 93}, {"x": 34, "y": 98}, {"x": 35, "y": 102},
    {"x": 36, "y": 100}, {"x": 37, "y": 105}, {"x": 38, "y": 108}, {"x": 39, "y": 106}, {"x": 40, "y": 112},
    {"x": 41, "y": 115}, {"x": 42, "y": 113}, {"x": 43, "y": 118}, {"x": 44, "y": 122}, {"x": 45, "y": 120},
    {"x": 46, "y": 125}, {"x": 47, "y": 128}, {"x": 48, "y": 126}, {"x": 49, "y": 132}, {"x": 50, "y": 135}
  ]
type: scatter
engine: plot
title: Basic Dot Mark Scatter Plot
width: 600
height: 400
marks:
  - type: dot
    configuration:
      x: x
      y: y
      fill: "#3498db"
      r: 5
      tip: true
x:
  label: X Values
y:
  label: Y Values
grid: true

Colored Dots by Category

Scatter plot with color encoding for categorical data.

View Source

data:
  source: [
    {"x": 12, "y": 45, "category": "A"}, {"x": 18, "y": 52, "category": "A"}, {"x": 22, "y": 48, "category": "A"},
    {"x": 28, "y": 55, "category": "A"}, {"x": 32, "y": 51, "category": "A"}, {"x": 38, "y": 58, "category": "A"},
    {"x": 42, "y": 54, "category": "A"}, {"x": 48, "y": 61, "category": "A"}, {"x": 52, "y": 57, "category": "A"},
    {"x": 58, "y": 64, "category": "A"}, {"x": 62, "y": 60, "category": "A"}, {"x": 68, "y": 67, "category": "A"},
    {"x": 72, "y": 63, "category": "A"},
    {"x": 15, "y": 65, "category": "B"}, {"x": 20, "y": 72, "category": "B"}, {"x": 25, "y": 68, "category": "B"},
    {"x": 30, "y": 75, "category": "B"}, {"x": 35, "y": 71, "category": "B"}, {"x": 40, "y": 78, "category": "B"},
    {"x": 45, "y": 74, "category": "B"}, {"x": 50, "y": 81, "category": "B"}, {"x": 55, "y": 77, "category": "B"},
    {"x": 60, "y": 84, "category": "B"}, {"x": 65, "y": 80, "category": "B"}, {"x": 70, "y": 87, "category": "B"},
    {"x": 75, "y": 83, "category": "B"},
    {"x": 10, "y": 35, "category": "C"}, {"x": 16, "y": 42, "category": "C"}, {"x": 24, "y": 38, "category": "C"},
    {"x": 31, "y": 45, "category": "C"}, {"x": 36, "y": 41, "category": "C"}, {"x": 44, "y": 48, "category": "C"},
    {"x": 50, "y": 44, "category": "C"}, {"x": 56, "y": 51, "category": "C"}, {"x": 63, "y": 47, "category": "C"},
    {"x": 69, "y": 54, "category": "C"}, {"x": 74, "y": 50, "category": "C"}, {"x": 80, "y": 57, "category": "C"},
    {"x": 85, "y": 53, "category": "C"},
    {"x": 8, "y": 28, "category": "D"}, {"x": 14, "y": 35, "category": "D"}, {"x": 21, "y": 31, "category": "D"},
    {"x": 27, "y": 38, "category": "D"}, {"x": 33, "y": 34, "category": "D"}, {"x": 39, "y": 41, "category": "D"},
    {"x": 46, "y": 37, "category": "D"}, {"x": 53, "y": 44, "category": "D"}, {"x": 59, "y": 40, "category": "D"},
    {"x": 66, "y": 47, "category": "D"}, {"x": 71, "y": 43, "category": "D"}, {"x": 78, "y": 50, "category": "D"}
  ]
type: scatter
engine: plot
title: Categorical Scatter Plot
width: 600
height: 400
marks:
  - type: dot
    configuration:
      x: x
      y: y
      fill: category
      r: 6
      tip: true
x:
  label: X Position
y:
  label: Y Position
color:
  legend: true
grid: true

---

Line Marks

Simple Line Chart

Basic line chart connecting sequential data points.

View Source

data:
  source: [
    {"time": 0, "value": 20}, {"time": 1, "value": 22}, {"time": 2, "value": 21}, {"time": 3, "value": 25},
    {"time": 4, "value": 27}, {"time": 5, "value": 26}, {"time": 6, "value": 30}, {"time": 7, "value": 32},
    {"time": 8, "value": 31}, {"time": 9, "value": 35}, {"time": 10, "value": 37}, {"time": 11, "value": 36},
    {"time": 12, "value": 40}, {"time": 13, "value": 42}, {"time": 14, "value": 41}, {"time": 15, "value": 45},
    {"time": 16, "value": 47}, {"time": 17, "value": 46}, {"time": 18, "value": 50}, {"time": 19, "value": 52},
    {"time": 20, "value": 51}, {"time": 21, "value": 55}, {"time": 22, "value": 57}, {"time": 23, "value": 56},
    {"time": 24, "value": 60}, {"time": 25, "value": 62}, {"time": 26, "value": 61}, {"time": 27, "value": 65},
    {"time": 28, "value": 67}, {"time": 29, "value": 66}, {"time": 30, "value": 70}, {"time": 31, "value": 72},
    {"time": 32, "value": 71}, {"time": 33, "value": 75}, {"time": 34, "value": 77}, {"time": 35, "value": 76},
    {"time": 36, "value": 80}, {"time": 37, "value": 82}, {"time": 38, "value": 81}, {"time": 39, "value": 85},
    {"time": 40, "value": 87}, {"time": 41, "value": 86}, {"time": 42, "value": 90}, {"time": 43, "value": 92},
    {"time": 44, "value": 91}, {"time": 45, "value": 95}, {"time": 46, "value": 97}, {"time": 47, "value": 96},
    {"time": 48, "value": 100}, {"time": 49, "value": 102}
  ]
type: line
engine: plot
title: Simple Line Chart
width: 600
height: 400
marks:
  - type: line
    configuration:
      x: time
      y: value
      stroke: "#2ecc71"
      strokeWidth: 2.5
      tip: true
x:
  label: Time
y:
  label: Value
grid: true

Multi-Line Chart

Multiple line series on the same chart. The plugin automatically infers the z channel for grouping when stroke references a categorical field with multiple values.

View Source

data:
  source: [
    {"month": 1, "series": "Product A", "sales": 45}, {"month": 2, "series": "Product A", "sales": 52},
    {"month": 3, "series": "Product A", "sales": 48}, {"month": 4, "series": "Product A", "sales": 55},
    {"month": 5, "series": "Product A", "sales": 62}, {"month": 6, "series": "Product A", "sales": 58},
    {"month": 7, "series": "Product A", "sales": 65}, {"month": 8, "series": "Product A", "sales": 72},
    {"month": 9, "series": "Product A", "sales": 68}, {"month": 10, "series": "Product A", "sales": 75},
    {"month": 11, "series": "Product A", "sales": 82}, {"month": 12, "series": "Product A", "sales": 78},
    {"month": 1, "series": "Product B", "sales": 38}, {"month": 2, "series": "Product B", "sales": 42},
    {"month": 3, "series": "Product B", "sales": 46}, {"month": 4, "series": "Product B", "sales": 43},
    {"month": 5, "series": "Product B", "sales": 50}, {"month": 6, "series": "Product B", "sales": 54},
    {"month": 7, "series": "Product B", "sales": 51}, {"month": 8, "series": "Product B", "sales": 58},
    {"month": 9, "series": "Product B", "sales": 62}, {"month": 10, "series": "Product B", "sales": 59},
    {"month": 11, "series": "Product B", "sales": 66}, {"month": 12, "series": "Product B", "sales": 70},
    {"month": 1, "series": "Product C", "sales": 52}, {"month": 2, "series": "Product C", "sales": 55},
    {"month": 3, "series": "Product C", "sales": 59}, {"month": 4, "series": "Product C", "sales": 62},
    {"month": 5, "series": "Product C", "sales": 58}, {"month": 6, "series": "Product C", "sales": 65},
    {"month": 7, "series": "Product C", "sales": 69}, {"month": 8, "series": "Product C", "sales": 66},
    {"month": 9, "series": "Product C", "sales": 73}, {"month": 10, "series": "Product C", "sales": 77},
    {"month": 11, "series": "Product C", "sales": 74}, {"month": 12, "series": "Product C", "sales": 81},
    {"month": 1, "series": "Product D", "sales": 30}, {"month": 2, "series": "Product D", "sales": 34},
    {"month": 3, "series": "Product D", "sales": 31}, {"month": 4, "series": "Product D", "sales": 38},
    {"month": 5, "series": "Product D", "sales": 42}, {"month": 6, "series": "Product D", "sales": 39},
    {"month": 7, "series": "Product D", "sales": 46}, {"month": 8, "series": "Product D", "sales": 50},
    {"month": 9, "series": "Product D", "sales": 47}, {"month": 10, "series": "Product D", "sales": 54},
    {"month": 11, "series": "Product D", "sales": 58}, {"month": 12, "series": "Product D", "sales": 55}
  ]
type: line
engine: plot
title: Multi-Series Line Chart
width: 600
height: 400
marks:
  - type: line
    configuration:
      x: month
      y: sales
      stroke: series
      strokeWidth: 2
      tip: true
x:
  label: Month
y:
  label: Sales
color:
  legend: true
grid: true

---

Area Marks

Filled Area Chart

Area chart showing cumulative or continuous data.

View Source

data:
  source: [
    {"x": 0, "y": 10}, {"x": 1, "y": 15}, {"x": 2, "y": 12}, {"x": 3, "y": 18}, {"x": 4, "y": 22},
    {"x": 5, "y": 20}, {"x": 6, "y": 25}, {"x": 7, "y": 28}, {"x": 8, "y": 26}, {"x": 9, "y": 32},
    {"x": 10, "y": 35}, {"x": 11, "y": 33}, {"x": 12, "y": 38}, {"x": 13, "y": 42}, {"x": 14, "y": 40},
    {"x": 15, "y": 45}, {"x": 16, "y": 48}, {"x": 17, "y": 46}, {"x": 18, "y": 52}, {"x": 19, "y": 55},
    {"x": 20, "y": 53}, {"x": 21, "y": 58}, {"x": 22, "y": 62}, {"x": 23, "y": 60}, {"x": 24, "y": 65},
    {"x": 25, "y": 68}, {"x": 26, "y": 66}, {"x": 27, "y": 72}, {"x": 28, "y": 75}, {"x": 29, "y": 73},
    {"x": 30, "y": 78}, {"x": 31, "y": 82}, {"x": 32, "y": 80}, {"x": 33, "y": 85}, {"x": 34, "y": 88},
    {"x": 35, "y": 86}, {"x": 36, "y": 92}, {"x": 37, "y": 95}, {"x": 38, "y": 93}, {"x": 39, "y": 98},
    {"x": 40, "y": 102}, {"x": 41, "y": 100}, {"x": 42, "y": 105}, {"x": 43, "y": 108}, {"x": 44, "y": 106},
    {"x": 45, "y": 112}, {"x": 46, "y": 115}, {"x": 47, "y": 113}, {"x": 48, "y": 118}, {"x": 49, "y": 122}
  ]
type: area
engine: plot
title: Area Chart
width: 600
height: 400
marks:
  - type: areaY
    configuration:
      x: x
      y: y
      fill: "#9b59b6"
      fillOpacity: 0.6
      tip: true
  - type: line
    configuration:
      x: x
      y: y
      stroke: "#8e44ad"
      strokeWidth: 2
x:
  label: X Position
y:
  label: Y Value
grid: true

Stacked Area Chart

Multiple stacked area series.

View Source

data:
  source: [
    {"x": 0, "category": "A", "value": 20}, {"x": 1, "category": "A", "value": 22}, {"x": 2, "category": "A", "value": 21},
    {"x": 3, "category": "A", "value": 25}, {"x": 4, "category": "A", "value": 27}, {"x": 5, "category": "A", "value": 26},
    {"x": 6, "category": "A", "value": 30}, {"x": 7, "category": "A", "value": 32}, {"x": 8, "category": "A", "value": 31},
    {"x": 9, "category": "A", "value": 35}, {"x": 10, "category": "A", "value": 37}, {"x": 11, "category": "A", "value": 36},
    {"x": 12, "category": "A", "value": 40},
    {"x": 0, "category": "B", "value": 15}, {"x": 1, "category": "B", "value": 18}, {"x": 2, "category": "B", "value": 16},
    {"x": 3, "category": "B", "value": 20}, {"x": 4, "category": "B", "value": 22}, {"x": 5, "category": "B", "value": 21},
    {"x": 6, "category": "B", "value": 25}, {"x": 7, "category": "B", "value": 27}, {"x": 8, "category": "B", "value": 26},
    {"x": 9, "category": "B", "value": 30}, {"x": 10, "category": "B", "value": 32}, {"x": 11, "category": "B", "value": 31},
    {"x": 12, "category": "B", "value": 35},
    {"x": 0, "category": "C", "value": 10}, {"x": 1, "category": "C", "value": 12}, {"x": 2, "category": "C", "value": 11},
    {"x": 3, "category": "C", "value": 15}, {"x": 4, "category": "C", "value": 17}, {"x": 5, "category": "C", "value": 16},
    {"x": 6, "category": "C", "value": 20}, {"x": 7, "category": "C", "value": 22}, {"x": 8, "category": "C", "value": 21},
    {"x": 9, "category": "C", "value": 25}, {"x": 10, "category": "C", "value": 27}, {"x": 11, "category": "C", "value": 26},
    {"x": 12, "category": "C", "value": 30},
    {"x": 0, "category": "D", "value": 8}, {"x": 1, "category": "D", "value": 10}, {"x": 2, "category": "D", "value": 9},
    {"x": 3, "category": "D", "value": 12}, {"x": 4, "category": "D", "value": 14}, {"x": 5, "category": "D", "value": 13},
    {"x": 6, "category": "D", "value": 16}, {"x": 7, "category": "D", "value": 18}, {"x": 8, "category": "D", "value": 17},
    {"x": 9, "category": "D", "value": 20}, {"x": 10, "category": "D", "value": 22}, {"x": 11, "category": "D", "value": 21},
    {"x": 12, "category": "D", "value": 24}
  ]
engine: plot
title: Stacked Area Chart
width: 600
height: 400
marks:
  - type: areaY
    configuration:
      x: x
      y: value
      fill: category
      tip: true
      stack: y
x:
  label: Time Period
y:
  label: Value
color:
  legend: true
scales:
  color:
    type: ordinal
grid: true

---

Bar Marks

Vertical Bar Chart

Standard vertical bars for categorical comparison.

View Source

data:
  source: [
    {"category": "Jan", "value": 45}, {"category": "Feb", "value": 52}, {"category": "Mar", "value": 48},
    {"category": "Apr", "value": 55}, {"category": "May", "value": 62}, {"category": "Jun", "value": 58},
    {"category": "Jul", "value": 65}, {"category": "Aug", "value": 72}, {"category": "Sep", "value": 68},
    {"category": "Oct", "value": 75}, {"category": "Nov", "value": 82}, {"category": "Dec", "value": 78},
    {"category": "Q1-Y2", "value": 85}, {"category": "Q2-Y2", "value": 92}, {"category": "Q3-Y2", "value": 88},
    {"category": "Q4-Y2", "value": 95}, {"category": "Week1", "value": 38}, {"category": "Week2", "value": 42},
    {"category": "Week3", "value": 46}, {"category": "Week4", "value": 43}, {"category": "Mon", "value": 35},
    {"category": "Tue", "value": 40}, {"category": "Wed", "value": 38}, {"category": "Thu", "value": 45},
    {"category": "Fri", "value": 50}, {"category": "A1", "value": 32}, {"category": "A2", "value": 36},
    {"category": "A3", "value": 40}, {"category": "A4", "value": 37}, {"category": "A5", "value": 42},
    {"category": "B1", "value": 48}, {"category": "B2", "value": 45}, {"category": "B3", "value": 52},
    {"category": "B4", "value": 49}, {"category": "B5", "value": 55}, {"category": "C1", "value": 60},
    {"category": "C2", "value": 57}, {"category": "C3", "value": 63}, {"category": "C4", "value": 59},
    {"category": "C5", "value": 66}, {"category": "D1", "value": 70}, {"category": "D2", "value": 67},
    {"category": "D3", "value": 72}, {"category": "D4", "value": 69}, {"category": "D5", "value": 75},
    {"category": "E1", "value": 80}, {"category": "E2", "value": 77}, {"category": "E3", "value": 82},
    {"category": "E4", "value": 79}, {"category": "E5", "value": 85}
  ]
type: bar
engine: plot
title: Vertical Bar Chart
width: 600
height: 400
marks:
  - type: barY
    configuration:
      x: category
      y: value
      fill: "#e74c3c"
      tip: true
x:
  label: Category
y:
  label: Value
grid: true
marginBottom: 80

Grouped Bar Chart

Multiple bar series grouped by category.

View Source

data:
  source: [
    {"group": "Q1", "series": "2022", "value": 45}, {"group": "Q1", "series": "2023", "value": 52},
    {"group": "Q1", "series": "2024", "value": 58}, {"group": "Q2", "series": "2022", "value": 50},
    {"group": "Q2", "series": "2023", "value": 57}, {"group": "Q2", "series": "2024", "value": 63},
    {"group": "Q3", "series": "2022", "value": 55}, {"group": "Q3", "series": "2023", "value": 62},
    {"group": "Q3", "series": "2024", "value": 68}, {"group": "Q4", "series": "2022", "value": 60},
    {"group": "Q4", "series": "2023", "value": 67}, {"group": "Q4", "series": "2024", "value": 73},
    {"group": "Jan", "series": "Sales", "value": 42}, {"group": "Jan", "series": "Profit", "value": 18},
    {"group": "Feb", "series": "Sales", "value": 48}, {"group": "Feb", "series": "Profit", "value": 22},
    {"group": "Mar", "series": "Sales", "value": 45}, {"group": "Mar", "series": "Profit", "value": 20},
    {"group": "Apr", "series": "Sales", "value": 52}, {"group": "Apr", "series": "Profit", "value": 25},
    {"group": "May", "series": "Sales", "value": 58}, {"group": "May", "series": "Profit", "value": 28},
    {"group": "Jun", "series": "Sales", "value": 55}, {"group": "Jun", "series": "Profit", "value": 27},
    {"group": "Region A", "series": "Product X", "value": 65}, {"group": "Region A", "series": "Product Y", "value": 55},
    {"group": "Region A", "series": "Product Z", "value": 70}, {"group": "Region B", "series": "Product X", "value": 72},
    {"group": "Region B", "series": "Product Y", "value": 62}, {"group": "Region B", "series": "Product Z", "value": 75},
    {"group": "Region C", "series": "Product X", "value": 58}, {"group": "Region C", "series": "Product Y", "value": 48},
    {"group": "Region C", "series": "Product Z", "value": 62}, {"group": "North", "series": "Type A", "value": 38},
    {"group": "North", "series": "Type B", "value": 45}, {"group": "South", "series": "Type A", "value": 42},
    {"group": "South", "series": "Type B", "value": 50}, {"group": "East", "series": "Type A", "value": 48},
    {"group": "East", "series": "Type B", "value": 55}, {"group": "West", "series": "Type A", "value": 52},
    {"group": "West", "series": "Type B", "value": 60}, {"group": "Cat1", "series": "Var1", "value": 35},
    {"group": "Cat1", "series": "Var2", "value": 40}, {"group": "Cat2", "series": "Var1", "value": 38},
    {"group": "Cat2", "series": "Var2", "value": 43}, {"group": "Cat3", "series": "Var1", "value": 42},
    {"group": "Cat3", "series": "Var2", "value": 47}
  ]
type: bar
engine: plot
title: Grouped Bar Chart
width: 1000
height: 400
marks:
  - type: barY
    configuration:
      x: group
      y: value
      fill: series
      tip: true
x:
  label: Group
y:
  label: Value
color:
  legend: true
grid: true

---

Rectangle Marks

Histogram with Rect

Distribution analysis using binned rectangles. This example uses the auto mark type which automatically selects the appropriate visualization (histogram) for a single quantitative dimension.

View Source

data:
  source: [
    {"value": 12.5}, {"value": 15.3}, {"value": 18.7}, {"value": 14.2}, {"value": 16.8},
    {"value": 13.9}, {"value": 17.4}, {"value": 19.2}, {"value": 15.6}, {"value": 14.1},
    {"value": 16.3}, {"value": 18.9}, {"value": 13.2}, {"value": 17.8}, {"value": 15.4},
    {"value": 19.6}, {"value": 14.7}, {"value": 16.1}, {"value": 18.3}, {"value": 13.8},
    {"value": 15.9}, {"value": 17.2}, {"value": 19.8}, {"value": 14.5}, {"value": 16.7},
    {"value": 18.1}, {"value": 13.4}, {"value": 15.8}, {"value": 17.6}, {"value": 19.4},
    {"value": 14.3}, {"value": 16.5}, {"value": 18.5}, {"value": 13.6}, {"value": 15.2},
    {"value": 17.9}, {"value": 19.1}, {"value": 14.8}, {"value": 16.4}, {"value": 18.2},
    {"value": 13.7}, {"value": 15.5}, {"value": 17.3}, {"value": 19.5}, {"value": 14.9},
    {"value": 16.2}, {"value": 18.6}, {"value": 13.5}, {"value": 15.7}, {"value": 17.1}
  ]

engine: plot
title: Histogram Distribution
width: 600
height: 400
marks:
  - type: auto
    configuration:
      x: value
      fill: "#f39c12"
      fillOpacity: 0.7
      tip: true
x:
  label: Value
y:
  label: Frequency
grid: true

---

Text and Label Marks

Scatter Plot with Text Labels

Points labeled with text annotations.

View Source

data:
  source: [
    {"x": 10, "y": 45, "label": "A1"}, {"x": 20, "y": 52, "label": "A2"}, {"x": 30, "y": 48, "label": "A3"},
    {"x": 40, "y": 55, "label": "A4"}, {"x": 50, "y": 62, "label": "A5"}, {"x": 15, "y": 38, "label": "B1"},
    {"x": 25, "y": 42, "label": "B2"}, {"x": 35, "y": 46, "label": "B3"}, {"x": 45, "y": 50, "label": "B4"},
    {"x": 55, "y": 54, "label": "B5"}, {"x": 12, "y": 60, "label": "C1"}, {"x": 22, "y": 65, "label": "C2"},
    {"x": 32, "y": 58, "label": "C3"}, {"x": 42, "y": 70, "label": "C4"}, {"x": 52, "y": 75, "label": "C5"},
    {"x": 18, "y": 35, "label": "D1"}, {"x": 28, "y": 40, "label": "D2"}, {"x": 38, "y": 44, "label": "D3"},
    {"x": 48, "y": 48, "label": "D4"}, {"x": 58, "y": 52, "label": "D5"}, {"x": 14, "y": 68, "label": "E1"},
    {"x": 24, "y": 72, "label": "E2"}, {"x": 34, "y": 66, "label": "E3"}, {"x": 44, "y": 78, "label": "E4"},
    {"x": 54, "y": 82, "label": "E5"}, {"x": 16, "y": 30, "label": "F1"}, {"x": 26, "y": 34, "label": "F2"},
    {"x": 36, "y": 38, "label": "F3"}, {"x": 46, "y": 42, "label": "F4"}, {"x": 56, "y": 46, "label": "F5"},
    {"x": 11, "y": 85, "label": "G1"}, {"x": 21, "y": 88, "label": "G2"}, {"x": 31, "y": 82, "label": "G3"},
    {"x": 41, "y": 92, "label": "G4"}, {"x": 51, "y": 95, "label": "G5"}, {"x": 19, "y": 25, "label": "H1"},
    {"x": 29, "y": 28, "label": "H2"}, {"x": 39, "y": 32, "label": "H3"}, {"x": 49, "y": 36, "label": "H4"},
    {"x": 59, "y": 40, "label": "H5"}, {"x": 13, "y": 78, "label": "I1"}, {"x": 23, "y": 80, "label": "I2"},
    {"x": 33, "y": 75, "label": "I3"}, {"x": 43, "y": 85, "label": "I4"}, {"x": 53, "y": 88, "label": "I5"},
    {"x": 17, "y": 55, "label": "J1"}, {"x": 27, "y": 58, "label": "J2"}, {"x": 37, "y": 62, "label": "J3"},
    {"x": 47, "y": 65, "label": "J4"}, {"x": 57, "y": 68, "label": "J5"}
  ]
type: scatter
engine: plot
title: Labeled Scatter Plot
width: 600
height: 400
marks:
  - type: dot
    configuration:
      x: x
      y: y
      fill: "#3498db"
      r: 5
  - type: text
    configuration:
      x: x
      y: y
      text: label
      fontSize: 10
      dy: -10
x:
  label: X Coordinate
y:
  label: Y Coordinate
grid: true

---

Rule Marks

Reference Lines with RuleY and RuleX

Horizontal and vertical reference lines.

View Source

data:
  source: [
    {"x": 1, "y": 23}, {"x": 2, "y": 27}, {"x": 3, "y": 25}, {"x": 4, "y": 31}, {"x": 5, "y": 35},
    {"x": 6, "y": 33}, {"x": 7, "y": 38}, {"x": 8, "y": 42}, {"x": 9, "y": 40}, {"x": 10, "y": 45},
    {"x": 11, "y": 48}, {"x": 12, "y": 46}, {"x": 13, "y": 52}, {"x": 14, "y": 55}, {"x": 15, "y": 53},
    {"x": 16, "y": 58}, {"x": 17, "y": 62}, {"x": 18, "y": 60}, {"x": 19, "y": 65}, {"x": 20, "y": 68},
    {"x": 21, "y": 66}, {"x": 22, "y": 72}, {"x": 23, "y": 75}, {"x": 24, "y": 73}, {"x": 25, "y": 78},
    {"x": 26, "y": 82}, {"x": 27, "y": 80}, {"x": 28, "y": 85}, {"x": 29, "y": 88}, {"x": 30, "y": 86},
    {"x": 31, "y": 92}, {"x": 32, "y": 95}, {"x": 33, "y": 93}, {"x": 34, "y": 98}, {"x": 35, "y": 102},
    {"x": 36, "y": 100}, {"x": 37, "y": 105}, {"x": 38, "y": 108}, {"x": 39, "y": 106}, {"x": 40, "y": 112},
    {"x": 41, "y": 115}, {"x": 42, "y": 113}, {"x": 43, "y": 118}, {"x": 44, "y": 122}, {"x": 45, "y": 120},
    {"x": 46, "y": 125}, {"x": 47, "y": 128}, {"x": 48, "y": 126}, {"x": 49, "y": 132}, {"x": 50, "y": 135}
  ]
type: scatter
engine: plot
title: Chart with Reference Lines
width: 600
height: 400
marks:
  - type: dot
    configuration:
      x: x
      y: y
      fill: "#3498db"
      r: 4
      tip: true
  - type: ruleY
    configuration:
      y: 75
      stroke: "#e74c3c"
      strokeWidth: 0.1
      strokeDasharray: "4,4"
  - type: ruleY
    configuration:
      y: 100
      stroke: "#27ae60"
      strokeWidth: 0.1
      strokeDasharray: "4,4"
  - type: ruleX
    configuration:
      x: 25
      stroke: "#f39c12"
      strokeWidth: 0.1
      strokeDasharray: "2,2"
x:
  label: X Position
y:
  label: Y Value
grid: true

---

Tick Marks

Distribution Tick Marks

Tick marks showing value distribution.

View Source

data:
  source: [
    {"value": 45, "category": "A"}, {"value": 52, "category": "A"}, {"value": 48, "category": "A"},
    {"value": 55, "category": "A"}, {"value": 62, "category": "A"}, {"value": 58, "category": "A"},
    {"value": 65, "category": "A"}, {"value": 72, "category": "A"}, {"value": 68, "category": "A"},
    {"value": 75, "category": "A"}, {"value": 82, "category": "A"}, {"value": 78, "category": "A"},
    {"value": 38, "category": "B"}, {"value": 42, "category": "B"}, {"value": 46, "category": "B"},
    {"value": 43, "category": "B"}, {"value": 50, "category": "B"}, {"value": 54, "category": "B"},
    {"value": 51, "category": "B"}, {"value": 58, "category": "B"}, {"value": 62, "category": "B"},
    {"value": 59, "category": "B"}, {"value": 66, "category": "B"}, {"value": 70, "category": "B"},
    {"value": 52, "category": "C"}, {"value": 55, "category": "C"}, {"value": 59, "category": "C"},
    {"value": 62, "category": "C"}, {"value": 58, "category": "C"}, {"value": 65, "category": "C"},
    {"value": 69, "category": "C"}, {"value": 66, "category": "C"}, {"value": 73, "category": "C"},
    {"value": 77, "category": "C"}, {"value": 74, "category": "C"}, {"value": 81, "category": "C"},
    {"value": 30, "category": "D"}, {"value": 34, "category": "D"}, {"value": 31, "category": "D"},
    {"value": 38, "category": "D"}, {"value": 42, "category": "D"}, {"value": 39, "category": "D"},
    {"value": 46, "category": "D"}, {"value": 50, "category": "D"}, {"value": 47, "category": "D"},
    {"value": 54, "category": "D"}, {"value": 58, "category": "D"}, {"value": 55, "category": "D"},
    {"value": 61, "category": "D"}, {"value": 65, "category": "D"}
  ]

engine: plot
title: Value Distribution Tick Marks
width: 600
height: 400
marks:
  - type: tickX
    configuration:
      x: value
      y: category
      stroke: category
      strokeWidth: 2
x:
  label: Value
y:
  label: Category
color:
  legend: true

---

Link Marks

Network Connections

Link marks connecting nodes (simulated network).

View Source

data:
  source: [
    {"x1": 10, "y1": 20, "x2": 30, "y2": 40}, {"x1": 30, "y1": 40, "x2": 50, "y2": 30},
    {"x1": 50, "y1": 30, "x2": 70, "y2": 50}, {"x1": 70, "y1": 50, "x2": 90, "y2": 45},
    {"x1": 15, "y1": 60, "x2": 35, "y2": 80}, {"x1": 35, "y1": 80, "x2": 55, "y2": 70},
    {"x1": 55, "y1": 70, "x2": 75, "y2": 85}, {"x1": 75, "y1": 85, "x2": 95, "y2": 75},
    {"x1": 20, "y1": 25, "x2": 40, "y2": 35}, {"x1": 40, "y1": 35, "x2": 60, "y2": 45},
    {"x1": 60, "y1": 45, "x2": 80, "y2": 40}, {"x1": 80, "y1": 40, "x2": 100, "y2": 50},
    {"x1": 12, "y1": 55, "x2": 32, "y2": 65}, {"x1": 32, "y1": 65, "x2": 52, "y2": 60},
    {"x1": 52, "y1": 60, "x2": 72, "y2": 75}, {"x1": 72, "y1": 75, "x2": 92, "y2": 70},
    {"x1": 25, "y1": 30, "x2": 45, "y2": 50}, {"x1": 45, "y1": 50, "x2": 65, "y2": 55},
    {"x1": 65, "y1": 55, "x2": 85, "y2": 60}, {"x1": 85, "y1": 60, "x2": 105, "y2": 65},
    {"x1": 18, "y1": 70, "x2": 38, "y2": 85}, {"x1": 38, "y1": 85, "x2": 58, "y2": 80},
    {"x1": 58, "y1": 80, "x2": 78, "y2": 90}, {"x1": 78, "y1": 90, "x2": 98, "y2": 85},
    {"x1": 22, "y1": 15, "x2": 42, "y2": 25}, {"x1": 42, "y1": 25, "x2": 62, "y2": 35},
    {"x1": 62, "y1": 35, "x2": 82, "y2": 30}, {"x1": 82, "y1": 30, "x2": 102, "y2": 40},
    {"x1": 14, "y1": 45, "x2": 34, "y2": 55}, {"x1": 34, "y1": 55, "x2": 54, "y2": 50},
    {"x1": 54, "y1": 50, "x2": 74, "y2": 65}, {"x1": 74, "y1": 65, "x2": 94, "y2": 60},
    {"x1": 28, "y1": 35, "x2": 48, "y2": 45}, {"x1": 48, "y1": 45, "x2": 68, "y2": 40},
    {"x1": 68, "y1": 40, "x2": 88, "y2": 55}, {"x1": 88, "y1": 55, "x2": 108, "y2": 50},
    {"x1": 16, "y1": 75, "x2": 36, "y2": 90}, {"x1": 36, "y1": 90, "x2": 56, "y2": 85},
    {"x1": 56, "y1": 85, "x2": 76, "y2": 95}, {"x1": 76, "y1": 95, "x2": 96, "y2": 90},
    {"x1": 24, "y1": 20, "x2": 44, "y2": 30}, {"x1": 44, "y1": 30, "x2": 64, "y2": 25},
    {"x1": 64, "y1": 25, "x2": 84, "y2": 35}
  ]
engine: plot
title: Network Link Diagram
width: 600
height: 400
marks:
  - type: link
    configuration:
      x1: x1
      y1: y1
      x2: x2
      y2: y2
      stroke: "#95a5a6"
      strokeWidth: 1.5
      strokeOpacity: 0.6
x:
  label: X Position
y:
  label: Y Position

---

Vector Marks

Vector Field Visualization

Directional vectors showing flow or force.

View Source

data:
  source: [
    {"x": 10, "y": 10, "length": 15, "rotate": 45}, {"x": 30, "y": 10, "length": 12, "rotate": 30},
    {"x": 50, "y": 10, "length": 18, "rotate": 60}, {"x": 70, "y": 10, "length": 14, "rotate": 90},
    {"x": 90, "y": 10, "length": 16, "rotate": 120}, {"x": 10, "y": 30, "length": 20, "rotate": 135},
    {"x": 30, "y": 30, "length": 13, "rotate": 150}, {"x": 50, "y": 30, "length": 17, "rotate": 180},
    {"x": 70, "y": 30, "length": 15, "rotate": 210}, {"x": 90, "y": 30, "length": 19, "rotate": 240},
    {"x": 10, "y": 50, "length": 14, "rotate": 270}, {"x": 30, "y": 50, "length": 16, "rotate": 300},
    {"x": 50, "y": 50, "length": 21, "rotate": 330}, {"x": 70, "y": 50, "length": 12, "rotate": 0},
    {"x": 90, "y": 50, "length": 18, "rotate": 45}, {"x": 10, "y": 70, "length": 15, "rotate": 90},
    {"x": 30, "y": 70, "length": 17, "rotate": 120}, {"x": 50, "y": 70, "length": 13, "rotate": 150},
    {"x": 70, "y": 70, "length": 19, "rotate": 180}, {"x": 90, "y": 70, "length": 14, "rotate": 210},
    {"x": 10, "y": 90, "length": 16, "rotate": 240}, {"x": 30, "y": 90, "length": 20, "rotate": 270},
    {"x": 50, "y": 90, "length": 12, "rotate": 300}, {"x": 70, "y": 90, "length": 18, "rotate": 330},
    {"x": 90, "y": 90, "length": 15, "rotate": 0}, {"x": 20, "y": 20, "length": 17, "rotate": 45},
    {"x": 40, "y": 20, "length": 14, "rotate": 75}, {"x": 60, "y": 20, "length": 19, "rotate": 105},
    {"x": 80, "y": 20, "length": 13, "rotate": 135}, {"x": 20, "y": 40, "length": 16, "rotate": 165},
    {"x": 40, "y": 40, "length": 21, "rotate": 195}, {"x": 60, "y": 40, "length": 12, "rotate": 225},
    {"x": 80, "y": 40, "length": 18, "rotate": 255}, {"x": 20, "y": 60, "length": 15, "rotate": 285},
    {"x": 40, "y": 60, "length": 17, "rotate": 315}, {"x": 60, "y": 60, "length": 14, "rotate": 345},
    {"x": 80, "y": 60, "length": 19, "rotate": 15}, {"x": 20, "y": 80, "length": 13, "rotate": 60},
    {"x": 40, "y": 80, "length": 16, "rotate": 90}, {"x": 60, "y": 80, "length": 20, "rotate": 120},
    {"x": 80, "y": 80, "length": 12, "rotate": 150}, {"x": 15, "y": 15, "length": 18, "rotate": 180},
    {"x": 35, "y": 35, "length": 15, "rotate": 210}, {"x": 55, "y": 55, "length": 17, "rotate": 240},
    {"x": 75, "y": 75, "length": 14, "rotate": 270}, {"x": 25, "y": 25, "length": 19, "rotate": 300},
    {"x": 45, "y": 45, "length": 13, "rotate": 330}, {"x": 65, "y": 65, "length": 16, "rotate": 0},
    {"x": 85, "y": 85, "length": 21, "rotate": 30}
  ]

engine: plot
title: Vector Field
width: 600
height: 400
marks:
  - type: vector
    configuration:
      x: x
      y: y
      length: length
      rotate: rotate
      stroke: "#e67e22"
      strokeWidth: 2
x:
  label: X Position
y:
  label: Y Position

---

Cell Marks (Heatmaps)

Basic Heatmap

2D cell-based heatmap visualization.

View Source

data:
  source: [
    {"x": "A", "y": "1", "value": 12}, {"x": "A", "y": "2", "value": 18}, {"x": "A", "y": "3", "value": 15},
    {"x": "A", "y": "4", "value": 22}, {"x": "A", "y": "5", "value": 25}, {"x": "B", "y": "1", "value": 15},
    {"x": "B", "y": "2", "value": 22}, {"x": "B", "y": "3", "value": 18}, {"x": "B", "y": "4", "value": 26},
    {"x": "B", "y": "5", "value": 28}, {"x": "C", "y": "1", "value": 14}, {"x": "C", "y": "2", "value": 20},
    {"x": "C", "y": "3", "value": 17}, {"x": "C", "y": "4", "value": 24}, {"x": "C", "y": "5", "value": 27},
    {"x": "D", "y": "1", "value": 16}, {"x": "D", "y": "2", "value": 23}, {"x": "D", "y": "3", "value": 19},
    {"x": "D", "y": "4", "value": 28}, {"x": "D", "y": "5", "value": 30}, {"x": "E", "y": "1", "value": 18},
    {"x": "E", "y": "2", "value": 25}, {"x": "E", "y": "3", "value": 21}, {"x": "E", "y": "4", "value": 30},
    {"x": "E", "y": "5", "value": 32}, {"x": "F", "y": "1", "value": 10}, {"x": "F", "y": "2", "value": 14},
    {"x": "F", "y": "3", "value": 12}, {"x": "F", "y": "4", "value": 18}, {"x": "F", "y": "5", "value": 20},
    {"x": "G", "y": "1", "value": 8}, {"x": "G", "y": "2", "value": 12}, {"x": "G", "y": "3", "value": 10},
    {"x": "G", "y": "4", "value": 15}, {"x": "G", "y": "5", "value": 17}, {"x": "H", "y": "1", "value": 20},
    {"x": "H", "y": "2", "value": 27}, {"x": "H", "y": "3", "value": 23}, {"x": "H", "y": "4", "value": 32},
    {"x": "H", "y": "5", "value": 35}, {"x": "I", "y": "1", "value": 13}, {"x": "I", "y": "2", "value": 19},
    {"x": "I", "y": "3", "value": 16}, {"x": "I", "y": "4", "value": 23}, {"x": "I", "y": "5", "value": 26},
    {"x": "J", "y": "1", "value": 17}, {"x": "J", "y": "2", "value": 24}, {"x": "J", "y": "3", "value": 20},
    {"x": "J", "y": "4", "value": 29}, {"x": "J", "y": "5", "value": 31}
  ]
type: heatmap
engine: plot
title: Cell-Based Heatmap
width: 600
height: 400
marks:
  - type: cell
    configuration:
      x: x
      y: y
      fill: value
      tip: true
x:
  label: X Category
y:
  label: Y Category
color:
  scheme: Blues
  legend: true

---

Statistical Marks

Box Plot Distribution

Statistical summary showing quartiles and outliers.

View Source

data:
  source: [
    {"category": "Group A", "value": 45}, {"category": "Group A", "value": 52}, {"category": "Group A", "value": 48},
    {"category": "Group A", "value": 55}, {"category": "Group A", "value": 62}, {"category": "Group A", "value": 58},
    {"category": "Group A", "value": 65}, {"category": "Group A", "value": 72}, {"category": "Group A", "value": 68},
    {"category": "Group A", "value": 75},
    {"category": "Group B", "value": 38}, {"category": "Group B", "value": 42}, {"category": "Group B", "value": 46},
    {"category": "Group B", "value": 43}, {"category": "Group B", "value": 50}, {"category": "Group B", "value": 54},
    {"category": "Group B", "value": 51}, {"category": "Group B", "value": 58}, {"category": "Group B", "value": 62},
    {"category": "Group B", "value": 59},
    {"category": "Group C", "value": 52}, {"category": "Group C", "value": 55}, {"category": "Group C", "value": 59},
    {"category": "Group C", "value": 62}, {"category": "Group C", "value": 58}, {"category": "Group C", "value": 65},
    {"category": "Group C", "value": 69}, {"category": "Group C", "value": 66}, {"category": "Group C", "value": 73},
    {"category": "Group C", "value": 77},
    {"category": "Group D", "value": 30}, {"category": "Group D", "value": 34}, {"category": "Group D", "value": 31},
    {"category": "Group D", "value": 38}, {"category": "Group D", "value": 42}, {"category": "Group D", "value": 39},
    {"category": "Group D", "value": 46}, {"category": "Group D", "value": 50}, {"category": "Group D", "value": 47},
    {"category": "Group D", "value": 54},
    {"category": "Group E", "value": 60}, {"category": "Group E", "value": 65}, {"category": "Group E", "value": 62},
    {"category": "Group E", "value": 70}, {"category": "Group E", "value": 75}, {"category": "Group E", "value": 72},
    {"category": "Group E", "value": 80}, {"category": "Group E", "value": 85}, {"category": "Group E", "value": 82},
    {"category": "Group E", "value": 90}
  ]

engine: plot
title: Statistical Box Plot
width: 600
height: 400
marks:
  - type: boxY
    configuration:
      x: category
      y: value
      fill: category
      #tip: true
x:
  label: Category
y:
  label: Value Distribution
color:
  legend: true

Density Plot

Smooth kernel density estimation.

View Source

data:
  source: [
    {"value": 45}, {"value": 48}, {"value": 52}, {"value": 55}, {"value": 58},
    {"value": 61}, {"value": 65}, {"value": 68}, {"value": 72}, {"value": 75},
    {"value": 78}, {"value": 82}, {"value": 85}, {"value": 88}, {"value": 91},
    {"value": 54}, {"value": 63}, {"value": 70}, {"value": 77}, {"value": 84},
    {"value": 50}, {"value": 57}, {"value": 64}, {"value": 71}, {"value": 79},
    {"value": 86}, {"value": 93}, {"value": 60}, {"value": 67}, {"value": 74},
    {"value": 81}, {"value": 89}, {"value": 53}, {"value": 62}, {"value": 69},
    {"value": 76}, {"value": 83}, {"value": 90}, {"value": 47}, {"value": 56},
    {"value": 66}, {"value": 73}, {"value": 80}, {"value": 87}, {"value": 95},
    {"value": 59}, {"value": 68}, {"value": 75}, {"value": 82}, {"value": 92}
  ]
engine: plot
title: Kernel Density Estimation
width: 600
height: 400
marks:
  - type: density
    configuration:
      y: value
      x: value
      fill: "#9b59b6"
      fillOpacity: 0.4
      stroke: "#8e44ad"
      strokeWidth: 2
x:
  label: Value
y:
  label: Density
grid: true

---

Multi-Mark Compositions

Scatter with Line and Confidence Band

Multiple marks creating a comprehensive visualization.

View Source

data:
  source: [
    {"x": 1, "y": 23, "lower": 20, "upper": 26}, {"x": 2, "y": 27, "lower": 24, "upper": 30},
    {"x": 3, "y": 25, "lower": 22, "upper": 28}, {"x": 4, "y": 31, "lower": 28, "upper": 34},
    {"x": 5, "y": 35, "lower": 32, "upper": 38}, {"x": 6, "y": 33, "lower": 30, "upper": 36},
    {"x": 7, "y": 38, "lower": 35, "upper": 41}, {"x": 8, "y": 42, "lower": 39, "upper": 45},
    {"x": 9, "y": 40, "lower": 37, "upper": 43}, {"x": 10, "y": 45, "lower": 42, "upper": 48},
    {"x": 11, "y": 48, "lower": 45, "upper": 51}, {"x": 12, "y": 46, "lower": 43, "upper": 49},
    {"x": 13, "y": 52, "lower": 49, "upper": 55}, {"x": 14, "y": 55, "lower": 52, "upper": 58},
    {"x": 15, "y": 53, "lower": 50, "upper": 56}, {"x": 16, "y": 58, "lower": 55, "upper": 61},
    {"x": 17, "y": 62, "lower": 59, "upper": 65}, {"x": 18, "y": 60, "lower": 57, "upper": 63},
    {"x": 19, "y": 65, "lower": 62, "upper": 68}, {"x": 20, "y": 68, "lower": 65, "upper": 71},
    {"x": 21, "y": 66, "lower": 63, "upper": 69}, {"x": 22, "y": 72, "lower": 69, "upper": 75},
    {"x": 23, "y": 75, "lower": 72, "upper": 78}, {"x": 24, "y": 73, "lower": 70, "upper": 76},
    {"x": 25, "y": 78, "lower": 75, "upper": 81}, {"x": 26, "y": 82, "lower": 79, "upper": 85},
    {"x": 27, "y": 80, "lower": 77, "upper": 83}, {"x": 28, "y": 85, "lower": 82, "upper": 88},
    {"x": 29, "y": 88, "lower": 85, "upper": 91}, {"x": 30, "y": 86, "lower": 83, "upper": 89},
    {"x": 31, "y": 92, "lower": 89, "upper": 95}, {"x": 32, "y": 95, "lower": 92, "upper": 98},
    {"x": 33, "y": 93, "lower": 90, "upper": 96}, {"x": 34, "y": 98, "lower": 95, "upper": 101},
    {"x": 35, "y": 102, "lower": 99, "upper": 105}, {"x": 36, "y": 100, "lower": 97, "upper": 103},
    {"x": 37, "y": 105, "lower": 102, "upper": 108}, {"x": 38, "y": 108, "lower": 105, "upper": 111},
    {"x": 39, "y": 106, "lower": 103, "upper": 109}, {"x": 40, "y": 112, "lower": 109, "upper": 115},
    {"x": 41, "y": 115, "lower": 112, "upper": 118}, {"x": 42, "y": 113, "lower": 110, "upper": 116},
    {"x": 43, "y": 118, "lower": 115, "upper": 121}, {"x": 44, "y": 122, "lower": 119, "upper": 125},
    {"x": 45, "y": 120, "lower": 117, "upper": 123}, {"x": 46, "y": 125, "lower": 122, "upper": 128},
    {"x": 47, "y": 128, "lower": 125, "upper": 131}, {"x": 48, "y": 126, "lower": 123, "upper": 129},
    {"x": 49, "y": 132, "lower": 129, "upper": 135}, {"x": 50, "y": 135, "lower": 132, "upper": 138}
  ]
engine: plot
title: Multi-Mark Composition with Confidence Band
width: 600
height: 400
marks:
  - type: area
    configuration:
      x: x
      y1: lower
      y2: upper
      fill: "#3498db"
      fillOpacity: 0.2
  - type: line
    configuration:
      x: x
      y: y
      stroke: "#2980b9"
      strokeWidth: 1
  - type: dot
    configuration:
      x: x
      y: y
      fill: "#e74c3c"
      r: 2
      tip: true
x:
  label: X Values
y:
  label: Y Values
grid: true

Bar Chart with Reference Lines and Labels

Complex composition with multiple mark types.

View Source

data:
  source: [
    {"category": "A", "value": 45, "target": 50}, {"category": "B", "value": 62, "target": 60},
    {"category": "C", "value": 38, "target": 45}, {"category": "D", "value": 75, "target": 70},
    {"category": "E", "value": 52, "target": 55}, {"category": "F", "value": 68, "target": 65},
    {"category": "G", "value": 42, "target": 50}, {"category": "H", "value": 85, "target": 80},
    {"category": "I", "value": 58, "target": 60}, {"category": "J", "value": 72, "target": 70},
    {"category": "K", "value": 48, "target": 50}, {"category": "L", "value": 92, "target": 90},
    {"category": "M", "value": 55, "target": 55}, {"category": "N", "value": 78, "target": 75},
    {"category": "O", "value": 35, "target": 40}, {"category": "P", "value": 88, "target": 85},
    {"category": "Q", "value": 62, "target": 65}, {"category": "R", "value": 45, "target": 50},
    {"category": "S", "value": 95, "target": 90}, {"category": "T", "value": 52, "target": 55},
    {"category": "U", "value": 68, "target": 70}, {"category": "V", "value": 42, "target": 45},
    {"category": "W", "value": 82, "target": 80}, {"category": "X", "value": 58, "target": 60},
    {"category": "Y", "value": 72, "target": 70}, {"category": "Z", "value": 65, "target": 65},
    {"category": "AA", "value": 48, "target": 50}, {"category": "AB", "value": 92, "target": 90},
    {"category": "AC", "value": 55, "target": 55}, {"category": "AD", "value": 78, "target": 75},
    {"category": "AE", "value": 35, "target": 40}, {"category": "AF", "value": 88, "target": 85},
    {"category": "AG", "value": 62, "target": 65}, {"category": "AH", "value": 75, "target": 70},
    {"category": "AI", "value": 52, "target": 55}, {"category": "AJ", "value": 68, "target": 70},
    {"category": "AK", "value": 42, "target": 45}, {"category": "AL", "value": 85, "target": 80},
    {"category": "AM", "value": 58, "target": 60}, {"category": "AN", "value": 72, "target": 70},
    {"category": "AO", "value": 48, "target": 50}, {"category": "AP", "value": 92, "target": 90},
    {"category": "AQ", "value": 55, "target": 55}, {"category": "AR", "value": 78, "target": 75},
    {"category": "AS", "value": 65, "target": 65}, {"category": "AT", "value": 88, "target": 85},
    {"category": "AU", "value": 52, "target": 55}, {"category": "AV", "value": 72, "target": 70},
    {"category": "AW", "value": 45, "target": 50}, {"category": "AX", "value": 95, "target": 90}
  ]
type: bar
engine: plot
title: Performance vs Target Multi-Mark Chart
width: 600
height: 450
marks:
  - type: barY
    configuration:
      x: category
      y: value
      fill: "#3498db"
      tip: true
  - type: tick
    configuration:
      x: category
      y: target
      stroke: "#e74c3c"
      strokeWidth: 1
  - type: ruleY
    configuration:
      y: 60
      stroke: "#27ae60"
      strokeWidth: 1
      strokeDasharray: "4,4"
x:
  label: Category
y:
  label: Value
grid: true
marginBottom: 100

---

Usage Notes

Mark Configuration

All marks support these common channels:

• Positional: x, y, x1, y1, x2, y2
• Visual: fill, stroke, fillOpacity, strokeOpacity, strokeWidth
• Interactive: tip (tooltips), href (links)
• Stylistic: r (radius for dots), fontSize (for text), strokeDasharray

Multi-Mark Best Practices

1. Layer order matters: Marks are drawn in order, so place background elements first
2. Combine complementary marks: Area + Line, Bars + Rules, Dots + Text
3. Use consistent scales: Ensure all marks use the same data scale
4. Performance: Limit the number of marks for better rendering speed

Data Requirements

• All examples use exactly 50 data points with inline JSON
• Use source: prefix for embedded data
• Ensure consistent property names across data objects
• Include appropriate data types (numbers for quantities, strings for categories)

Customization

Modify these properties to customize visualizations:

• Colors: Change fill and stroke values (hex codes or CSS names)
• Sizes: Adjust width, height, r, strokeWidth
• Labels: Update title, x.label, y.label
• Grid: Set grid: true for reference lines

---

Complete showcase of all Observable Plot mark types for DataGlass plugin