update(area-basic): plotly — comprehensive quality review

[MarkusNeusinger]

Summary

Updated plotly implementation for area-basic.

Changes

• Added spline line interpolation for smoother curves
• Added rich hover template with formatted dates/numbers
• Annotated peak traffic day with bordered label
• Added range slider for interactive exploration in HTML
• Added weekly x-axis ticks, comma-formatted y-axis

Test Plan

• Preview images uploaded to GCS staging
• Implementation file passes ruff format/check
• Metadata YAML updated with current versions
• Automated review triggered

---

Generated with Claude Code /update command

[claude]

AI Review - Attempt 1/3

Image Description

The plot displays a basic area chart showing daily website visitors across January 2024. A smooth spline line in dark blue (#306998) traces the data with a semi-transparent blue fill (alpha ~0.35) extending down to the x-axis. The x-axis is labeled "Date (January 2024)" with weekly tick marks at Jan 07, Jan 14, Jan 21, and Jan 28. The y-axis is labeled "Visitors (daily count)" with comma-formatted ticks from 0 to 7,000+. The title "Daily Website Visitors · area-basic · plotly · pyplots.ai" is centered at the top. A bordered annotation "Peak: 7,135" with an arrow points to the highest data point near Jan 29. The background uses plotly_white template with subtle gray gridlines. The data shows a clear weekly cyclical pattern (dips roughly every 7 days) with an overall upward trend. Layout is balanced with good margins and no overlapping elements.

Quality Score: 92/100

Criteria Checklist

Visual Quality (37/40)

• VQ-01: Text Legibility (10/10) - Title at 28pt, axis labels at 22pt, tick labels at 18pt — all clearly readable at 4800×2700
• VQ-02: No Overlap (8/8) - No overlapping text elements; annotation is well-placed in the upper right away from the line
• VQ-03: Element Visibility (8/8) - Line width of 3 is well-suited; spline interpolation makes the 30-point series smooth and clear; fill area clearly visible
• VQ-04: Color Accessibility (5/5) - Single-series chart using blue (#306998) — no colorblind concerns; good contrast against white background
• VQ-05: Layout Balance (4/5) - Good canvas utilization with plot filling ~60-70% of canvas; margins are balanced; slight deduction as the annotation is positioned at the very top-right edge near the plot boundary
• VQ-06: Axis Labels (2/2) - Both axes have descriptive labels with context: "Date (January 2024)" and "Visitors (daily count)"
• VQ-07: Grid & Legend (0/2) - Grid is subtle and well-styled (alpha 0.15), but legend is disabled (showlegend=False). While acceptable for a single series, there is no legend at all — with a single named trace "Daily Visitors", showing a legend would complete the chart

Spec Compliance (25/25)

• SC-01: Plot Type (8/8) - Correct area chart using go.Scatter with fill="tozeroy"
• SC-02: Data Mapping (5/5) - X is datetime (dates), Y is numeric (visitors) — correctly assigned
• SC-03: Required Features (5/5) - Semi-transparent fill (0.35 alpha), gridlines present, clear axis labels with units, smooth spline line. All spec notes are addressed
• SC-04: Data Range (3/3) - Axes show all data points; y-axis starts at 0 which is appropriate for area charts
• SC-05: Legend Accuracy (2/2) - Single series, trace named "Daily Visitors" — accurate (shown in hover)
• SC-06: Title Format (2/2) - "Daily Website Visitors · area-basic · plotly · pyplots.ai" matches required format

Data Quality (18/20)

• DQ-01: Feature Coverage (6/8) - Shows weekly cyclical pattern, upward trend, and variability. Demonstrates area emphasis well. Minor deduction: only 30 data points (spec says 20-500, so valid, but more points would showcase the area fill better and demonstrate the chart's strength with denser data)
• DQ-02: Realistic Context (7/7) - Daily website visitors is a realistic, neutral business scenario directly from the spec's examples
• DQ-03: Appropriate Scale (5/5) - Values range from ~2,000 to ~7,135 daily visitors — perfectly realistic for a small-to-medium website

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) - Clean Imports → Data → Plot → Save structure, no functions or classes
• CQ-02: Reproducibility (3/3) - np.random.seed(42) set at the top
• CQ-03: Clean Imports (2/2) - All imports (numpy, pandas, plotly.graph_objects) are used
• CQ-04: No Deprecated API (1/1) - Uses current plotly API
• CQ-05: Output Correct (1/1) - Saves as plot.png with correct dimensions (1600×900 × scale=3 = 4800×2700)

Library Features (2/5)

• LF-01: Distinctive Features (2/5) - Uses custom hovertemplate (Plotly-specific), spline line shape, and saves interactive HTML with range slider. However, the HTML export is done after the static image save, meaning the range slider is added post-PNG. The interactive features don't show in the static output. Still, the hovertemplate and spline smoothing are good Plotly-specific touches. A gradient fill effect (using scatter fill patterns or a secondary gradient trace) would have scored higher.

Strengths

• Excellent data generation with realistic weekly traffic patterns and upward trend using sinusoidal component
• Clean, professional visual design with well-chosen blue color from the pyplots palette
• Peak annotation adds analytical value and showcases Plotly's annotation capabilities
• Proper font sizing throughout (28/22/18pt) following library guidelines exactly
• Semi-transparent fill at 0.35 alpha balances readability and visual weight perfectly
• Interactive HTML export with range slider demonstrates Plotly's interactivity strengths

Weaknesses

• No legend displayed — even for a single series, a small legend would improve chart completeness
• Only 30 data points is at the low end of the spec range; denser data (e.g., 90-180 points for hourly/daily over months) would better showcase the area chart's strengths
• Library features underutilized — could leverage Plotly-specific features like fill gradient pattern, range selector buttons, or spike lines for the static output

Verdict: APPROVED

[Copilot]

Pull request overview

This PR updates the Plotly implementation for the area-basic plot spec to improve interactivity and presentation quality in line with pyplots’ per-plot implementation pattern.

Changes:

• Smoothed the area line (spline interpolation) and enriched hover content (formatted dates and comma-separated values).
• Added a peak-day annotation and enabled an HTML range slider for interactive exploration.
• Updated Plotly metadata to reflect new runtime/library versions.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
plots/area-basic/metadata/plotly.yaml	Updates implementation metadata (versions/timestamps/quality score field).
plots/area-basic/implementations/plotly.py	Enhances the Plotly area chart output (smoothing, hover template, annotation, axis formatting, range slider).

[Copilot]

The header line Quality: /100 is missing the numeric quality score. If anything parses this header (or if readers rely on it), this will be ambiguous; populate the score (e.g., Quality: 92/100) and keep the rest of the header fields consistent with the project’s standard header format.

[Copilot]

quality_score is set to null, but other plot metadata files use an integer score. If downstream tooling expects a numeric score (for filtering/quality gates), this will likely break; set this to the actual review score (or keep the previous score until the automated review updates it).

[Copilot]

Within this file, created uses an ISO ...Z format while updated uses ...+00:00. If these timestamps are parsed as strings elsewhere, mixing formats can cause inconsistencies; consider keeping updated in the same timestamp format as created for this metadata file.