feat(d3): implement slope-basic

[github-actions]

Implementation: slope-basic - javascript/d3

Implements the javascript/d3 version of slope-basic.

File: plots/slope-basic/implementations/javascript/d3.js

Parent Issue: #981

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1-consistent). Bold dark title "slope-basic · javascript · d3 · anyplot.ai" at top-center, with an "Improved"/"Declined" legend beneath it. Two vertical axis lines headed "2019 Survey" and "2024 Survey" hold ten department slope lines, each ending in a filled circle and a text label ("Department · Value" on the left, "Value · Department" on the right). Lines are brand green (#009E73) for departments whose score rose and matte red for those that declined — direction is doubly encoded via color and slope. All text (title, legend, headers, endpoint labels) reads clearly against the light surface; no light-on-light text found.

Dark render (plot-dark.png): Warm near-black background (#1A1A17-consistent). Same title, legend, and axis headers now rendered in light ink and clearly visible. Axis lines and leader ticks flip to a soft light-gray stroke. Data line/marker colors are pixel-identical to the light render — confirmed only chrome (background, text, line strokes) flipped. No dark-on-dark failures; every label is legible.

Both renders pass the theme-readability check.

Score: 89/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) - explicit sizes, readable in both themes; endpoint labels (15px) small relative to the 3200px canvas
• VQ-02: No Overlap (6/6) - custom decluttering algorithm prevents all label collisions
• VQ-03: Element Visibility (6/6) - sparse data with prominent markers/lines
• VQ-04: Color Accessibility (2/2) - direction is redundantly encoded via color AND slope, not color alone
• VQ-05: Layout & Canvas (4/4) - exact 3200×1800 canvas, balanced margins, nothing clipped
• VQ-06: Axis Labels & Title (1/2) - no unit/context label clarifying what the plotted values represent
• VQ-07: Palette Compliance (2/2) - correct brand green + semantic matte-red exception, correct theme backgrounds

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (5/8) - Professional, restrained polish; not exceptionally distinctive
• DE-02: Visual Refinement (5/6) - No unnecessary chrome, subtle leader ticks, generous whitespace
• DE-03: Data Storytelling (4/6) - Color/slope hierarchy guides the eye but no annotation emphasizes the single most notable mover

Spec Compliance (15/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (4/4)
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6)
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4)

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) - uses a declutter() helper function, deviating from the strict no-functions default (functionally justified)
• 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 (8/10)

• LM-01: Idiomatic Usage (4/5) - correct D3 join pattern, scales, token-driven theming
• LM-02: Distinctive Features (4/5) - custom decluttering + leader-tick technique beyond the basic skeleton example

Score Caps Applied

• None

Strengths

• Custom label-decluttering algorithm cleanly resolves overlaps across 10 densely-packed entities on both label columns, with subtle leader ticks connecting nudged labels back to their true value position
• Correct semantic color exception per the Imprint style guide (green = improved, matte red = declined), redundantly reinforced by the slope direction itself
• Theme-adaptive chrome verified correct in both renders — no dark-on-dark or light-on-light failures, data colors identical between themes
• Canvas is exactly 3200×1800, title format and legend labels match spec exactly, data is fully deterministic and in-memory
• Idiomatic D3 join patterns; no fake interactivity, no animation

Weaknesses

• No unit/context label indicating what the values represent (e.g. "Employee Satisfaction Score (0-100)") — the bare numbers next to each label are ambiguous without an axis title or subtitle
• The declutter() helper function deviates from the KISS "no functions" default — justified by the genuine label-collision problem, but keep it minimal
• Chart stays generic in its storytelling — no annotation or visual emphasis calls out the largest mover (e.g. Customer Support's decline or Product's gain)
• Endpoint/leader label font size (15px) is proportionally small relative to the 3200px canvas and the 22px title — bumping to ~16-17px would improve full-size and mobile-scaled legibility

Issues Found

1. VQ-06 LOW: No axis unit/context label — reader must infer the 0-100 satisfaction-score scale from data alone
   • Fix: Add a small subtitle or axis-adjacent label like "Employee Satisfaction Score (0-100)"
2. DE-03 LOW: No visual emphasis on the standout data point
   • Fix: Consider bolding/highlighting the largest mover (e.g. thicker stroke or a small annotation on Customer Support's -6pt decline) to give the chart a clear focal point

AI Feedback for Next Attempt

Add a small context label clarifying the value scale/units (e.g. "Employee Satisfaction Score, 0-100"), and consider giving the data storytelling a clearer focal point — e.g. emphasize the single largest mover with a bolder stroke or brief annotation. Slightly increase endpoint-label font size (15px → 16-17px) for better legibility at the 3200px canvas size. Everything else — decluttering, theme adaptation, palette compliance, spec coverage — is solid; keep it.

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 background (#FAF8F1-consistent), never pure white. Bold dark-ink title "slope-basic · javascript · d3 · anyplot.ai" at top-center with a new subtitle "Employee Satisfaction Score (0-100 scale)" beneath it, plus an "Improved"/"Declined" color legend. Bold "2019 Survey" / "2024 Survey" headers sit above each vertical axis line. Ten department slope lines run left→right with filled endpoint markers and decluttered "Department · Value" / "Value · Department" labels (17px) connected by subtle leader ticks where nudged. Lines are brand green (#009E73) for rising departments and matte red (#AE3030) for declining ones — direction is doubly encoded by color and slope. Engineering's line is now thickened/darkened with a bold annotation "Engineering: +9 (largest gain)" at its midpoint. All text — title, subtitle, legend, headers, annotation, and endpoint labels — is clearly readable against the light background; no light-on-light failures.

Dark render (plot-dark.png): Same near-black background (#1A1A17-consistent), never pure black. All chrome (title, subtitle, legend, headers, endpoint labels, leader ticks, axis lines) correctly flips to light ink/off-white and remains fully legible. The data colors — brand green and matte red — are pixel-identical to the light render; only chrome flipped, as required. The Engineering standout annotation is equally prominent here. No dark-on-dark failures found.

Both renders pass the theme-readability check.

Score: 92/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — endpoint labels bumped 15px→17px, now well-balanced against the 22px title/20px headers/16px subtitle; explicitly sized and readable in both themes and at 400px mobile scale
• VQ-02: No Overlap (6/6) — decluttering algorithm prevents any label collisions
• VQ-03: Element Visibility (6/6) — prominent markers for sparse (10-entity) data, standout entity further emphasized
• VQ-04: Color Accessibility (2/2) — direction is redundantly reinforced by slope, not color alone
• VQ-05: Layout & Canvas (4/4) — canvas exactly 3200×1800, well-proportioned, nothing cut off
• VQ-06: Axis Labels & Title (2/2) — new subtitle now supplies the units/context that was missing in attempt 1
• VQ-07: Palette Compliance (2/2) — correct semantic exception (green=improved, matte red=declined), theme-correct backgrounds, identical data colors across themes

Design Excellence (15/20)

• DE-01: Aesthetic Sophistication (5/8) - Professional, restrained styling with custom typography hierarchy; solid but not yet a fully distinctive bespoke design
• DE-02: Visual Refinement (5/6) - No unnecessary chrome, subtle leader ticks, generous whitespace
• DE-03: Data Storytelling (5/6) - New standout annotation + thickened/darkened Engineering line resolves the prior "no focal point" weakness

Spec Compliance (15/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (4/4)
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6)
• DQ-02: Realistic Context (5/5)
• DQ-03: Appropriate Scale (4/4)

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — declutter() helper still deviates from the no-functions default, justified by genuine label-collision handling
• 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 (8/10)

• LM-01: Idiomatic Usage (4/5)
• LM-02: Distinctive Features (4/5) - Custom decluttering algorithm, leader-tick technique, and standout-annotation emphasis

Score Caps Applied

• None

Strengths

• All four prior weaknesses fixed: added the "Employee Satisfaction Score (0-100 scale)" subtitle (VQ-06 units), bumped endpoint-label font 15px→17px (VQ-01), and added a standout annotation with a thickened/darkened highlighted line giving DE-03 a clear focal point
• Custom label-decluttering algorithm cleanly resolves overlaps across 10 densely-packed entities with subtle leader ticks
• Correct semantic color exception per the Imprint style guide, redundantly reinforced by slope direction
• Theme-adaptive chrome verified correct in both renders — no dark-on-dark/light-on-light failures, data colors identical between themes
• Canvas exactly 3200×1800, title/legend match spec exactly, data fully deterministic and in-memory

Weaknesses

• The declutter() helper still deviates from the KISS "no functions" default (CQ-01) — justified by the genuine label-collision problem, low priority
• DE-01 is solid and professional but not yet at the "FiveThirtyEight-level" distinctive-palette tier

Issues Found

None blocking — this attempt resolves all four weaknesses flagged in the prior review.

AI Feedback for Next Attempt

N/A — approved.

Verdict: APPROVED