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

## 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

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

---
Generated with [Claude Code](https://claude.com/claude-code) `/update`
command

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: MarkusNeusinger

plots/area-basic/implementations/plotly.py

@@ -1,6 +1,6 @@
 """ pyplots.ai
 area-basic: Basic Area Chart
-Library: plotly 6.5.0 | Python 3.13.11
+Library: plotly 6.5.2 | Python 3.14.2
 Quality: 92/100 | Created: 2025-12-23
 """
 
@@ -19,7 +19,7 @@
 weekly_pattern = 1000 * np.sin(np.arange(30) * 2 * np.pi / 7)
 noise = np.random.randn(30) * 500
 visitors = base + trend + weekly_pattern + noise
-visitors = np.maximum(visitors, 2000)  # Ensure no negative values
+visitors = np.maximum(visitors, 2000).astype(int)
 
 # Create figure
 fig = go.Figure()
@@ -30,13 +30,32 @@
         y=visitors,
         mode="lines",
         fill="tozeroy",
-        fillcolor="rgba(48, 105, 152, 0.4)",
-        line={"color": "#306998", "width": 3},
+        fillcolor="rgba(48, 105, 152, 0.35)",
+        line={"color": "#306998", "width": 3, "shape": "spline"},
         name="Daily Visitors",
+        hovertemplate="<b>%{x|%b %d, %Y}</b><br>Visitors: %{y:,}<extra></extra>",
     )
 )
 
-# Layout with proper sizing for 4800x2700 px
+# Annotate peak traffic day
+peak_idx = int(np.argmax(visitors))
+fig.add_annotation(
+    x=dates[peak_idx],
+    y=visitors[peak_idx],
+    text=f"Peak: {visitors[peak_idx]:,}",
+    showarrow=True,
+    arrowhead=2,
+    arrowsize=1.5,
+    ax=0,
+    ay=-40,
+    font={"size": 16, "color": "#306998"},
+    bordercolor="#306998",
+    borderwidth=1.5,
+    borderpad=4,
+    bgcolor="rgba(255, 255, 255, 0.85)",
+)
+
+# Layout
 fig.update_layout(
     title={
         "text": "Daily Website Visitors · area-basic · plotly · pyplots.ai",
@@ -45,26 +64,31 @@
         "xanchor": "center",
     },
     xaxis={
-        "title": {"text": "Date", "font": {"size": 22}},
+        "title": {"text": "Date (January 2024)", "font": {"size": 22}},
         "tickfont": {"size": 18},
         "showgrid": True,
         "gridwidth": 1,
-        "gridcolor": "rgba(0, 0, 0, 0.1)",
+        "gridcolor": "rgba(0, 0, 0, 0.15)",
+        "dtick": 7 * 24 * 60 * 60 * 1000,
+        "tickformat": "%b %d",
     },
     yaxis={
         "title": {"text": "Visitors (daily count)", "font": {"size": 22}},
         "tickfont": {"size": 18},
         "showgrid": True,
         "gridwidth": 1,
-        "gridcolor": "rgba(0, 0, 0, 0.1)",
+        "gridcolor": "rgba(0, 0, 0, 0.15)",
+        "tickformat": ",",
     },
     template="plotly_white",
     showlegend=False,
     margin={"l": 80, "r": 40, "t": 80, "b": 60},
+    hovermode="x unified",
 )
 
 # Save as PNG (4800x2700 px)
 fig.write_image("plot.png", width=1600, height=900, scale=3)
 
-# Save interactive HTML
+# Save interactive HTML with range slider for exploration
+fig.update_layout(xaxis_rangeslider_visible=True)
 fig.write_html("plot.html")

plots/area-basic/metadata/plotly.yaml

@@ -1,49 +1,57 @@
 library: plotly
 specification_id: area-basic
 created: '2025-12-23T00:46:42Z'
-updated: '2025-12-23T00:50:26Z'
-generated_by: claude-opus-4-5-20251101
+updated: '2026-02-11T22:26:40Z'
+generated_by: claude-opus-4-6
 workflow_run: 20447954578
 issue: 0
-python_version: 3.13.11
-library_version: 6.5.0
+python_version: 3.14.2
+library_version: 6.5.2
 preview_url: https://storage.googleapis.com/pyplots-images/plots/area-basic/plotly/plot.png
 preview_thumb: https://storage.googleapis.com/pyplots-images/plots/area-basic/plotly/plot_thumb.png
 preview_html: https://storage.googleapis.com/pyplots-images/plots/area-basic/plotly/plot.html
 quality_score: 92
 impl_tags:
   dependencies: []
-  techniques: []
+  techniques:
+  - annotations
+  - hover-tooltips
+  - html-export
   patterns:
-    - data-generation
-  dataprep: []
+  - data-generation
+  dataprep:
+  - time-series
   styling:
-    - alpha-blending
+  - alpha-blending
+  - grid-styling
 review:
   strengths:
-  - Excellent title format following the exact spec-id · library · pyplots.ai convention
-  - Clean, realistic data simulation with weekly patterns and upward trend demonstrating
-    area chart utility
-  - Proper semi-transparent fill (alpha 0.4) as recommended in spec
-  - Good font sizing following the library guidelines (28pt title, 22pt labels, 18pt
-    ticks)
-  - Correct output dimensions (4800x2700 via 1600x900 scale=3)
-  - HTML output also generated for interactive viewing
+  - 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 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 interactivity strengths
   weaknesses:
-  - X-axis label could be more descriptive (e.g., "Date (January 2024)" instead of
-    just "Date")
-  - Missing hover template customization which is a key Plotly strength
-  - Could benefit from range slider or zoom capabilities to showcase Plotly interactivity
-  image_description: The plot displays a basic area chart showing daily website visitors
-    over January 2024 (30 days). The x-axis shows dates from Jan 2, 2024 to Jan 29,
-    2024, and the y-axis shows "Visitors (daily count)" ranging from 0 to approximately
-    7000. The area below the line is filled with a semi-transparent blue color (rgba
-    blue, ~0.4 alpha), while the line itself is a darker blue (#306998). The data
-    exhibits a clear weekly cyclical pattern (peaks and troughs repeating roughly
-    every 7 days) along with an overall upward trend from ~5000 to ~7000 visitors.
-    The title "Daily Website Visitors · area-basic · plotly · pyplots.ai" is centered
-    at the top. The background uses the plotly_white template with subtle light gray
-    gridlines. The layout is clean with good margins and no overlapping elements.
+  - 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 would better
+    showcase the area chart strengths
+  - Library features underutilized — could leverage Plotly-specific features like
+    fill gradient pattern, range selector buttons, or spike lines for the static output
+  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.'
   criteria_checklist:
     visual_quality:
       score: 37
@@ -54,47 +62,47 @@ review:
         score: 10
         max: 10
         passed: true
-        comment: Title at 28pt, axis titles at 22pt, tick labels at 18pt - all perfectly
-          readable
+        comment: Title at 28pt, axis labels at 22pt, tick labels at 18pt — all clearly
+          readable at 4800x2700
       - id: VQ-02
         name: No Overlap
         score: 8
         max: 8
         passed: true
-        comment: No overlapping text anywhere, dates are well-spaced
+        comment: No overlapping text elements; annotation well-placed away from line
       - id: VQ-03
         name: Element Visibility
         score: 8
         max: 8
         passed: true
-        comment: Line width of 3 is appropriate, area fill clearly visible with good
-          alpha
+        comment: Line width 3 well-suited; spline smoothing makes 30-point series
+          clear; fill area visible
       - id: VQ-04
         name: Color Accessibility
         score: 5
         max: 5
         passed: true
-        comment: Single blue color scheme, no colorblind concerns
+        comment: Single-series blue chart, no colorblind concerns, good contrast
       - id: VQ-05
         name: Layout Balance
-        score: 5
+        score: 4
         max: 5
         passed: true
-        comment: Good margins, well-proportioned plot area
+        comment: Good canvas utilization ~60-70%; annotation slightly crowded at top-right
+          edge
       - id: VQ-06
         name: Axis Labels
-        score: 1
+        score: 2
         max: 2
         passed: true
-        comment: Y-axis has units "(daily count)" but X-axis just says "Date" without
-          format specification
+        comment: 'Descriptive labels with context: Date (January 2024) and Visitors
+          (daily count)'
       - id: VQ-07
         name: Grid & Legend
         score: 0
         max: 2
-        passed: true
-        comment: Grid is subtle at alpha 0.1, but no legend shown (showlegend=False)
-          - for a single series this is acceptable but loses points
+        passed: false
+        comment: Grid subtle at alpha 0.15, but legend disabled entirely (showlegend=False)
     spec_compliance:
       score: 25
       max: 25
@@ -104,62 +112,63 @@ review:
         score: 8
         max: 8
         passed: true
-        comment: Correct area chart using fill="tozeroy"
+        comment: Correct area chart using go.Scatter with fill=tozeroy
       - id: SC-02
         name: Data Mapping
         score: 5
         max: 5
         passed: true
-        comment: Datetime on x-axis, numeric visitors on y-axis
+        comment: X is datetime, Y is numeric visitors — correctly assigned
       - id: SC-03
         name: Required Features
         score: 5
         max: 5
         passed: true
-        comment: Semi-transparent fill (0.4), gridlines present, clear axis labels
+        comment: Semi-transparent fill, gridlines, clear axis labels, smooth spline
+          line
       - id: SC-04
         name: Data Range
         score: 3
         max: 3
         passed: true
-        comment: Y-axis starts at 0, all data visible
+        comment: All data visible, y-axis starts at 0 appropriate for area charts
       - id: SC-05
         name: Legend Accuracy
         score: 2
         max: 2
         passed: true
-        comment: N/A for single series, name is descriptive
+        comment: Single series named Daily Visitors, accurate in hover
       - id: SC-06
         name: Title Format
         score: 2
         max: 2
         passed: true
-        comment: Correctly formatted as "Daily Website Visitors · area-basic · plotly
-          · pyplots.ai"
+        comment: 'Matches required format: spec-id · library · pyplots.ai'
     data_quality:
       score: 18
       max: 20
       items:
       - id: DQ-01
         name: Feature Coverage
-        score: 7
+        score: 6
         max: 8
         passed: true
-        comment: Shows trend, weekly pattern, and variance - good demonstration of
-          area chart strengths. Could show more dramatic volume changes.
+        comment: Shows weekly cyclical pattern, upward trend, and variability; only
+          30 points at low end of spec range
       - id: DQ-02
         name: Realistic Context
         score: 7
         max: 7
         passed: true
-        comment: Website traffic is a perfect real-world scenario for area charts
+        comment: Daily website visitors is a realistic neutral business scenario from
+          spec examples
       - id: DQ-03
         name: Appropriate Scale
-        score: 4
+        score: 5
         max: 5
         passed: true
-        comment: Values 4000-7000 are plausible for a mid-size website, though somewhat
-          high minimum
+        comment: Values 2000-7135 daily visitors perfectly realistic for small-to-medium
+          website
     code_quality:
       score: 10
       max: 10
@@ -169,41 +178,41 @@ review:
         score: 3
         max: 3
         passed: true
-        comment: 'Simple linear flow: imports → data → plot → save'
+        comment: Clean Imports-Data-Plot-Save structure, no functions or classes
       - id: CQ-02
         name: Reproducibility
         score: 3
         max: 3
         passed: true
-        comment: np.random.seed(42) is set
+        comment: np.random.seed(42) set at top
       - id: CQ-03
         name: Clean Imports
         score: 2
         max: 2
         passed: true
-        comment: Only numpy, pandas, plotly.graph_objects used
+        comment: 'All imports used: numpy, pandas, plotly.graph_objects'
       - id: CQ-04
         name: No Deprecated API
         score: 1
         max: 1
         passed: true
-        comment: Uses current Plotly API
+        comment: Uses current plotly API
       - id: CQ-05
         name: Output Correct
         score: 1
         max: 1
         passed: true
-        comment: Saves as plot.png and plot.html
+        comment: Saves as plot.png with 1600x900 scale=3 = 4800x2700
     library_features:
       score: 2
       max: 5
       items:
       - id: LF-01
-        name: Uses distinctive library features
+        name: Distinctive Features
         score: 2
         max: 5
         passed: false
-        comment: Uses basic go.Scatter with fill, but doesn't leverage Plotly's interactive
-          features like hover templates, range sliders, or annotations that would
-          enhance the visualization
+        comment: Uses hovertemplate and spline shape (Plotly-specific), but HTML export
+          with range slider only applied after PNG save. Could better leverage Plotly
+          features in static output.
   verdict: APPROVED