feat(plotly): implement radar-basic

[github-actions]

Implementation: radar-basic - python/plotly

Implements the python/plotly version of radar-basic.

File: plots/radar-basic/implementations/python/plotly.py

Parent Issue: #744

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The plot displays a radar chart on a warm off-white background (#FAF8F1). Two filled polygon series are shown: "Senior Developer" in Okabe-Ito teal (#009E73) and "Junior Developer" in vermillion (#D55E00), both with ~25% alpha fill. The six axes are Communication, Technical Skills, Teamwork, Problem Solving, Leadership, and Creativity, each clearly labeled at the outer edge. Radial gridlines appear at 20, 40, 60, 80, 100 with subtle visibility. The title "radar-basic · plotly · anyplot.ai" is centered at the top. A legend at the bottom identifies both series. All text (title, axis labels, radial tick values) is rendered in dark ink and is fully readable against the light background. Legibility verdict: PASS

Dark render (plot-dark.png): The same chart appears on a warm near-black background (#1A1A17). The data colors are identical to the light render — Senior Developer remains #009E73 and Junior Developer remains #D55E00, confirming only chrome flips between themes. Title, axis labels, and tick values are rendered in light-colored text, clearly readable against the dark background. No dark-on-dark failures detected. Gridlines remain subtle. The legend is legible. Legibility verdict: PASS

⚠️ CRITICAL DISCREPANCY: The images were generated from a different implementation than what is currently committed in the repository. The repo code (plotly.py) has a single series "Performance Score" using legacy color #306998 (Python Blue), saves to plot.png (not plot-light/dark.png), uses bgcolor="white" (pure white), and has no ANYPLOT_THEME support. The images appear to come from a correctly-generated implementation that was not properly committed. Visual quality scores reflect the images; code quality and spec compliance scores reflect the actual repo code.

Score: 77/100

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

Visual Quality (27/30)

• VQ-01: Text Legibility (7/8) — Font sizes explicitly set in code (title 28px, angular 20px, radial 16px); text readable in both renders per images. Slight deduction: code has no theme-adaptive font colors, so if deployed as-is, dark theme would show dark text on dark background.
• VQ-02: No Overlap (6/6) — No overlapping text; axis labels well-spaced around the perimeter.
• VQ-03: Element Visibility (6/6) — Markers (size 12) and line width (3) appropriate; filled polygons clearly visible.
• VQ-04: Color Accessibility (2/2) — Okabe-Ito teal and vermillion are CVD-safe with clear hue contrast.
• VQ-05: Layout & Canvas (3/4) — Chart is well-centered but fills only ~60% of the canvas; margins could allow slightly larger chart area.
• VQ-06: Axis Labels & Title (1/2) — Category axes are descriptive; no units needed for performance scores. Deduction: title in repo code uses wrong domain ("pyplots.ai").
• VQ-07: Palette Compliance (2/2) — Images show #009E73 as first series, #D55E00 as second; light background appears #FAF8F1; dark background appears #1A1A17; text chrome flips correctly. ⚠️ Note: this score is based on rendered images; the repo code uses #306998 (Python Blue) and bgcolor="white" — non-compliant if deployed from current code.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) — Clean radar chart with proper Okabe-Ito palette, centered title, semi-transparent filled polygons. Above library defaults but not publication-ready (limited typographic hierarchy, no visual emphasis techniques).
• DE-02: Visual Refinement (4/6) — Polar layout naturally minimal; subtle gridlines; good whitespace; legend cleanly positioned.
• DE-03: Data Storytelling (3/6) — Two-series comparison (Senior vs. Junior Developer) creates a visual narrative with clear polygon shape differences. However, no focal point emphasis or callout to highlight the key insight; viewer must discover the story independently.

Spec Compliance (12/15)

• SC-01: Plot Type (5/5) — Correct radar/spider chart using go.Scatterpolar.
• SC-02: Required Features (3/4) — Filled polygons ✓, transparency alpha ~0.25 ✓, gridlines at 20/40/60/80/100 ✓, labeled axes ✓, polygon closed ✓. Deduction: repo code shows single series; spec states "1–3 series for comparison" and emphasizes comparison use cases.
• SC-03: Data Mapping (3/3) — Values correctly mapped to r, categories to theta.
• SC-04: Title & Legend (1/3) — Repo code title is "radar-basic · plotly · pyplots.ai" — wrong domain (should be "anyplot.ai"). Partial credit: spec-id and library name are correct.

Data Quality (12/15)

• DQ-01: Feature Coverage (3/6) — Code shows single series with moderate variation (72–92); misses the comparison and overlap-visibility aspects that are central to radar chart utility. Spec's "1–3 series" permits single, but key use cases (employee comparison, product feature comparison) go undemonstrated.
• DQ-02: Realistic Context (5/5) — Employee performance across competencies is a realistic, neutral scenario directly cited in spec applications.
• DQ-03: Appropriate Scale (4/4) — 0–100 scale with values in 72–92 range is factually appropriate for performance scores.

Code Quality (8/10)

• CQ-01: KISS Structure (3/3) — Clean imports → data → figure → layout → save structure; no functions or classes.
• CQ-02: Reproducibility (2/2) — Deterministic hard-coded data; no randomness.
• CQ-03: Clean Imports (2/2) — Only plotly.graph_objects imported.
• CQ-04: Code Elegance (1/2) — Reasonably clean, but old-style metadata comment header ("pyplots.ai"), hardcoded bgcolor="white", no ANYPLOT_THEME reading pattern.
• CQ-05: Output & API (0/1) — Saves as plot.png and plot.html — must save as plot-{THEME}.png and plot-{THEME}.html. This will cause the pipeline's file-existence check to fail.

Library Mastery (6/10)

• LM-01: Idiomatic Usage (3/5) — Uses go.Scatterpolar correctly with fill="toself" — the idiomatic Plotly approach. Does not leverage plotly.express patterns or advanced polar layout options.
• LM-02: Distinctive Features (3/5) — Uses Plotly's polar coordinate type (distinctive vs. other libraries) and generates interactive HTML output. Does not leverage hover templates, animation, or other Plotly-specific interactive features.

Score Caps Applied

• None

Strengths

• Correct use of go.Scatterpolar with fill="toself" for the radar polygon — idiomatic Plotly approach
• Font sizes explicitly set (title 28px, angular ticks 20px, radial ticks 16px) — meets the size spec
• Deterministic data with a realistic employee performance context
• Polygon properly closed by appending first category/value to the list
• Generates HTML output in addition to PNG

Weaknesses

• CRITICAL: Title uses "pyplots.ai" — must be "anyplot.ai" ("radar-basic · plotly · anyplot.ai")
• CRITICAL: Uses legacy color #306998 (Python Blue) — must use Okabe-Ito #009E73 as first (and only) series color
• CRITICAL: No ANYPLOT_THEME environment variable support — must read os.getenv("ANYPLOT_THEME", "light") and set PAGE_BG, INK, INK_SOFT, GRID tokens
• CRITICAL: bgcolor="white" is pure white — must be PAGE_BG (#FAF8F1 light / #1A1A17 dark)
• CRITICAL: Saves to plot.png not plot-{THEME}.png; generates plot.html not plot-{THEME}.html — pipeline will fail
• Single series ("Performance Score") misses the comparison use case; spec emphasizes 1–3 series for comparing entities (e.g., Senior vs. Junior Developer)
• Radial/angular axis grid and line colors are hardcoded dark (rgba(0,0,0,0.2)) — must use theme-adaptive GRID token

Issues Found

1. CQ-05 / PIPELINE FAILURE: Code saves plot.png — the impl-review workflow checks for plot-light.png and plot-dark.png and will abort if missing.
   • Fix: Read ANYPLOT_THEME = os.getenv("ANYPLOT_THEME", "light") and save fig.write_image(f"plot-{THEME}.png", ...) and fig.write_html(f"plot-{THEME}.html", ...)
2. SC-04 FAILURE: Title "radar-basic · plotly · pyplots.ai" — domain is wrong.
   • Fix: Change to f"radar-basic · plotly · anyplot.ai" (hardcoded string, no variable needed)
3. VQ-07 / PALETTE FAILURE: #306998 is the legacy Python Blue, explicitly flagged as non-compliant.
   • Fix: Use OKABE_ITO = ["#009E73", "#D55E00", ...]; set first series line=dict(color=OKABE_ITO[0])
4. THEME ADAPTATION MISSING: No ANYPLOT_THEME reading; polar.bgcolor="white" (pure white); axis grid/line colors are hardcoded dark.
   • Fix: Apply the full theme-adaptive token pattern from prompts/library/plotly.md: PAGE_BG, INK, INK_SOFT, GRID; set fig.update_layout(paper_bgcolor=PAGE_BG, plot_bgcolor=PAGE_BG, font=dict(color=INK)) and polar=dict(bgcolor=PAGE_BG, radialaxis=dict(gridcolor=GRID, linecolor=INK_SOFT, tickfont=dict(color=INK_SOFT)), angularaxis=dict(gridcolor=GRID, linecolor=INK_SOFT, tickfont=dict(color=INK_SOFT)))
5. DQ-01 LOW: Single series does not showcase radar chart comparison utility.
   • Fix: Add a second series (e.g., Junior Developer with contrasting values) using OKABE_ITO[1] (#D55E00) to demonstrate the overlap-visibility and comparison features described in the spec

AI Feedback for Next Attempt

The implementation needs four critical pipeline fixes before any design improvements: (1) read ANYPLOT_THEME and save as plot-{THEME}.png/plot-{THEME}.html, (2) change title to "radar-basic · plotly · anyplot.ai", (3) replace #306998 with Okabe-Ito #009E73, (4) apply full theme-adaptive chrome (PAGE_BG for polar bgcolor, INK/INK_SOFT for text and grid). After fixing these, add a second comparison series (e.g., Senior vs. Junior Developer) using OKABE_ITO[1] to better showcase the radar chart's comparison capability and improve DQ-01 and DE-03 scores.

Verdict: REJECTED

[github-actions]

🔧 Repair Attempt 1/4

Applied fixes based on AI review feedback.

Status: Repair completed, re-triggering review...

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

Light render (plot-light.png): Radar chart on a warm off-white (#FAF8F1) background. The polar area shares the same warm background. Two filled polygons are displayed: "Senior Developer" in teal (#009E73, Okabe-Ito position 1) and "Junior Developer" in orange (#D55E00, Okabe-Ito position 2), both filled with ~25% transparency creating a visible overlap region. Six axes are labeled clearly: Communication, Technical Skills, Teamwork, Problem Solving, Leadership, Creativity. Radial tick values (20, 40, 60, 80, 100) appear along the right-side axis. Legend sits in the upper-right corner with a warm elevated-background box and dark border. Title reads "radar-basic · plotly · anyplot.ai" in dark text at the top. All text is readable against the light background. Legibility verdict: PASS.

Dark render (plot-dark.png): Same radar chart on a warm near-black (#1A1A17) background. Polar area background is also #1A1A17, matching the paper background. Data colors are identical — teal #009E73 and orange #D55E00 — confirming only chrome flips. Title and all axis/category labels render as light-colored text and are clearly readable against the dark background. Radial tick labels are visible in the secondary ink token color. Legend box uses the dark elevated background (#242420) with a subtle border. No dark-on-dark failures detected. Legibility verdict: PASS.

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

Score: 85/100

Category	Score	Max
Visual Quality	28	30
Design Excellence	11	20
Spec Compliance	15	15
Data Quality	14	15
Code Quality	10	10
Library Mastery	7	10
Total	85	100

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) — Title 28px, angular labels 20px, radial ticks 16px; all readable in both themes. Minor: radial tick values (80, 100) sit close to the Communication axis label creating slight visual density.
• VQ-02: No Overlap (5/6) — Most labels clear; minor crowding between radial tick value "100" and the "Communication" axis label on the right edge.
• VQ-03: Element Visibility (6/6) — Both polygons clearly visible with size-12 markers and width-3 lines. Transparency correctly conveys overlap.
• VQ-04: Color Accessibility (2/2) — Okabe-Ito palette is CVD-safe. Teal and orange provide strong contrast, not red-green.
• VQ-05: Layout & Canvas (4/4) — Square 3600×3600 px ideal for symmetric polar chart. Generous margins (160px all sides). Legend placement clean.
• VQ-06: Axis Labels & Title (2/2) — All six category axes labeled; title is correct format.
• VQ-07: Palette Compliance (2/2) — First series = #009E73 ✓, second = #D55E00 ✓, backgrounds are #FAF8F1 (light) / #1A1A17 (dark) ✓, both themes correct.

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (5/8) — Clean, professional appearance. Correct Okabe-Ito colors with appropriate fill transparency. Good marker sizing and line width. Not exceptional: no additional polish (e.g., subtle radial label offset, tighter legend typography, opacity gradient in fills).
• DE-02: Visual Refinement (3/6) — Polar chart inherently avoids spine issues. Grid color uses the GRID token correctly (10% opacity). Generous whitespace. Legends have a clean elevated-background box. Could push further with ticklen=0 to remove radial tick marks.
• DE-03: Data Storytelling (3/6) — Senior vs. Junior contrast is immediately legible — Senior dominates Technical Skills and Problem Solving, Junior leads in Teamwork. However, no emphasis technique (e.g., annotations, focal point marker) elevates the narrative.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct radar/spider chart using go.Scatterpolar.
• SC-02: Required Features (4/4) — Filled polygons ✓, alpha ~0.25 ✓, gridlines at 20/40/60/80/100 ✓, axis labels ✓, polygon closed by repeating first point ✓, distinct colors ✓, legend ✓.
• SC-03: Data Mapping (3/3) — 6 axes (within 4–8 range), 2 series (within 1–3 range), values on 0–100 scale ✓.
• SC-04: Title & Legend (3/3) — Title "radar-basic · plotly · anyplot.ai" ✓. Legend labels "Senior Developer" / "Junior Developer" ✓.

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — Demonstrates fill transparency, polygon closure, gridlines, multi-series comparison, legend. Missing: third series would exercise the full spec range (1–3 series).
• DQ-02: Realistic Context (5/5) — Employee performance competency comparison is a canonical radar chart use case, neutral and plausible.
• DQ-03: Appropriate Scale (4/4) — Values 55–92 on 0–100 scale are realistic and differentiated.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — No functions or classes, flat procedural structure.
• CQ-02: Reproducibility (2/2) — Hardcoded deterministic data.
• CQ-03: Clean Imports (2/2) — Only os and plotly.graph_objects.
• CQ-04: Code Elegance (2/2) — Clean and readable. Hardcoded rgba fill strings (instead of deriving from OKABE_ITO) is slightly inelegant but correct.
• CQ-05: Output & API (1/1) — fig.write_image(f'plot-{THEME}.png', ...) ✓, fig.write_html(f'plot-{THEME}.html', ...) ✓.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — go.Scatterpolar with fill='toself' is the correct Plotly idiom for radar. Polar layout configuration (radialaxis, angularaxis) is properly used.
• LM-02: Distinctive Features (3/5) — Uses hovertemplate for interactive hover labels, HTML export for interactive output, and Plotly's native polar coordinate system with go.Scatterpolar. Could leverage scatterpolargl or more advanced polar config options.

Score Caps Applied

• None applied.

Strengths

• Full spec compliance: all required features (filled polygon, transparency, gridlines, closed polygon, legend, multi-series) implemented correctly.
• Excellent theme adaptation: both light and dark renders pass readability checks with correct background tokens, ink tokens on all text elements, and matching GRID opacity.
• Code quality is exemplary: flat, readable, deterministic, clean imports, correct output file names.
• Correct square 3600×3600 canvas for a symmetric polar chart.

Weaknesses

• Minor radial tick / angular label crowding: "100" and "Communication" labels compete spatially on the right edge; consider setting tickangle or adjusting tickprefix on radial axis.
• fillcolor uses hardcoded rgba strings rather than deriving from the OKABE_ITO list (cosmetic code issue, no visual impact).
• Design storytelling is functional but flat — no annotation, emphasis marker, or highlight draws the viewer to the most interesting contrast.

Issues Found

1. DE-03 MODERATE: No focal-point emphasis to guide the viewer to the key insight (Senior's Technical Skills dominance vs Junior's Teamwork lead).
   • Fix: Add a brief annotation or use a slight size/opacity variation on the dominant polygon to create visual hierarchy.
2. VQ-02 MINOR: Radial tick values at 80/100 crowd the "Communication" angular label on the right edge.
   • Fix: Set tickangle on the radial axis, or suppress the 100 tick label with ticktext.

AI Feedback for Next Attempt

The implementation is solid and fully spec-compliant. Focus improvements on: (1) add a subtle annotation or highlight to create a clear focal point (e.g., annotate the category where the gap between series is largest); (2) reduce crowding between radial tick 100 and "Communication" label; (3) optionally derive fillcolor from OKABE_ITO to keep the palette logic centralized.

Verdict: APPROVED