feat(matplotlib): implement line-interactive

[github-actions]

Implementation: line-interactive - matplotlib

Implements the matplotlib version of line-interactive.

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

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a line chart of server response times over approximately 8 days (2024-01-01 to 2024-01-09). The main line is rendered in a deep blue color (#306998) with a linewidth of 2.5. Small blue circular markers appear at regular intervals (every 10th point) along the line. Three spike anomalies are highlighted with larger yellow markers and annotated labels showing their exact values: "205 ms", "212 ms", and "264 ms" - each with a yellow background and an arrow pointing to the data point. A gray dashed horizontal line marks the average response time (133 ms). A light yellow vertical span highlights a "Focus Region" between Jan 4-5. The title correctly follows the format "line-interactive · matplotlib · pyplots.ai". The legend in the upper left shows three items: Response Time, Average (133 ms), and Focus Region. An italic annotation at the bottom center reads "Interactive: Hover for values, scroll to zoom, drag to pan". The grid is subtle with alpha=0.3. X-axis shows dates with 30-degree rotation, Y-axis shows "Response Time (ms)".

Quality Score: 72/100

Criteria Checklist

Visual Quality (32/40 pts)

• VQ-01: Text Legibility (10/10) - Title 24pt, labels 20pt, ticks 16pt - all perfectly readable
• VQ-02: No Overlap (8/8) - No overlapping text elements
• VQ-03: Element Visibility (6/8) - Line and markers visible, but scatter markers at s=80 could be larger for 200 points; line width good at 2.5
• VQ-04: Color Accessibility (5/5) - Blue and yellow palette is colorblind-safe
• VQ-05: Layout Balance (3/5) - Good proportions but the interactive hint at bottom takes up space without adding real value in a static image
• VQ-06: Axis Labels (0/2) - "Time" on x-axis is generic, should be more descriptive like "Date" or "Datetime"
• VQ-07: Grid & Legend (0/2) - Legend positioned well, but the interactive hint annotation at the bottom is misleading for a static PNG

Spec Compliance (15/25 pts)

• SC-01: Plot Type (8/8) - Correct line chart type
• SC-02: Data Mapping (5/5) - X=datetime, Y=response time correctly mapped
• SC-03: Required Features (0/5) - Critical issue: This is a STATIC matplotlib image. The spec requires actual interactivity (hover tooltips, zoom/pan, range selection). Matplotlib cannot provide true browser-based interactivity in a PNG. The implementation adds a text hint about interactivity but provides no actual interactive functionality
• SC-04: Data Range (0/3) - All data visible, Y-axis range appropriate
• SC-05: Legend Accuracy (2/2) - Legend labels correct
• SC-06: Title Format (0/2) - Title correctly uses spec-id · library · pyplots.ai format

Data Quality (17/20 pts)

• DQ-01: Feature Coverage (6/8) - Shows time series with daily/weekly patterns, trend, and anomalies - good variety but could show more dramatic variation
• DQ-02: Realistic Context (7/7) - Server response time monitoring is a realistic, neutral scenario
• DQ-03: Appropriate Scale (4/5) - Response times 75-265ms are realistic for server metrics

Code Quality (8/10 pts)

• CQ-01: KISS Structure (3/3) - Flat structure, imports → data → plot → save
• CQ-02: Reproducibility (3/3) - np.random.seed(42) set
• CQ-03: Clean Imports (1/2) - pandas imported but could use matplotlib dates instead
• CQ-04: No Deprecated API (1/1) - No deprecated functions
• CQ-05: Output Correct (0/1) - Saves as plot.png correctly

Library Features (0/5 pts)

• LF-01: Uses distinctive library features (0/5) - Does not use matplotlib's interactive backend features (mpl_connect, widgets, callbacks). For a truly interactive plot, should use mpld3, mplcursors, or matplotlib widgets. Instead just shows a static line plot with a misleading "interactive" text hint

Strengths

• Excellent visual presentation with clear annotation of anomaly spikes
• Good use of color-coding with highlighted focus region and average reference line
• Realistic server monitoring scenario with daily/weekly patterns
• Clean, well-structured code following KISS principles
• Proper datetime handling with pandas date_range

Weaknesses

• Critical: Static PNG cannot fulfill the "interactive" specification - no actual hover tooltips, zoom, or pan functionality exists in the output
• The "Interactive: Hover for values..." annotation is misleading since the PNG has no interactivity
• Consider using mpld3, mplcursors, or matplotlib widgets if true interactivity is needed, OR acknowledge this is a static representation

Verdict: REJECTED

Reason: The specification explicitly requires interactive features (hover tooltips, zoom/pan, range selection). While the implementation creates a visually appealing static line chart, it fundamentally cannot meet the spec requirements as a static PNG. The text annotation claiming interactivity is misleading. Either the implementation needs to use matplotlib's interactive capabilities (mplcursors, mpld3 export to HTML) or acknowledge that matplotlib produces static output for this spec.

[github-actions]

🔧 Repair Attempt 1/3

Applied fixes based on AI review feedback.

Status: Repair completed, re-triggering review...

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

The plot displays a time series of server response times over approximately 9 days (2024-01-01 to 2024-01-09). The main line is rendered in blue (#306998) with a linewidth of 2.5, showing hourly response time fluctuations between ~75ms and ~265ms. Blue scatter points (every 5th data point) serve as hover targets with white edges. Three anomaly spikes are highlighted with red triangular markers and labeled red badges showing "Anomaly: 205 ms", "Anomaly: 212 ms", and "Anomaly: 264 ms". A gray dashed horizontal line indicates the average (133 ms). A teal/green shaded region labeled "Zoom Region (use scroll/drag)" demonstrates the range selection feature. A yellow tooltip demonstration shows "Time: 2024-01-04 03:00, Response: 161.9 ms". The title correctly uses "line-interactive · matplotlib · pyplots.ai" format. A footer bar explains interactive controls. The legend in the upper left shows "mplcursors enabled" with entries for Response Time, Data Points, and Average.

Quality Score: 88/100

Criteria Checklist

Visual Quality (35/40 pts)

• VQ-01: Text Legibility (10/10) - Title 24pt, axis labels 20pt, tick labels 16pt, all perfectly readable
• VQ-02: No Overlap (8/8) - No overlapping text elements, annotations well-spaced
• VQ-03: Element Visibility (7/8) - Line and scatter points visible; scatter points could be slightly larger for better hover targeting but acceptable
• VQ-04: Color Accessibility (5/5) - Blue primary color, red for anomalies, yellow for tooltips - colorblind-safe palette
• VQ-05: Layout Balance (3/5) - Good overall but interactive controls footer text slightly overlaps with x-axis label "Time"
• VQ-06: Axis Labels (2/2) - "Response Time (ms)" with units, "Time" is descriptive
• VQ-07: Grid & Legend (0/2) - Legend well-placed but grid alpha at 0.3 is slightly strong; legend has "mplcursors enabled" title which is informative but takes up space

Spec Compliance (23/25 pts)

• SC-01: Plot Type (8/8) - Correct interactive line chart with hover capability
• SC-02: Data Mapping (5/5) - X=datetime, Y=response time correctly mapped
• SC-03: Required Features (4/5) - Hover tooltips via mplcursors ✓, zoom/pan described but static PNG cannot show ✓, range selection region shown ✓, reset hint shown ✓; however smooth animations not demonstrable in static image
• SC-04: Data Range (3/3) - All data visible, axes scaled appropriately
• SC-05: Legend Accuracy (1/2) - Legend accurate but "Data Points (hover enabled)" label slightly verbose
• SC-06: Title Format (2/2) - "line-interactive · matplotlib · pyplots.ai" correct format

Data Quality (18/20 pts)

• DQ-01: Feature Coverage (7/8) - Shows daily/weekly patterns, anomaly spikes, trend, average line; comprehensive but could show more dramatic pattern variation
• DQ-02: Realistic Context (7/7) - Server response time monitoring is an excellent real-world scenario
• DQ-03: Appropriate Scale (4/5) - Response times 75-265ms realistic; base of 120ms reasonable for web servers

Code Quality (9/10 pts)

• CQ-01: KISS Structure (2/3) - Generally follows imports → data → plot → save, but has a function definition (on_add) for mplcursors callback which is necessary but breaks pure KISS
• CQ-02: Reproducibility (3/3) - np.random.seed(42) set
• CQ-03: Clean Imports (2/2) - All imports used (matplotlib, mplcursors, numpy, pandas)
• CQ-04: No Deprecated API (1/1) - No deprecated functions
• CQ-05: Output Correct (1/1) - Saves as 'plot.png'

Library Features (3/5 pts)

• LF-01: Uses distinctive library features (3/5) - Uses mplcursors for true interactivity which is good, but this is an external library extending matplotlib rather than core matplotlib features; good use of annotations and axvspan

Strengths

• Excellent use of mplcursors library to provide true hover interactivity beyond static matplotlib
• Well-designed demo tooltip annotation showing what users would see on hover
• Realistic server monitoring data scenario with daily/weekly patterns and anomaly detection
• Three distinct anomaly annotations with clear visual hierarchy (red triangular markers)
• Helpful interactive controls footer explaining zoom/pan/reset functionality
• Good visual demonstration of range selection region with teal highlight

Weaknesses

• The interactive controls footer text overlaps slightly with the x-axis "Time" label - needs more bottom margin separation
• Grid alpha at 0.3 is slightly too prominent for an already busy chart with multiple annotations
• Legend could be more compact - "Data Points (hover enabled)" is verbose and "mplcursors enabled" title adds clutter

Verdict: REJECTED

Score of 88/100 is below the 90-point threshold for automatic approval. The implementation is very close to approval quality with good use of mplcursors for true interactivity. The main issues are minor layout problems with the footer overlapping the x-axis label, and the grid/legend could be refined for better visual clarity.

[github-actions]

🔧 Repair Attempt 2/3

Applied fixes based on AI review feedback.

Status: Repair completed, re-triggering review...

---

🤖 impl-repair

[claude]

AI Review - Attempt 3/3

Image Description

The plot displays an interactive line chart showing server response time metrics over ~9 days (Jan 1-9, 2024). The visualization features:

• A blue line (#306998) with thickness 2.5 showing response time patterns with daily/weekly cycles
• Blue scatter points at every 5th data point serving as hover targets with white edge outlines
• Three red triangle markers (^) highlighting anomaly spikes at 205ms, 212ms, and 264ms with labeled annotations
• A gray dashed horizontal average line at 133ms
• A light teal shaded "Zoom Region" demonstrating range selection capability
• A yellow tooltip demonstration showing datetime and response value
• The title correctly formatted as "line-interactive · matplotlib · pyplots.ai"
• A footer explaining interactive controls (hover, scroll zoom, drag pan, home reset)
• Legend with mplcursors indicator and data series labels

Quality Score: 88/100

Criteria Checklist

Visual Quality (34/40 pts)

• VQ-01: Text Legibility (10/10) - Title 24pt, labels 20pt, ticks 16pt - all perfectly readable
• VQ-02: No Overlap (8/8) - No overlapping text elements, annotations well-positioned
• VQ-03: Element Visibility (6/8) - Line and scatter points clearly visible, though scatter at s=100 could be larger for 200 points
• VQ-04: Color Accessibility (5/5) - Blue, red, teal colors are colorblind-friendly
• VQ-05: Layout Balance (3/5) - Good overall but footer text overlaps with x-axis label "Time"
• VQ-06: Axis Labels (2/2) - Y-axis has "Response Time (ms)" with units
• VQ-07: Grid & Legend (0/2) - Legend shows "mplcursors enabled" which is technical/confusing; grid alpha=0.2 is good

Spec Compliance (22/25 pts)

• SC-01: Plot Type (8/8) - Correct interactive line chart
• SC-02: Data Mapping (5/5) - Datetime on X, numeric values on Y
• SC-03: Required Features (4/5) - Has hover tooltips (via mplcursors), demonstrates zoom region visually, but zoom/pan only work in interactive mode not in static PNG
• SC-04: Data Range (3/3) - All data visible within axes
• SC-05: Legend Accuracy (0/2) - "mplcursors enabled" in legend is technical jargon, not meaningful to users
• SC-06: Title Format (2/2) - Correct format: "line-interactive · matplotlib · pyplots.ai"

Data Quality (20/20 pts)

• DQ-01: Feature Coverage (8/8) - Shows daily patterns, weekly cycles, anomaly spikes, trend - excellent variety
• DQ-02: Realistic Context (7/7) - Server response time monitoring is a perfect real-world scenario
• DQ-03: Appropriate Scale (5/5) - Response times 75-265ms are realistic for web services

Code Quality (9/10 pts)

• CQ-01: KISS Structure (2/3) - Has a function decorator @cursor.connect("add") which breaks pure linear flow
• CQ-02: Reproducibility (3/3) - Uses np.random.seed(42)
• CQ-03: Clean Imports (2/2) - All imports used
• CQ-04: No Deprecated API (1/1) - Modern matplotlib API
• CQ-05: Output Correct (1/1) - Saves as plot.png

Library Features (3/5 pts)

• LF-01: Uses distinctive library features (3/5) - Uses mplcursors for interactivity which is good, but interactivity doesn't work in static PNG output

Strengths

• Excellent realistic data scenario with server response time monitoring including daily/weekly patterns and anomaly spikes
• Smart use of mplcursors library to add hover tooltips, demonstrating matplotlib's extensibility
• Well-designed visual demonstration of hover tooltip with yellow annotation showing what users would see
• Good visual indication of zoom region with teal shading and instructional text
• Proper anomaly highlighting with red triangle markers and labeled annotations
• Text sizing follows guidelines perfectly (24pt title, 20pt labels, 16pt ticks)

Weaknesses

• Legend shows "mplcursors enabled" which is technical implementation detail, not user-meaningful information
• Footer text partially overlaps with the x-axis "Time" label area
• The @cursor.connect("add") decorator introduces a function, breaking the KISS principle of pure linear flow

Verdict: APPROVED

This is Attempt 3/3. The implementation scores 88/100 which is above the 50-point threshold for acceptance after maximum attempts. The plot effectively demonstrates interactive concepts in a static format through visual annotations, uses realistic data, and follows matplotlib best practices. The minor issues (legend text, small overlap, decorator function) do not significantly impact the overall quality.

[github-actions]

AI Review - Final Status

Score: 88/100 (Acceptable)

After 3 repair attempts, matplotlib reached 88/100.

Score ≥ 50 is acceptable for the repository. Merging.

---

🤖 impl-review