Chart Style Guidelines Snippet

Typography

• Font family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, monospace
• Minimum size: 13px
• Chart titles: 15px, centered, opacity: 0.9
• Axis ticks: 13px, monospace
• Readouts: date 13px, secondary lines 13px

Layout

• Put chart title above chart/controls, not inside plot area.
• Keep controls centered above chart.
• Keep readouts inside plot area, top-right aligned.
• Remove in-between helper text unless needed.

Axes

• Y-axis starts at 0 for comparative vertical charts.
• Prefer compact y tick notation when large values (5M, 10M, etc.).
• Use fixed meaningful steps (example: 5,000,000 AF on cumulative line charts).
• Put units as horizontal text above y-axis ((acre-feet)), not rotated labels.
• Month labels on x-axis for WY charts (Oct..Sep).

Series Styling

• Latest year: white stroke, slightly thicker.
• Other years: stable color map, lower emphasis.
• Min/Median/Max visible by default.
• Average guide lines: medium emphasis (opacity ~0.75), above dots.

Readouts

• Top-right readout block: right-justified text.
• Vertical comparison readout: show active selected years, cap at 10 rows.
• Default order: most recent year first (not value-sorted unless requested).
• Include color swatch + text per row.

Controls

• Pattern: Label: [button]
• Tight spacing between label and control.
• Buttons monospace, 13px, transparent background, subtle border.
• Toggle text should be simple (On / Off).
• Defaults:
  • Average window: 10y
  • Average labels: On
  • Data labels: Off
• Reset behavior:
  • Keep Max, Median, Min, and latest year enabled.

Interaction

• Hover line tracks cursor x exactly.
• Date readout updates with hover on both linear and vertical linked charts.
• Touch/mouse both supported with same behavior.

Transitions

• Use one shared transition object for mode switches (duration ~760ms, easeCubicInOut) and pass it through all linked updates.
• Keep hover transitions short (~130ms, easeCubicOut) so scrubbing stays responsive.
• Avoid stacking a second hover transition immediately after a mode transition; reuse the same transition context.
• Isolate layers to prevent data-join collisions:
  • dots in one <g>
  • year labels in one <g>
  • average labels in one <g>
• Keep labels mounted; animate position/opacity instead of toggling display during updates.
• For average inline labels, transition y with the average bar and update text in place (no fade-out/fade-in cycle).
• Initialize entering labels at meaningful anchor positions (y from current value) to avoid “fall from top” artifacts.