update(area-basic): bokeh — comprehensive quality review (#4174)

## Summary

Updated **bokeh** implementation for **area-basic**.

### Changes
- Added HoverTool with formatted date/visitor tooltips
- Added invisible scatter layer for precise hover targets
- Improved y-axis label with units "(count)"

## 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/bokeh.py

@@ -1,13 +1,13 @@
 """ pyplots.ai
 area-basic: Basic Area Chart
-Library: bokeh 3.8.1 | Python 3.13.11
+Library: bokeh 3.8.2 | Python 3.14.2
 Quality: 92/100 | Created: 2025-12-23
 """
 
 import numpy as np
 import pandas as pd
 from bokeh.io import export_png, output_file, save
-from bokeh.models import ColumnDataSource
+from bokeh.models import ColumnDataSource, HoverTool
 from bokeh.plotting import figure
 
 
@@ -29,7 +29,7 @@
     height=2700,
     title="area-basic · bokeh · pyplots.ai",
     x_axis_label="Date",
-    y_axis_label="Daily Visitors",
+    y_axis_label="Daily Visitors (count)",
     x_axis_type="datetime",
 )
 
@@ -39,6 +39,17 @@
 # Line on top for clear edge
 p.line(x="date", y="visitors", source=source, line_color="#306998", line_width=5)
 
+# Invisible scatter for hover targets
+p.scatter(x="date", y="visitors", source=source, size=20, fill_alpha=0, line_alpha=0)
+
+# HoverTool for interactive exploration
+hover = HoverTool(
+    tooltips=[("Date", "@date{%b %d, %Y}"), ("Visitors", "@visitors{0,0}")],
+    formatters={"@date": "datetime"},
+    mode="vline",
+)
+p.add_tools(hover)
+
 # Styling for 4800x2700 px - scaled up for large canvas
 p.title.text_font_size = "48pt"
 p.xaxis.axis_label_text_font_size = "36pt"

plots/area-basic/metadata/bokeh.yaml

@@ -1,99 +1,106 @@
 library: bokeh
 specification_id: area-basic
 created: '2025-12-23T00:48:55Z'
-updated: '2025-12-23T01:22:02Z'
-generated_by: claude-opus-4-5-20251101
+updated: '2026-02-11T22:26:52Z'
+generated_by: claude-opus-4-6
 workflow_run: 20447970023
 issue: 0
-python_version: 3.13.11
-library_version: 3.8.1
+python_version: 3.14.2
+library_version: 3.8.2
 preview_url: https://storage.googleapis.com/pyplots-images/plots/area-basic/bokeh/plot.png
 preview_thumb: https://storage.googleapis.com/pyplots-images/plots/area-basic/bokeh/plot_thumb.png
 preview_html: https://storage.googleapis.com/pyplots-images/plots/area-basic/bokeh/plot.html
 quality_score: 92
 impl_tags:
   dependencies: []
-  techniques: []
+  techniques:
+  - hover-tooltips
+  - html-export
   patterns:
-    - data-generation
-    - columndatasource
-  dataprep: []
+  - data-generation
+  - columndatasource
+  dataprep:
+  - time-series
   styling:
-    - alpha-blending
-    - grid-styling
+  - alpha-blending
+  - grid-styling
 review:
   strengths:
-  - Excellent text sizing scaled appropriately for 4800x2700 canvas
-  - Clean KISS code structure with proper seed for reproducibility
-  - Realistic website traffic data with believable weekly patterns and upward trend
-  - Proper use of Bokeh varea() for area fill with line overlay for definition
-  - Semi-transparent fill (0.4) matches spec recommendation (0.3-0.5)
-  - Y-axis correctly starts at 0 for honest area representation
+  - Excellent text scaling for 4800x2700 canvas with font sizes well above minimums
+  - 'Good use of Bokeh-specific features: ColumnDataSource, varea, HoverTool with
+    vline mode, invisible scatter for hover targets'
+  - Realistic data generation with trend + weekly seasonality + noise components
+  - Clean code structure following KISS principle with proper seed for reproducibility
+  - Semi-transparent fill at alpha 0.4 provides good readability while maintaining
+    visual weight
+  - Y-axis properly starts at 0 to avoid misleading area representation
+  - Dual export (PNG + HTML) leverages Bokeh interactive capabilities
   weaknesses:
-  - Missing HoverTool for interactivity - Bokeh key strength is interactive exploration
-  - Axis labels lack units (could be Daily Visitors count or similar)
-  - Large empty space below data since values range 4000-7000 but y starts at 0
-  image_description: The plot displays a basic area chart showing daily website visitors
-    over January 2024. The filled area uses a steel blue color (#306998) with 40%
-    transparency, creating visual weight that emphasizes the magnitude of visitor
-    counts. A solid line traces the top edge of the area for clear definition. The
-    x-axis shows dates from Jan 01, 2024 to Feb 01, with clear date labels. The y-axis
-    displays "Daily Visitors" ranging from 0 to approximately 7000. The title "area-basic
-    · bokeh · pyplots.ai" appears in the top left. The data exhibits a realistic weekly
-    cyclical pattern (weekend dips) with an overall upward trend across the month.
-    Subtle dashed grid lines aid value estimation. The y-axis correctly starts at
-    0, which is essential for area charts to avoid misleading representations.
+  - Data could show more dramatic variation or events (e.g., a traffic spike or dip)
+    to better demonstrate the area chart ability to convey magnitude changes
+  - Font sizes exceed the bokeh.md library guide recommendations (48pt vs 28pt title,
+    36pt vs 22pt labels) — while readable, they are larger than the standard
+  image_description: The plot displays a basic area chart titled "area-basic · bokeh
+    · pyplots.ai" showing daily website visitors over January 2024. The x-axis shows
+    dates from Jan 01, 2024 to Feb 01, with major ticks at weekly intervals. The y-axis
+    is labeled "Daily Visitors (count)" and ranges from 0 to approximately 7,000.
+    The area below the line is filled with a semi-transparent blue (#306998, alpha
+    0.4), and a solid blue line (line_width=5) traces the top edge of the filled area.
+    The data exhibits a clear weekly cyclical pattern with an overall upward trend,
+    starting around 5,000 visitors and ending near 7,000. Dashed grid lines are visible
+    at low opacity (alpha 0.3). The layout is well-balanced with the plot filling
+    a large portion of the 4800x2700 canvas. All text is clearly legible with appropriately
+    scaled font sizes (title 48pt, axis labels 36pt, tick labels 28pt). The toolbar
+    is removed for a clean static export.
   criteria_checklist:
     visual_quality:
-      score: 37
+      score: 40
       max: 40
       items:
       - id: VQ-01
         name: Text Legibility
         score: 10
         max: 10
         passed: true
-        comment: Title at 48pt, axis labels at 36pt, tick labels at 28pt - all perfectly
-          readable at 4800x2700
+        comment: Title 48pt, axis labels 36pt, tick labels 28pt — all well above minimums
+          and perfectly readable
       - id: VQ-02
         name: No Overlap
         score: 8
         max: 8
         passed: true
-        comment: No overlapping text elements; date labels are well-spaced
+        comment: No overlapping text; date ticks well-spaced at weekly intervals
       - id: VQ-03
         name: Element Visibility
         score: 8
         max: 8
         passed: true
-        comment: Area fill and line are perfectly visible; line width of 5 appropriate
-          for canvas size
+        comment: Area fill clearly visible with good alpha, line_width=5 provides
+          clear edge definition for 31 data points
       - id: VQ-04
         name: Color Accessibility
         score: 5
         max: 5
         passed: true
-        comment: Single color scheme, good contrast against white background
+        comment: Single blue color (#306998), no accessibility concerns
       - id: VQ-05
         name: Layout Balance
-        score: 4
+        score: 5
         max: 5
         passed: true
-        comment: Good proportions, slight excess whitespace at bottom due to y starting
-          at 0 but data ranging 4000-7000
+        comment: Plot fills >50% of canvas, balanced margins with min_border adjustments
       - id: VQ-06
         name: Axis Labels
-        score: 1
+        score: 2
         max: 2
         passed: true
-        comment: '"Daily Visitors" and "Date" are descriptive but lack units'
+        comment: Date and Daily Visitors (count) — descriptive with units
       - id: VQ-07
         name: Grid & Legend
-        score: 1
+        score: 2
         max: 2
         passed: true
-        comment: Grid is subtle (alpha 0.3) with nice dashed styling; no legend needed
-          for single series
+        comment: Subtle dashed grid at alpha 0.3, no legend needed for single series
     spec_compliance:
       score: 25
       max: 25
@@ -103,63 +110,62 @@ review:
         score: 8
         max: 8
         passed: true
-        comment: Correct area chart with filled region below line
+        comment: Correct area chart with filled region below the line using varea
       - id: SC-02
         name: Data Mapping
         score: 5
         max: 5
         passed: true
-        comment: Datetime on x-axis, numeric values on y-axis
+        comment: X=datetime (dates), Y=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,
-          line on top
+        comment: Semi-transparent fill (alpha 0.4), gridlines, clear axis labels with
+          units all present
       - id: SC-04
         name: Data Range
         score: 3
         max: 3
         passed: true
-        comment: All data visible, y-axis starts at 0
+        comment: Y-axis starts at 0, all data visible, full date range shown
       - id: SC-05
         name: Legend Accuracy
         score: 2
         max: 2
         passed: true
-        comment: N/A for single series, no misleading elements
+        comment: No legend needed for single-series area chart
       - id: SC-06
         name: Title Format
         score: 2
         max: 2
         passed: true
-        comment: Correctly formatted as "area-basic · bokeh · pyplots.ai"
+        comment: area-basic · bokeh · pyplots.ai matches required format
     data_quality:
-      score: 18
+      score: 19
       max: 20
       items:
       - id: DQ-01
         name: Feature Coverage
         score: 7
         max: 8
         passed: true
-        comment: Shows trend, cyclical pattern, and magnitude well; could show more
-          dramatic variations
+        comment: Shows upward trend, weekly cyclical pattern, and noise; could show
+          more dramatic variation
       - id: DQ-02
         name: Realistic Context
         score: 7
         max: 7
         passed: true
-        comment: Website traffic with weekly patterns and growth trend is a real,
-          comprehensible scenario
+        comment: Daily website visitors over a month — matches spec example application
+          exactly
       - id: DQ-03
         name: Appropriate Scale
-        score: 4
+        score: 5
         max: 5
         passed: true
-        comment: Values 4000-7000 visitors/day plausible; base of 5000 perhaps high
-          for "basic" example
+        comment: 4000-7000 daily visitors is realistic for a mid-sized website
     code_quality:
       score: 10
       max: 10
@@ -169,7 +175,7 @@ review:
         score: 3
         max: 3
         passed: true
-        comment: Clean imports → data → plot → save structure, no functions/classes
+        comment: 'Linear flow: imports, data, plot, save — no functions or classes'
       - id: CQ-02
         name: Reproducibility
         score: 3
@@ -181,28 +187,28 @@ review:
         score: 2
         max: 2
         passed: true
-        comment: All imports are used
+        comment: All imports used (numpy, pandas, bokeh.io, bokeh.models, bokeh.plotting)
       - id: CQ-04
         name: No Deprecated API
         score: 1
         max: 1
         passed: true
-        comment: Uses current Bokeh API
+        comment: All current Bokeh 3.x 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 via export_png
     library_features:
-      score: 2
+      score: 4
       max: 5
       items:
       - id: LF-01
         name: Distinctive Features
-        score: 2
+        score: 4
         max: 5
-        passed: false
-        comment: Uses varea() and ColumnDataSource correctly, but doesn't leverage
-          Bokeh's interactive features like HoverTool which would enhance the visualization
+        passed: true
+        comment: ColumnDataSource, varea, HoverTool with datetime formatter, invisible
+          scatter for hover targets, dual HTML+PNG export
   verdict: APPROVED