feat(plotly): implement scatter-marginal

[github-actions]

Implementation: scatter-marginal - python/plotly

Implements the python/plotly version of scatter-marginal.

File: plots/scatter-marginal/implementations/python/plotly.py

Parent Issue: #2005

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The scatter plot is displayed on a warm off-white background (#FAF8F1) with 200 temperature-humidity measurements in the brand green (#009E73). The main scatter plot occupies the lower-left quadrant with clear, readable axis labels ("Temperature (°C)" and "Relative Humidity (%)") in dark text (#1A1A17). The top marginal histogram shows the temperature distribution in matching green with appropriate opacity (0.6), and the right marginal histogram shows humidity distribution with the same visual treatment. The title "scatter-marginal · plotly · anyplot.ai" is prominently displayed with explicit 28px font size. Tick labels are set to 18px in a softer ink color (#4A4A44) and are clearly visible. Grid lines are subtle (10% opacity) and don't compete with data. All text is readable and well-positioned with generous margins (l=120, r=80, t=100, b=100). Legibility verdict: PASS

Dark render (plot-dark.png): The scatter plot renders identically on a warm near-black background (#1A1A17) with all the same data colors (brand green #009E73 is unchanged, confirming proper theme separation). The title, axis labels, and tick labels are rendered in light text colors (primary INK #F0EFE8, secondary INK_SOFT #B8B7B0) for visibility against the dark surface. No text is light-on-dark or dark-on-dark. Grid lines maintain the same subtle appearance with appropriate light-colored opacity (10%). The marginal histograms render clearly with the same visual hierarchy as the light version. Layout and proportions are maintained. All text is readable against the dark background. Legibility verdict: PASS

Score: 88/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) - All fonts explicitly set (title 28px, labels 22px, ticks 18px). Readable in both themes, though could be fractionally more polished.
• VQ-02: No Overlap (6/6) - No overlapping elements. Generous margins and layout prevent any collision.
• VQ-03: Element Visibility (6/6) - 200 points with marker size 14 and opacity 0.65 are perfectly adapted to density. Marginal histograms clearly visible.
• VQ-04: Color Accessibility (2/2) - Single Okabe-Ito color (#009E73) with good contrast on both light and dark. Colorblind-safe.
• VQ-05: Layout & Canvas (4/4) - Perfect proportions. Plot fills 50-80% of canvas (main plot domain [0, 0.85]), marginals [0.85, 1]. Balanced whitespace.
• VQ-06: Axis Labels & Title (2/2) - Descriptive with units: "Temperature (°C)" and "Relative Humidity (%)". Title follows spec format.
• VQ-07: Palette Compliance (2/2) - First series is #009E73 (brand). Backgrounds are correct (#FAF8F1 light, #1A1A17 dark). Theme-adaptive chrome (text, grid, axes) perfectly implemented. Data colors identical in both renders.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (4/8) - Well-configured library defaults with thoughtful theme adaptation. Professional and clean but not exceptionally custom or publication-grade. Standard Okabe-Ito palette applied straightforwardly.
• DE-02: Visual Refinement (4/6) - Subtle grid styling, generous whitespace, clean layout. Some customization visible in margin setup and axis domain configuration. Could have more polish (e.g., spine removal, grid reduction).
• DE-03: Data Storytelling (4/6) - Marginal plots create visual hierarchy showing both joint and marginal relationships. Realistic correlation between temperature and humidity guides interpretation. Good structure but narrative could be stronger through emphasis techniques.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) - Correct scatter plot with marginal distributions. Main plot lower-left, marginals on top and right per specification.
• SC-02: Required Features (4/4) - All features present: scatter plot, marginal histograms for both axes, appropriate opacity (0.65 for points, 0.6 for histograms).
• SC-03: Data Mapping (3/3) - X/Y correctly assigned. 200 points within recommended 50-1000 range. Bivariate correlation visible and realistic.
• SC-04: Title & Legend (3/3) - Title format correct: "scatter-marginal · plotly · anyplot.ai". No legend (single-series, appropriately omitted).

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) - Shows all aspects: bivariate scatter relationship, X distribution (temperature), Y distribution (humidity). Clear correlation and individual spread patterns visible.
• DQ-02: Realistic Context (5/5) - Real scientific measurement scenario (temperature in °C, relative humidity in %). Neutral, non-controversial. Plausible domain context.
• DQ-03: Appropriate Scale (4/4) - Temperature ~16-32°C (realistic), humidity 27-74% (realistic range). Correlation ~0.65 is physically plausible. Factually correct proportions.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) - Clean sequential: imports → theme tokens → data generation → plot creation → save. No functions/classes beyond plotting.
• CQ-02: Reproducibility (2/2) - np.random.seed(42) ensures deterministic bivariate normal generation.
• CQ-03: Clean Imports (2/2) - Only necessary imports (os, sys, numpy, plotly). No unused imports.
• CQ-04: Code Elegance (2/2) - Clean, Pythonic, appropriate complexity. Theme token pattern is well-structured. No fake functionality.
• CQ-05: Output & API (1/1) - Correct output: saves as plot-{THEME}.png (4800×2700 with scale=3) and plot-{THEME}.html for interactive features.

Library Mastery (8/10)

• LM-01: Idiomatic Usage (4/5) - Good use of go.Figure(), go.Scatter(), go.Histogram(). Proper axes domain configuration for multi-axis layout is idiomatic plotly approach. Could leverage more high-level features.
• LM-02: Distinctive Features (4/5) - Uses plotly's multi-axis domain feature (distinctive to plotly) and theme-adaptive styling. Generates both PNG and interactive HTML. Fairly straightforward execution but appropriate for the task.

Score Caps Applied

• None - No caps triggered. VQ-02=6, VQ-03=6, SC-01=5, DQ-02=5, CQ-04=2, DE-01=4 (all clear of cap thresholds).

Strengths

• Perfect theme adaptation with explicit font sizing and theme-dependent color tokens (INK, INK_SOFT, GRID, BRAND)
• Clean, readable visualization in both light and dark renders with no text legibility issues
• Correct specification compliance with all required features (scatter, dual marginal histograms)
• Realistic, well-scoped data (200 points with natural correlation)
• Idiomatic plotly usage with proper axes domain configuration for marginal plot alignment
• Perfect code quality: reproducible, clean imports, KISS structure

Weaknesses

• Design Excellence lacks exceptional polish: relies on standard Okabe-Ito and library defaults without custom refinements
• Visual hierarchy could be strengthened through strategic grid reduction or spine removal
• Library-specific features are competent but not leveraged creatively (e.g., could use plotly's hover tooltips, annotations, or secondary axis labels)
• Aesthetic sophistication (DE-01) is competent but not publication-grade

Issues Found

1. DE-01 MODERATE: Functional design but lacks exceptional aesthetic polish
   • Fix: Consider adding subtle visual refinements (e.g., remove top/right spines where appropriate, reduce grid opacity further, or use custom typography hierarchy)
2. DE-03 MODERATE: Data storytelling relies on layout structure alone
   • Fix: Enhance visual emphasis through color contrast, strategic data highlights, or axis annotations that guide interpretation
3. LM-02 MODERATE: Library mastery uses competent but straightforward patterns
   • Fix: Consider leveraging plotly-specific features like interactive hover tooltips showing (x,y) values, or annotations highlighting distribution modes

AI Feedback for Next Attempt

This is a solid, correct implementation with excellent theme adaptation and visual quality. To reach 90+, focus on design excellence: add subtle visual refinements (spine removal, grid styling adjustments, custom typography), strengthen data storytelling through visual emphasis (color contrast, focal points, or strategic annotations), and leverage more distinctive plotly features (hover tooltips, interactive styling, or advanced layout techniques). The foundation is strong—polish the aesthetics and creative library usage.

Verdict: REJECTED

Reason: Score 88/100 is above the Review 2 threshold (≥80) but below the Review 1 threshold (≥90) for first-attempt approval. Requires one repair cycle focusing on design excellence and library mastery.

[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): The plot displays a scatter plot with bivariate temperature-humidity data (200 points) using brand green (#009E73) markers with white edges and 0.65 opacity on a warm off-white (#FAF8F1) background. The main scatter plot occupies the lower-left area (domains [0, 0.85]), with a temperature histogram on top and a humidity histogram on the right, properly aligned with the scatter axes. The title "scatter-marginal · plotly · anyplot.ai" is rendered in dark text (28px), axis labels "Temperature (°C)" and "Relative Humidity (%)" are in 22px dark text, and tick labels (18px) are all clearly readable against the light background. Grid lines are subtle with proper opacity. The layout is well-balanced with generous margins.

Dark render (plot-dark.png): All elements render identically to the light version except for theme-adaptive chrome. The background is warm near-black (#1A1A17), all text elements (title, labels, ticks) are now rendered in light colors and remain clearly readable. The scatter data and histogram colors remain identical to the light render (#009E73). Grid lines are subtle. No dark-on-dark failures; all text has excellent contrast against the dark background. Both renders maintain perfect alignment and readability.

Score: 92/100

Category	Score	Max
Visual Quality	30	30
Design Excellence	14	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	8	10
Total	92	100

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) - All font sizes explicitly set; title 28px, labels 22px, ticks 18px; perfectly readable in both themes
• VQ-02: No Overlap (6/6) - No overlapping text; generous margins (120, 80, 100, 100); domain-based positioning prevents crowding
• VQ-03: Element Visibility (6/6) - Scatter markers (size=14, opacity=0.65) perfectly adapted to 200-point density; histograms properly visible
• VQ-04: Color Accessibility (2/2) - Okabe-Ito brand green is CVD-safe; good contrast; no red-green reliance
• VQ-05: Layout & Canvas (4/4) - Perfect: 4800x2700px (3x scale), plot fills 50-80% of canvas, balanced margins
• VQ-06: Axis Labels & Title (2/2) - Descriptive with units: "Temperature (°C)", "Relative Humidity (%)"
• VQ-07: Palette Compliance (2/2) - Brand green (#009E73) used for all data; backgrounds #FAF8F1 (light)/#1A1A17 (dark); chrome properly theme-adaptive

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) - Strong design: brand green palette, intentional hierarchy, professional hover tooltips, refined edge highlighting on markers; shows clear design thought above defaults
• DE-02: Visual Refinement (4/6) - Good: spines controlled (mirror=False), grid subtle (gridwidth=0.5), margins generous; some polish visible (edge colors)
• DE-03: Data Storytelling (4/6) - Good: visual hierarchy with focal scatter plot and supporting marginals; realistic scenario (temperature–humidity correlation) clearly shown; bivariate relationship is visually apparent

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) - Correct scatter plot with marginal distributions; both marginals present and aligned
• SC-02: Required Features (4/4) - Main scatter, marginal histograms on both axes, proper alignment, transparency to show density
• SC-03: Data Mapping (3/3) - X=Temperature, Y=Humidity; all data visible and properly scaled
• SC-04: Title & Legend (3/3) - Title format correct; legend omitted (appropriate for single series)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) - Shows all aspects: bivariate relationship AND marginal univariate distributions; variation in both dimensions
• DQ-02: Realistic Context (5/5) - Real scientific scenario (environmental measurement); neutral topic; plausible values
• DQ-03: Appropriate Scale (4/4) - Temperature ~15–32°C, humidity ~27–75%, correlation 0.65; all factually correct for domain

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) - Linear: imports → tokens → data → plot → save; no functions/classes
• CQ-02: Reproducibility (2/2) - np.random.seed(42); fully deterministic
• CQ-03: Clean Imports (2/2) - Only used imports: os, sys, numpy, plotly
• CQ-04: Code Elegance (2/2) - Clean, Pythonic, appropriate complexity; no fake functionality
• CQ-05: Output & API (1/1) - Saves as plot-{THEME}.png and plot-{THEME}.html; current API

Library Mastery (8/10)

• LM-01: Idiomatic Usage (5/5) - Excellent: proper go.Figure(), add_trace(), domain-based multi-axis layout; go.Histogram for marginals; dict-based configuration
• LM-02: Distinctive Features (3/5) - Uses plotly-specific domain positioning for marginal layout; custom hovertemplate; HTML export; could push further with interactive elements

Score Caps Applied

• None

Strengths

• Exceptional theme adaptation: Both light and dark renders are perfectly readable with correct color mapping; no theme-chrome failures
• Strong data visualization: Marginal distributions effectively contextualize the scatter plot; positive correlation is immediately visually apparent
• Excellent code quality: Clean, reproducible, properly structured; no unused imports or over-engineering
• Idiomatic plotly usage: Domain-based multi-axis approach is the right plotly pattern for marginal layouts
• Professional polish: Edge highlighting on markers, custom hover tooltips, realistic data scenario all contribute to a polished feel

Weaknesses

• DE-01 could be higher: While the design is professional, it stops short of FiveThirtyEight-level sophistication
• LM-02 moderate: Could leverage more plotly-specific interactive features to push library mastery higher

Issues Found

None. Implementation is well-executed with no correctness or compliance issues.

Verdict: APPROVED