feat(plotly): implement line-realtime

[github-actions]

Implementation: line-realtime - plotly

Implements the plotly version of line-realtime.

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

Parent Issue: #3073

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a real-time CPU usage monitor with a continuous blue line (#306998) tracing CPU percentage over 120 seconds. A light blue gradient fill extends from the line to the x-axis. The x-axis shows "Time (seconds)" ranging from 0-120, while the y-axis displays "CPU Usage (%)" from 0-100. The title reads "CPU Usage Monitor · line-realtime · plotly · pyplots.ai" at the top center. A prominent yellow circular marker with blue border highlights the latest data point (32.6%) with a text label above it. The left side features a white gradient fade effect indicating the scrolling direction, accompanied by a blue arrow and "← Data scrolls" annotation. A red "● LIVE" indicator appears in the lower right corner. The legend in the upper right shows "CPU Usage" and "Current: 32.6%". The data exhibits realistic CPU patterns with baseline oscillation around 35-40% and several spikes reaching up to ~75%.

Quality Score: 92/100

Criteria Checklist

Visual Quality (36/40 pts)

• VQ-01: Text Legibility (10/10) - Title at 32pt, axis labels at 24pt, ticks at 18pt, all perfectly readable
• VQ-02: No Overlap (8/8) - No overlapping text elements
• VQ-03: Element Visibility (7/8) - Line width 3 is appropriate, latest marker clearly visible at size 18
• VQ-04: Color Accessibility (5/5) - Blue color scheme is colorblind-safe, good contrast
• VQ-05: Layout Balance (4/5) - Good layout but slight imbalance with fade effect covering data on left
• VQ-06: Axis Labels (2/2) - Descriptive labels with units: "Time (seconds)", "CPU Usage (%)"
• VQ-07: Grid & Legend (0/2) - Grid is very subtle at alpha 0.1, legend well-placed; however the "← Data scrolls" arrow text appears slightly redundant with the fade effect

Spec Compliance (24/25 pts)

• SC-01: Plot Type (8/8) - Correct line chart type for real-time visualization
• SC-02: Data Mapping (5/5) - Time on X-axis, CPU usage on Y-axis correctly assigned
• SC-03: Required Features (5/5) - Sliding window effect (fade), latest value indicator, live indicator, scrolling direction arrow all present
• SC-04: Data Range (3/3) - Y-axis 0-105% shows all data, X-axis shows full 120 points
• SC-05: Legend Accuracy (2/2) - Legend correctly identifies "CPU Usage" and current value
• SC-06: Title Format (1/2) - Uses descriptive title with spec-id and library, but format is "CPU Usage Monitor · line-realtime · plotly · pyplots.ai" instead of "{spec-id} · {library} · pyplots.ai"

Data Quality (19/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows baseline oscillation, noise, and CPU spikes; demonstrates real-time monitoring scenario well
• DQ-02: Realistic Context (7/7) - CPU usage monitoring is a real, neutral, comprehensible scenario
• DQ-03: Appropriate Scale (5/5) - CPU values 0-100% with realistic patterns (base ~35%, spikes to ~75%)

Code Quality (10/10 pts)

• CQ-01: KISS Structure (3/3) - Linear structure: imports → data → plot → save
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42)
• CQ-03: Clean Imports (2/2) - Only numpy and plotly.graph_objects used
• CQ-04: No Deprecated API (1/1) - Uses current Plotly API
• CQ-05: Output Correct (1/1) - Saves as plot.png and plot.html

Library Features (3/5 pts)

• LF-01: Uses distinctive library features (3/5) - Uses go.Scatter with fill, add_annotation, add_vrect for fade effect, interactive HTML output; however could have leveraged more Plotly-specific features like animation frames

Strengths

• Excellent implementation of real-time visualization indicators (LIVE badge, current value marker, scrolling direction arrow)
• Creative use of vrect shapes to create fade effect indicating data scroll direction
• Well-structured code with realistic CPU usage data including oscillation pattern and spikes
• Good use of Plotly's annotation system for the arrow and text labels
• Outputs both static PNG and interactive HTML versions

Weaknesses

• Title format includes extra descriptor ("CPU Usage Monitor") before the spec-id, should follow exact "{spec-id} · {library} · pyplots.ai" format
• The fade effect using vrect covers some data points which slightly reduces readability of the left portion of the chart
• Grid alpha at 0.1 is perhaps too subtle; could be slightly more visible at 0.2-0.3

Verdict: APPROVED