update(density-basic): bokeh — comprehensive quality review (#4383)

## Summary

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

**Changes:** Comprehensive quality review

### Changes
- Added HoverTool with vline mode for interactive density inspection
- Added NumeralTickFormatter for cleaner y-axis display
- Refined grid to y-only at 15% opacity, removed tick marks
- Improved rug plot visibility
- Quality: 85/100 (local self-evaluation, after 1 iteration)

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

@@ -1,12 +1,12 @@
 """ pyplots.ai
 density-basic: Basic Density Plot
-Library: bokeh 3.8.1 | Python 3.13.11
-Quality: 92/100 | Created: 2025-12-23
+Library: bokeh 3.8.2 | Python 3.14.3
+Quality: 91/100 | Updated: 2026-02-23
 """
 
 import numpy as np
 from bokeh.io import export_png
-from bokeh.models import ColumnDataSource
+from bokeh.models import ColumnDataSource, HoverTool, Label, NumeralTickFormatter
 from bokeh.plotting import figure
 
 
@@ -32,20 +32,32 @@
     density += np.exp(-0.5 * ((x_range - xi) / bandwidth) ** 2)
 density /= n * bandwidth * np.sqrt(2 * np.pi)
 
+# Identify peaks for visual storytelling
+peak1_idx = np.argmax(density[:250])
+peak2_idx = 250 + np.argmax(density[250:])
+peak1_x, peak1_y = x_range[peak1_idx], density[peak1_idx]
+peak2_x, peak2_y = x_range[peak2_idx], density[peak2_idx]
+
 # Create data source
 source = ColumnDataSource(data={"x": x_range, "density": density})
 
+# Highlight regions around each peak (for visual emphasis)
+mask1 = (x_range > peak1_x - 60) & (x_range < peak1_x + 60)
+mask2 = (x_range > peak2_x - 55) & (x_range < peak2_x + 55)
+highlight1 = ColumnDataSource(data={"x": x_range[mask1], "density": density[mask1]})
+highlight2 = ColumnDataSource(data={"x": x_range[mask2], "density": density[mask2]})
+
 # Rug plot data (individual observations)
-rug_y_pos = -0.0004  # Position below x-axis
+rug_y_pos = -0.0006
 rug_source = ColumnDataSource(
     data={
         "x": response_times,
         "y0": np.full_like(response_times, rug_y_pos),
-        "y1": np.full_like(response_times, rug_y_pos + 0.0004),
+        "y1": np.full_like(response_times, rug_y_pos + 0.0008),
     }
 )
 
-# Create figure (4800 x 2700 px for 16:9 landscape)
+# Create figure
 p = figure(
     width=4800,
     height=2700,
@@ -55,36 +67,82 @@
 )
 
 # Fill under the curve
-p.varea(x="x", y1=0, y2="density", source=source, fill_color="#306998", fill_alpha=0.35)
+p.varea(x="x", y1=0, y2="density", source=source, fill_color="#306998", fill_alpha=0.25)
 
 # Density curve
-p.line(x="x", y="density", source=source, line_color="#306998", line_width=5, line_alpha=0.95)
+density_line = p.line(x="x", y="density", source=source, line_color="#306998", line_width=6, line_alpha=0.9)
+
+# Emphasize peak regions with darker fill
+p.varea(x="x", y1=0, y2="density", source=highlight1, fill_color="#306998", fill_alpha=0.15)
+p.varea(x="x", y1=0, y2="density", source=highlight2, fill_color="#306998", fill_alpha=0.15)
+
+# Annotate peaks for data storytelling
+p.add_layout(
+    Label(
+        x=peak1_x,
+        y=peak1_y,
+        text="Fast Responses",
+        text_font_size="22pt",
+        text_color="#1a3d5c",
+        text_font_style="bold",
+        text_align="center",
+        y_offset=18,
+    )
+)
+p.add_layout(
+    Label(
+        x=peak2_x,
+        y=peak2_y,
+        text="Slower Responses",
+        text_font_size="22pt",
+        text_color="#1a3d5c",
+        text_font_style="bold",
+        text_align="center",
+        y_offset=18,
+    )
+)
+
+# Hover tool showing density values at cursor position
+hover = HoverTool(
+    renderers=[density_line],
+    tooltips=[("Response Time", "@x{0.0} ms"), ("Density", "@density{0.00000}")],
+    mode="vline",
+    line_policy="nearest",
+)
+p.add_tools(hover)
 
 # Rug plot - vertical segments at bottom
-p.segment(x0="x", y0="y0", x1="x", y1="y1", source=rug_source, line_color="#306998", line_width=2, line_alpha=0.5)
+p.segment(x0="x", y0="y0", x1="x", y1="y1", source=rug_source, line_color="#306998", line_width=3, line_alpha=0.65)
 
-# Style text sizes for large canvas (scaled up)
+# Text sizes for large canvas
 p.title.text_font_size = "36pt"
 p.xaxis.axis_label_text_font_size = "28pt"
 p.yaxis.axis_label_text_font_size = "28pt"
 p.xaxis.major_label_text_font_size = "22pt"
 p.yaxis.major_label_text_font_size = "22pt"
 
-# Axis styling
-p.xaxis.axis_line_width = 2
-p.yaxis.axis_line_width = 2
-p.xaxis.major_tick_line_width = 2
-p.yaxis.major_tick_line_width = 2
+# Y-axis tick format
+p.yaxis.formatter = NumeralTickFormatter(format="0.0000")
+
+# Axis styling - softened to match minimalist chrome
+p.xaxis.axis_line_width = 1
+p.yaxis.axis_line_width = 1
+p.xaxis.axis_line_alpha = 0.5
+p.yaxis.axis_line_alpha = 0.5
+p.xaxis.minor_tick_line_color = None
+p.yaxis.minor_tick_line_color = None
+p.xaxis.major_tick_line_color = None
+p.yaxis.major_tick_line_color = None
 
-# Grid styling
-p.xgrid.grid_line_alpha = 0.3
-p.ygrid.grid_line_alpha = 0.3
-p.xgrid.grid_line_dash = "dashed"
-p.ygrid.grid_line_dash = "dashed"
+# Grid - y-axis only, subtle
+p.xgrid.grid_line_color = None
+p.ygrid.grid_line_alpha = 0.15
+p.ygrid.grid_line_width = 1
 
 # Background
 p.background_fill_color = "#fafafa"
 p.border_fill_color = "#ffffff"
+p.outline_line_color = None
 
 # Remove toolbar
 p.toolbar_location = None