feat(bokeh): implement funnel-basic

[github-actions]

Implementation: funnel-basic - python/bokeh

Implements the python/bokeh version of funnel-basic.

File: plots/funnel-basic/implementations/python/bokeh.py

Parent Issue: #789

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1 range). Title "funnel-basic · bokeh · anyplot.ai" in dark ink, clearly readable. Five trapezoidal funnel segments from top to bottom: Awareness (teal #009E73, widest), Interest (orange #D55E00), Consideration (blue #0072B2), Intent (pink #CC79A7), Purchase (golden #E69F00, narrowest). Widths proportional to values. Each segment has a bold white stage name and smaller value + percentage label centered within it. White borders provide clean segment separation. Legend on right shows all 5 stages with counts. No axes or grid — appropriate for a funnel chart. All text is clearly readable against the light background.

Dark render (plot-dark.png): Near-black background (#1A1A17 range). Title text appears in a light/cream color at the top — readable against the dark surface. Data colors are identical to the light render (teal, orange, blue, pink, golden) — only the chrome flips, as required. In-segment labels remain readable as white text on colored backgrounds. Legend on the right side shows a slightly elevated background; legend item text color adaptation is uncertain — possible partial dark-on-dark issue if legend.label_text_color was not explicitly set to INK_SOFT (#B8B7B0). No axes or grid remain correctly absent. Overall the dark render is largely readable; the legend text is the only uncertain element.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 86/100

Category	Score	Max
Visual Quality	27	30
Design Excellence	13	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	6	10
Total	86	100

Visual Quality (27/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set (title 36pt, stage labels 28pt, value labels 22pt, legend 24pt). Readable in both renders. -1 for potential legend text color uncertainty in dark mode.
• VQ-02: No Overlap (6/6) — No overlapping text in either render; labels centered and well-spaced within segments.
• VQ-03: Element Visibility (6/6) — All five funnel segments clearly visible. White segment borders improve definition.
• VQ-04: Color Accessibility (2/2) — Okabe-Ito palette is colorblind-safe; good luminance contrast on all segments.
• VQ-05: Layout & Canvas (3/4) — Funnel fills central area well. Some whitespace in corners outside the trapezoid shape; legend offset creates slight compositional imbalance.
• VQ-06: Axis Labels & Title (2/2) — Title is descriptive and correct format. No axis labels appropriate for funnel (axes hidden).
• VQ-07: Palette Compliance (1/2) — Okabe-Ito colors correct (#009E73 first, canonical order). Backgrounds correct. Partial: legend text color adaptation in dark mode uncertain — legend.label_text_color may not be set to INK_SOFT.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Professional appearance with intentional per-stage Okabe-Ito colors, bold stage labels, clean funnel geometry. Clearly above generic defaults. Not quite publication-ready — lacks visual emphasis on key drop-off boundaries.
• DE-02: Visual Refinement (4/6) — Axes/grid correctly hidden, white segment borders provide clean visual separation, outline_line_color=None removes chart border cleanly. Good whitespace. Some refinement visible.
• DE-03: Data Storytelling (4/6) — Funnel shape inherently communicates drop-off. Percentage labels (100%→60%→40%→20%→10%) provide immediate context. Visual hierarchy from large-to-small guides the eye. Missing: explicit emphasis on largest conversion gaps (Consideration and Purchase show steepest drops).

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct funnel chart with trapezoidal segments narrowing top to bottom.
• SC-02: Required Features (4/4) — All spec features present: sequential stages, distinct colors, value labels, percentage labels, widths proportional to value relative to first stage.
• SC-03: Data Mapping (3/3) — Stages ordered largest to smallest (top to bottom); widths computed as value / max_value.
• SC-04: Title & Legend (3/3) — Title "funnel-basic · bokeh · anyplot.ai" correct. Legend shows all 5 stages with counts.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — 5 stages with progressive decrease, proportional widths, full coverage of conversion funnel concept.
• DQ-02: Realistic Context (5/5) — Sales funnel (Awareness → Interest → Consideration → Intent → Purchase): professional, neutral, real-world scenario.
• DQ-03: Appropriate Scale (4/4) — Values 1000/600/400/200/100 represent realistic funnel ratios (~10% overall conversion).

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear script: imports → data → calculations → figure → render → save. No functions or classes.
• CQ-02: Reproducibility (2/2) — Fully deterministic hardcoded data.
• CQ-03: Clean Imports (2/2) — Only used bokeh modules imported.
• CQ-04: Code Elegance (2/2) — Manual patch geometry necessary for custom funnel shape; appropriate complexity. Clean loop over stages.
• CQ-05: Output & API (1/1) — Both plot-light.png and plot-dark.png generated. HTML outputs also produced.

Library Mastery (6/10)

• LM-01: Idiomatic Usage (4/5) — Uses patch() for polygon rendering, Label for text overlays, LegendItem for manual legend — idiomatic Bokeh patterns. ColumnDataSource (Bokeh's recommended data-binding pattern) not used, which would also enable HoverTool binding.
• LM-02: Distinctive Features (2/5) — Uses Label and LegendItem models (Bokeh-specific), but does not leverage HoverTool — Bokeh's most distinctive interactive feature. Adding a tooltip with stage name, count, and drop-off % from the previous stage would make this implementation uniquely Bokeh.

Score Caps Applied

• None — DE-01=5 and DE-02=4, so the generic-defaults cap (75) does not trigger.

Strengths

• Perfect spec compliance: correct trapezoidal funnel, width proportional to value, stage + value/percentage labels, distinct colors per stage
• Excellent data quality: realistic sales funnel (Awareness → Purchase) with plausible 10% overall conversion ratios, neutral professional context
• Okabe-Ito palette correctly applied in canonical order with first stage as #009E73
• All font sizes explicitly set and clearly readable at 4800×2700
• Clean funnel geometry with white segment borders providing strong visual separation

Weaknesses

• Dark mode legend chrome: p.legend.label_text_color may not be set to INK_SOFT (#B8B7B0) — verify and fix for full VQ-07 compliance
• No HoverTool: Bokeh's most distinctive feature is absent; a tooltip showing stage name, count, and drop-off percentage from the previous stage would significantly raise LM-02
• Storytelling gap: the biggest conversion drops (40-point drop at Consideration, 10-point final) are not visually emphasized — consider color intensity variation or subtle drop-off annotations at segment boundaries
• ColumnDataSource not used: binding data to a CDS would be more idiomatic Bokeh and enable HoverTool easily

Issues Found

1. VQ-07 PARTIAL: Legend text color not confirmed theme-adaptive in dark mode
   • Fix: Ensure p.legend.label_text_color = INK_SOFT is set (where INK_SOFT = "#4A4A44" for light, "#B8B7B0" for dark). Also check p.legend.background_fill_color = ELEVATED_BG and p.legend.border_line_color = INK_SOFT.
2. LM-02 LOW: No HoverTool usage despite Bokeh being an interactive library
   • Fix: Add HoverTool(tooltips=[("Stage", "@stage"), ("Count", "@value{,}"), ("Drop-off", "@dropoff%")]) using a ColumnDataSource with a quad or patch renderer. This is Bokeh's signature feature.
3. DE-03 MEDIUM: No visual emphasis on key conversion gaps
   • Fix: Add subtle opacity gradient across segments (e.g., fill_alpha decreasing from 0.95 to 0.80 with progression) or annotate the largest drop-off boundary with a percentage change label.

AI Feedback for Next Attempt

Fix dark-mode legend chrome first (set legend.label_text_color and legend.background_fill_color from theme tokens). Then add a HoverTool using ColumnDataSource — this is what makes a Bokeh implementation distinctly Bokeh. Finally, add one storytelling element: either vary segment alpha to show progression, or annotate the largest conversion drop at the Consideration boundary. These three changes should push the score above 90.

Verdict: REJECTED