feat(plotly): implement line-interactive

[github-actions]

Implementation: line-interactive - plotly

Implements the plotly version of line-interactive.

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

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a line chart showing "Server Metrics · line-interactive · plotly · pyplots.ai" as the title. The chart uses a blue line (#306998) to show CPU Usage (%) over 7 days (Jan 1-7, 2024). The Y-axis ranges from 0 to 100% with clear "CPU Usage (%)" label. The X-axis shows "Date & Time" with daily tick marks. The data exhibits daily cyclical patterns with peaks reaching ~65-75% and troughs around 10-30%. Notable interactive features visible: range selector buttons (1d, 3d, All) in top-left with "All" highlighted in yellow, and a range slider at the bottom showing a miniature version of the full dataset. The layout is clean with a white background, subtle grid lines, and well-proportioned margins.

Quality Score: 93/100

Criteria Checklist

Visual Quality (38/40 pts)

• VQ-01: Text Legibility (10/10) - Title at 28pt, axis labels at 22pt, tick fonts at 16pt - all clearly readable
• VQ-02: No Overlap (8/8) - No overlapping text elements anywhere
• VQ-03: Element Visibility (8/8) - Line width of 2.5 perfectly suited for 168 data points, shows patterns clearly
• VQ-04: Color Accessibility (5/5) - Single blue line, no colorblind issues
• VQ-05: Layout Balance (5/5) - Good proportions, plot fills ~60% of canvas with range slider below
• VQ-06: Axis Labels (2/2) - "CPU Usage (%)" with units, "Date & Time" descriptive
• VQ-07: Grid & Legend (0/2) - Grid is subtle (alpha 0.1), but no legend shown for the "CPU Usage" trace

Spec Compliance (23/25 pts)

• SC-01: Plot Type (8/8) - Correct interactive line chart
• SC-02: Data Mapping (5/5) - X=datetime, Y=numeric correctly assigned
• SC-03: Required Features (5/5) - Hover tooltips, zoom, pan, range selector, range slider all implemented
• SC-04: Data Range (3/3) - Y-axis 0-105 shows all data including spikes
• SC-05: Legend Accuracy (0/2) - No visible legend in the chart (trace has name="CPU Usage" but legend not displayed)
• SC-06: Title Format (2/2) - Uses correct format with spec-id · library · pyplots.ai (includes contextual "Server Metrics")

Data Quality (20/20 pts)

• DQ-01: Feature Coverage (8/8) - Shows daily cycles, upward trend, noise, AND anomaly spikes - excellent coverage of time series patterns
• DQ-02: Realistic Context (7/7) - Server CPU monitoring is a real, neutral, commonly understood scenario
• DQ-03: Appropriate Scale (5/5) - CPU usage 5-100% with realistic base ~35%, daily variations of ±20%, perfect

Code Quality (7/10 pts)

• CQ-01: KISS Structure (3/3) - Imports → Data → Plot → Save structure, no functions/classes
• CQ-02: Reproducibility (3/3) - np.random.seed(42) used
• CQ-03: Clean Imports (0/2) - pandas imported but only used for date_range; numpy could do this
• CQ-04: No Deprecated API (1/1) - Modern Plotly API used
• CQ-05: Output Correct (1/1) - Saves plot.png and plot.html correctly

Library Features (5/5 pts)

• LF-01: Uses distinctive library features (5/5) - Excellent use of Plotly's interactive features: rangeslider, rangeselector buttons, hovertemplate with custom formatting, modebar customization, drag modes

Strengths

• Excellent use of Plotly's interactive features (rangeslider, rangeselector, hover templates)
• Well-crafted realistic data with daily cycles, trend, noise, and anomaly spikes
• Perfect title format following pyplots conventions
• Clean visual design with appropriate text sizes and layout
• Good use of hovertemplate for formatted datetime and percentage display

Weaknesses

• Missing visible legend in the plot (trace has name but legend not shown - add showlegend=True or configure legend position)
• Pandas import is unnecessary - could use numpy for date generation or just use native Python datetime

Verdict: APPROVED