feat(d3): implement roc-curve

[github-actions]

Implementation: roc-curve - javascript/d3

Implements the javascript/d3 version of roc-curve.

File: plots/roc-curve/implementations/javascript/d3.js

Parent Issue: #2273

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white (#FAF8F1-consistent) background. A single green (#009E73) step-shaped ROC curve rises steeply from the origin toward (1,1) with a light green area fill (alpha ~0.1) beneath it, next to a gray dashed diagonal random-classifier reference line. Title "roc-curve · javascript · d3 · anyplot.ai" and both axis titles/tick labels render in dark ink, all clearly legible. A bottom-right legend reads "Diagnostic test (AUC = 0.94)" and "Random classifier (AUC = 0.50)". All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black (#1A1A17-consistent) background. Same green curve and area fill as the light render — the data color did not change, confirming only chrome flips per the theme rule. Title, axis titles, tick labels, gridlines, and legend all render in light/off-white text, clearly legible against the dark surface. No dark-on-dark or light-on-light failures observed.

Both renders pass the theme-readability check.

Score: 83/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8)
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (6/6)
• VQ-04: Color Accessibility (2/2)
• VQ-05: Layout & Canvas (4/4)
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2)

Design Excellence (11/20)

• DE-01: Aesthetic Sophistication (5/8) - Rounded caps, area fill, custom legend show some polish, but treatment is a standard single-curve ROC
• DE-02: Visual Refinement (3/6) - Subtle grid and whitespace, no chartjunk, but no further refinement beyond the basics
• DE-03: Data Storytelling (3/6) - Area fill against the diagonal gives a focal point, but a single curve underuses the comparison framing

Spec Compliance (13/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (2/4) - No multi-model comparison despite the spec's comparison feature tag and multi-model note
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (13/15)

• DQ-01: Feature Coverage (4/6) - Covers curve + diagonal + AUC but not the multi-model comparison aspect of this plot type
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4)

Code Quality (10/10)

• CQ-01: KISS Structure (3/3)
• CQ-02: Reproducibility (2/2)
• CQ-03: Clean Imports (2/2)
• CQ-04: Code Elegance (2/2)
• CQ-05: Output & API (1/1)

Library Mastery (6/10)

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (2/5) - Fairly generic single-series usage, no distinctive D3-only techniques

Score Caps Applied

• None

Strengths

• Correct equal-aspect square canvas (0-1 on both axes), matching the spec's "equal aspect ratio preferred" note
• Diagonal random-classifier reference line present, dashed and labeled, with its own AUC = 0.50
• AUC score displayed in the legend for the model curve (AUC = 0.94)
• Data generated via a deterministic LCG with a realistic diseased/healthy score-distribution model, swept into an ROC curve the same way sklearn.metrics.roc_curve constructs one
• Theme tokens correctly threaded through chrome while the data color (t.palette[0]) stays identical between light and dark renders
• Clean idiomatic D3: scales, axis generators, d3.area/d3.line generators, data-join pattern, all font sizes explicit

Weaknesses

• Only a single model curve is shown. The spec tags this plot with the comparison feature and its Notes call out "distinct colors/styles when comparing multiple models" — the sibling matplotlib implementation for this same spec plots three differently-performing models (Random Forest / Logistic Regression / Decision Tree) to cover that feature. Add 2-3 curves of varying quality (e.g. vary the separation between the diseased/healthy score distributions) using palette[0], palette[1], palette[2], each with its own AUC in the legend.
• Design excellence is solid but not distinctive: the area fill is a nice touch, but there's no additional visual hierarchy beyond that (e.g. highlighting an optimal threshold point). With only one curve, the plot doesn't yet build the visual story the spec's comparison framing invites.
• Distinctive D3 features are minimal — fairly generic scale/axis/line-generator usage. Adding a second/third series is a natural place to lean on d3.scaleOrdinal against the Imprint palette for more idiomatic multi-series D3 code.

Issues Found

1. SC-02 / DQ-01 MEDIUM: Missing multi-model comparison
   • Fix: Generate 2-3 score distributions of varying separability (e.g. 0.66/0.16 vs. tighter/looser spreads), compute an ROC curve + AUC for each with the same threshold-sweep logic already in the file, and plot each with t.palette[0], t.palette[1], t.palette[2] plus its own legend entry.
2. DE-01 / DE-03 LOW: Single-curve treatment limits storytelling
   • Fix: Once multiple curves exist, the differing AUCs and curve shapes will naturally create the visual hierarchy/comparison story the spec calls for; no separate fix needed beyond item 1.

AI Feedback for Next Attempt

Keep the current chrome, theming, canvas, and single-curve mechanics exactly as-is — they're solid. Add 2-3 model curves (varying the diseased/healthy score separation) using t.palette[0..2], each with its own legend entry and AUC, to satisfy the spec's multi-model comparison feature tag. This is the main gap keeping the score below the approval threshold.

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): Warm off-white (#FAF8F1-consistent) background. Three step-shaped ROC curves rise from the origin toward (1,1): a green (#009E73) "Strong classifier" curve (AUC 0.94) that hugs the top-left corner with a light green area fill beneath it, a lavender/pink (#C475FD) "Moderate classifier" curve (AUC 0.74), and a navy-blue (#4467A3) "Weak classifier" curve (AUC 0.65), plus a gray dashed diagonal "Random classifier" reference line (AUC 0.50). Title "roc-curve · javascript · d3 · anyplot.ai" and both axis titles/tick labels render in dark ink, all clearly legible against the light background. A bottom-right legend lists all four series in descending order of performance with their AUC values. All text is readable against the light background.

Dark render (plot-dark.png): Warm near-black (#1A1A17-consistent) background. The same three curves in the same colors as the light render (green, lavender, navy blue) plus the same area fill under the strongest curve — confirming only chrome flips per the theme rule. Title, axis titles, tick labels, gridlines, and legend all render in light/off-white text, clearly legible against the dark surface. No dark-on-dark or light-on-light failures observed.

Both renders pass the theme-readability check.

Score: 91/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8)
• VQ-02: No Overlap (6/6)
• VQ-03: Element Visibility (6/6)
• VQ-04: Color Accessibility (2/2)
• VQ-05: Layout & Canvas (4/4)
• VQ-06: Axis Labels & Title (2/2)
• VQ-07: Palette Compliance (2/2)

Design Excellence (15/20)

• DE-01: Aesthetic Sophistication (6/8) - Area fill spotlighting the strongest curve, ordered multi-series legend with AUC values, and thoughtful color assignment are clearly above library defaults
• DE-02: Visual Refinement (4/6) - Subtle grid, default L-shaped axis frame, rounded line caps; solid but not maximally polished
• DE-03: Data Storytelling (5/6) - The three curves visually cascade from best (top-left, filled) to worst (near the diagonal), with the legend reinforcing the ranking via AUC — a clear, immediate story

Spec Compliance (15/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (4/4) - Multi-model comparison, diagonal reference, and per-curve AUC all present
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) - Three models spanning strong/moderate/weak separability, each with a distinct step curve and AUC
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4)

Code Quality (10/10)

• CQ-01: KISS Structure (3/3)
• CQ-02: Reproducibility (2/2)
• CQ-03: Clean Imports (2/2)
• CQ-04: Code Elegance (2/2)
• CQ-05: Output & API (1/1)

Library Mastery (6/10)

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (2/5) - Ordinal color scale + manual multi-series legend are solid D3 patterns, but not features unique to D3 among the JS chart libraries

Score Caps Applied

• None

Strengths

• The multi-model comparison gap from Attempt 1 is fully resolved: three classifiers of clearly varying skill (Strong/Moderate/Weak, AUC 0.94/0.74/0.65), each in its own Imprint color, plus the dashed diagonal random-classifier reference
• Area fill limited to the strongest curve creates a clean single focal point without cluttering the other two curves
• Legend is ordered best-to-worst and doubles as a data label for each AUC value, reinforcing the comparison story
• Equal-aspect square canvas (0-1 on both axes) preserved from Attempt 1, matching the spec's "equal aspect ratio preferred" note
• Theme tokens correctly threaded through all chrome; data colors (t.palette[0..2]) are pixel-identical between light and dark renders
• Clean idiomatic D3: scales, axis generators, d3.area/d3.line generators, explicit font sizes throughout, deterministic per-model LCG data generation

Weaknesses

• The diagonal random-classifier reference line uses the muted semantic anchor; per the style guide, a reference/baseline line's canonical role is the neutral anchor (same tone as ink/text) rather than muted (reserved for de-emphasized/disabled elements). Minor nuance, not a hard palette violation since both are valid anchors — but neutral would be the more precise semantic fit for a reference line.
• Visual refinement is solid but not exceptional: the grid and spine treatment follow sensible defaults without extra polish (e.g. no marker at the AUC-optimal threshold, no secondary annotation calling out the comparison).
• Library Mastery usage (ordinal color scale, manual legend rows, line/area generators) is correct and idiomatic but is standard D3 charting — nothing here is a feature uniquely difficult to replicate in another declarative JS charting library.

Issues Found

1. DE-02 LOW: Reference-line color uses muted instead of the more semantically precise neutral anchor
   • Fix: Not required for approval; optional polish for a future pass — swap muted for the theme-adaptive neutral (same as t.ink) on the diagonal line and its legend label if revisited.

AI Feedback for Next Attempt

N/A — implementation approved.

Verdict: APPROVED