feat(bokeh): implement line-realtime

[github-actions]

Implementation: line-realtime - bokeh

Implements the bokeh version of line-realtime.

File: plots/line-realtime/implementations/bokeh.py

Parent Issue: #3073

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a real-time CPU usage monitor as a line chart. The X-axis shows time (from 14:09:32 to 14:09:37 on Dec 31, 2025) with "Time" label. The Y-axis shows "CPU Usage (%)" ranging from 0-100. The line is rendered in Python blue (#306998) with a gradient fade effect - older data on the left appears more transparent with smaller markers, while recent data on the right is fully opaque with larger markers. Two CPU usage spikes are visible (~55% and ~58%). The latest data point is highlighted with a yellow marker and labeled "Current: 34.2%". An arrow pointing left with "Older data scrolls off" text indicates the scrolling direction. The title "CPU Usage Monitor · line-realtime · bokeh · pyplots.ai" appears in blue at the top. Background is light gray with subtle dashed grid lines.

Quality Score: 91/100

Criteria Checklist

Visual Quality (36/40 pts)

• VQ-01: Text Legibility (10/10) - Title at 40pt, axis labels at 28pt, tick labels at 22pt - all clearly readable
• VQ-02: No Overlap (8/8) - No overlapping text elements
• VQ-03: Element Visibility (7/8) - Line and markers well-sized, gradient effect works well, slight deduction as some middle markers could be slightly larger
• VQ-04: Color Accessibility (5/5) - Single blue color scheme, yellow highlight for current value provides good contrast
• VQ-05: Layout Balance (4/5) - Good use of canvas, slight top-heavy whitespace above the 60-100% range that is unused
• VQ-06: Axis Labels (2/2) - Descriptive labels with units: "CPU Usage (%)" and "Time"
• VQ-07: Grid & Legend (0/2) - No legend present (though not strictly needed for single-series), grid is appropriately subtle

Spec Compliance (25/25 pts)

• SC-01: Plot Type (8/8) - Correct line chart for real-time data
• SC-02: Data Mapping (5/5) - Timestamps on X, CPU usage values on Y
• SC-03: Required Features (5/5) - Sliding window effect, visual indication of scrolling direction, current value label
• SC-04: Data Range (3/3) - Y-axis shows 0-100%, X-axis shows full time window
• SC-05: Legend Accuracy (2/2) - Current value label is accurate
• SC-06: Title Format (2/2) - Correct format: "CPU Usage Monitor · line-realtime · bokeh · pyplots.ai"

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows spikes, baseline variation, trending; could show more dramatic variation
• DQ-02: Realistic Context (7/7) - CPU usage monitoring is a perfect real-world scenario for real-time charts
• DQ-03: Appropriate Scale (4/5) - Values between 25-58% are realistic; could benefit from showing values closer to limits

Code Quality (9/10 pts)

• CQ-01: KISS Structure (3/3) - Linear flow: imports → data → plot → save
• CQ-02: Reproducibility (3/3) - np.random.seed(42) set
• CQ-03: Clean Imports (2/2) - All imports are used
• CQ-04: No Deprecated API (1/1) - Using current Bokeh API
• CQ-05: Output Correct (0/0) - Saves as plot.png ✓

Library Features (3/5 pts)

• LF-01: Uses distinctive library features (3/5) - Uses ColumnDataSource, Arrow, Label, VeeHead annotations; could leverage more Bokeh-specific features like HoverTool or streaming capabilities

Strengths

• Excellent implementation of the fade/gradient effect showing data recency through both alpha and marker size
• Clear visual indication of scrolling direction with arrow and explanatory text
• Prominent highlighting of current value with contrasting yellow marker and label
• Realistic CPU monitoring scenario with believable spike patterns
• Clean title format following pyplots.ai conventions
• Good use of Bokeh annotations (Arrow, Label, VeeHead)

Weaknesses

• No legend is present (minor issue for single-series plot)
• Data stays mostly in the 25-60% range; showing occasional values near 0% or 90%+ would demonstrate the full scale
• Could utilize Bokeh HoverTool for interactive HTML output to show values on hover

Verdict: APPROVED