[span-basic] Basic Span Plot (Highlighted Region)

[MarkusNeusinger]

Description

A span plot highlights a specific region of interest on a chart using a shaded rectangular area that spans the full height or width of the plot. Common for marking events, periods, or thresholds.

Key Features

• Vertical or horizontal shaded region
• Full-height spans for time periods/events
• Full-width spans for value thresholds
• Semi-transparent to show underlying data

Applications

• Marking recession periods in economic charts
• Highlighting significant events in time series
• Showing acceptable/unacceptable value ranges
• Indicating maintenance windows or downtime

Data Requirements

• start (numeric) - Start position of span
• end (numeric) - End position of span
• Direction: vertical (x-axis span) or horizontal (y-axis span)
• Can overlay on any existing plot type

Visual Elements

• Rectangle spanning full chart dimension
• Semi-transparent fill (alpha 0.2-0.3)
• Optional: border lines at span edges
• Optional: text label within span region

[claude]

✅ Spec ID: span-basic

Rationale: A span plot is a distinct visualization type for highlighting rectangular regions (vertical or horizontal) on charts - useful for marking time periods, thresholds, or events. No similar spec exists.

Add label approved to begin generation.

[github-actions]

✅ Specification Ready: span-basic

PR: #995

---

specification.md

span-basic: Basic Span Plot (Highlighted Region)

Description

A span plot highlights a specific region of interest on a chart using a shaded rectangular area that spans the full height or width of the plot. Vertical spans mark ranges along the x-axis (e.g., time periods), while horizontal spans mark ranges along the y-axis (e.g., value thresholds). The semi-transparent fill allows underlying data to remain visible while drawing attention to the highlighted region.

Applications

• Marking recession periods or economic events on financial time series charts
• Highlighting acceptable/unacceptable value ranges or threshold zones on line plots
• Indicating maintenance windows, downtime periods, or significant events in operational dashboards
• Showing confidence intervals or uncertainty bands around data points

Data

• start (numeric) - Start position of the span region
• end (numeric) - End position of the span region
• direction (categorical) - Either "vertical" (spans x-axis) or "horizontal" (spans y-axis)
• Size: 1-5 span regions overlaid on existing data
• Example: A line chart with dates on x-axis showing a shaded vertical span from 2008 to 2009 marking a recession period

Notes

• Use semi-transparent fill (alpha 0.2-0.3) to keep underlying data visible
• Vertical spans are most common for time-based data (highlighting periods)
• Horizontal spans work well for threshold visualization (highlighting value ranges)
• Optional: include edge lines or text labels within the span region

---

Next: Add approved label to merge this specification to main.

---

🤖 spec-create workflow