Error Bars Example

This example demonstrates the new y1/y2 support in rule marks for creating error bars and range indicators.

Standard Error Bars

Shows measurements with error ranges.

View Source

data:
    source: [
      {"category": "A", "mean": 100, "lower": 85, "upper": 115},
      {"category": "B", "mean": 120, "lower": 110, "upper": 130},
      {"category": "C", "mean": 90, "lower": 75, "upper": 105},
      {"category": "D", "mean": 140, "lower": 130, "upper": 150},
      {"category": "E", "mean": 110, "lower": 95, "upper": 125}
    ]
engine: plot
title: Measurements with Standard Error
width: 600
height: 400
marks:
  - type: rule
    configuration:
      x: category
      y1: lower
      y2: upper
      stroke: gray
      strokeWidth: 2
  - type: dot
    configuration:
      x: category
      y: mean
      fill: steelblue
      r: 6
      tip: true

Confidence Intervals

Comparing confidence intervals across groups.

View Source

data:
    source: [
      {"group": "Control", "estimate": 50, "ci_low": 45, "ci_high": 55},
      {"group": "Treatment A", "estimate": 65, "ci_low": 58, "ci_high": 72},
      {"group": "Treatment B", "estimate": 72, "ci_low": 65, "ci_high": 79},
      {"group": "Treatment C", "estimate": 58, "ci_low": 52, "ci_high": 64}
    ]

engine: plot
title: Treatment Effects with 95% CI
width: 600
height: 400
marks:
  - type: rule
    configuration:
      x: group
      y1: ci_low
      y2: ci_high
      stroke: "#333"
      strokeWidth: 3
  - type: dot
    configuration:
      x: group
      y: estimate
      fill: orange
      r: 8
      strokeWidth: 2
      stroke: white

Spike Chart

Vertical lines from baseline to value.

View Source

data:
    source: [
      {"day": "Mon", "value": 25},
      {"day": "Tue", "value": 42},
      {"day": "Wed", "value": 18},
      {"day": "Thu", "value": 55},
      {"day": "Fri", "value": 38},
      {"day": "Sat", "value": 30},
      {"day": "Sun", "value": 20}
    ]

engine: plot
title: Daily Activity (Spike Chart)
width: 600
height: 400
marks:
  - type: rule
    configuration:
      x: day
      y1: 0
      y2: value
      stroke: steelblue
      strokeWidth: 4
      tip: true
  - type: dot
    configuration:
      x: day
      y: value
      fill: steelblue
      r: 5

Range Indicators

Showing min-max ranges with quartiles.

View Source

data:
    source: [
      {"product": "Widget A", "min": 10, "q1": 25, "median": 40, "q3": 55, "max": 75},
      {"product": "Widget B", "min": 20, "q1": 35, "median": 50, "q3": 65, "max": 85},
      {"product": "Widget C", "min": 5, "q1": 20, "median": 35, "q3": 50, "max": 70}
    ]
engine: plot
title: Product Performance Distribution
width: 600
height: 400
marks:
  - type: rule
    configuration:
      x: product
      y1: min
      y2: max
      stroke: lightgray
      strokeWidth: 2
  - type: rule
    configuration:
      x: product
      y1: q1
      y2: q3
      stroke: steelblue
      strokeWidth: 6
  - type: dot
    configuration:
      x: product
      y: median
      fill: red
      r: 5
      tip: true

Horizontal Error Bars

Using x1/x2 for horizontal ranges.

View Source

data:
    source: [
      {"metric": "Response Time", "value": 250, "min": 200, "max": 300},
      {"metric": "Throughput", "value": 180, "min": 150, "max": 210},
      {"metric": "Latency", "value": 120, "min": 100, "max": 140},
      {"metric": "Error Rate", "value": 80, "min": 65, "max": 95}
    ]
engine: plot
title: Performance Metrics with Ranges
width: 600
height: 400
grid: true
marks:
  - type: rule
    configuration:
      y: metric
      x1: min
      x2: max
      stroke: gray
      strokeWidth: 2
  - type: dot
    configuration:
      y: metric
      x: value
      fill: green
      r: 6
      tip: true

Key Features

Supported Configurations

• y1/y2: Vertical error bars (most common)
• x1/x2: Horizontal error bars
• strokeWidth: Control line thickness
• stroke: Can be a field name for color encoding

Use Cases

1. Statistical Error Bars: Standard error, confidence intervals
2. Spike Charts: Values rising from baseline
3. Range Indicators: Min-max, quartile ranges
4. Uncertainty Visualization: Measurement precision
5. Comparison Charts: Group comparisons with error bounds

Tips

• Combine with dots to show the central value
• Use different stroke widths to show nested ranges (min/max vs quartiles)
• Color-code error bars to match their corresponding data points
• Use semi-transparent strokes for overlapping error bars
• Consider horizontal error bars when labels are long