feat(d3): implement errorbar-basic

[github-actions]

Implementation: errorbar-basic - javascript/d3

Implements the javascript/d3 version of errorbar-basic.

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

Parent Issue: #973

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): The chart renders on a warm off-white background (#FAF8F1). Six fertilizer treatments (Control, Nitrogen, Phosphorus, Potassium, NPK, Organic) are shown along the x-axis, with crop yield (t/ha) on the y-axis (range 0.0–7.0). Each group displays a vertical error bar stem, upper and lower horizontal caps, and a mean-value circle in brand green (#009E73) with a page-background stroke ring for definition. Horizontal gridlines are subtle and light. Title "errorbar-basic · javascript · d3 · anyplot.ai" is bold, centered, clearly readable. All axis labels, tick labels, and titles are dark-on-light and fully legible. Legibility verdict: PASS.

Dark render (plot-dark.png): Identical layout on a warm near-black background (#1A1A17). Chrome flips correctly: title and axis labels appear in off-white/light-gray tones via t.ink/t.inkSoft tokens; gridlines are rendered as light-on-dark subtly. Data colors (brand green #009E73 stems, caps, and circles) are identical to the light render — only chrome changes. No dark-on-dark failures observed; tick labels, axis titles, and the chart title are all clearly readable against the dark surface. Legibility verdict: PASS.

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

Score: 87/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set (title 22px, axis labels 16px, tick labels 14px); well-proportioned in both themes; no overflow or clipping
• VQ-02: No Overlap (6/6) — No collisions between tick labels, error bars, or any text
• VQ-03: Element Visibility (6/6) — Error bar stems, caps, and mean circles are all prominent and well-sized for 6 sparse data points
• VQ-04: Color Accessibility (2/2) — Single series in brand green; adequate contrast in both themes; CVD-safe
• VQ-05: Layout & Canvas (3/4) — Good margins and no clipping, but y-axis domain [0, 7] leaves the lower ~40% of the plot area empty (all data sits between 2.8 and 6.3); domain starting at ~1.5–2.0 would utilize canvas height better
• VQ-06: Axis Labels & Title (2/2) — "Fertilizer Treatment" and "Crop Yield (t/ha)" both descriptive with units
• VQ-07: Palette Compliance (2/2) — First (only) series uses palette[0] (#009E73); background is theme-correct pageBg; chrome uses ink/inkSoft/grid tokens correctly in both renders

Design Excellence (10/20)

• DE-01: Aesthetic Sophistication (4/8) — Clean and professional, but single-color single-series error bar design with no visual differentiation across groups; looks like a well-configured default
• DE-02: Visual Refinement (4/6) — Horizontal-only grid, no top/right spines, circles have pageBg stroke for definition — above defaults, but not polished throughout
• DE-03: Data Storytelling (2/6) — Data displayed but not interpreted; NPK treatment is clearly the top performer but nothing in the visual emphasizes this; viewer must discover the story themselves

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Error bar plot with stems, caps, and mean circles — correct
• SC-02: Required Features (4/4) — Visible caps present, consistent bar widths, symmetric errors, 6 groups (within 3–20 spec range)
• SC-03: Data Mapping (3/3) — Categorical fertilizer treatments on X, numeric crop yield on Y, error bars symmetric around means
• SC-04: Title & Legend (3/3) — Title matches required format exactly; no legend needed for single series

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Varied means (3.2–5.7 t/ha) and SDs (0.38–0.61) demonstrate the full feature set; all error bar components shown
• DQ-02: Realistic Context (5/5) — Agricultural field trial context is real, neutral, and scientifically credible
• DQ-03: Appropriate Scale (4/4) — Cereal crop yield values and SD magnitudes are factually plausible; NPK outperforming single-nutrient treatments is scientifically correct

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat sequential structure: tokens → data → SVG → scales → grid → axes → error bars → circles → labels → title
• CQ-02: Reproducibility (2/2) — Hard-coded deterministic data; no random number generation
• CQ-03: Clean Imports (2/2) — No imports; d3 is a global per harness contract
• CQ-04: Code Elegance (2/2) — Clean D3 data-join idioms throughout; cx helper arrow function is appropriately concise; capHalf derived from bandwidth is correct
• CQ-05: Output & API (1/1) — Landscape orientation directive present; harness emits plot-{theme}.png + plot-{theme}.html; D3 v7 API used correctly

Library Mastery (8/10)

• LM-01: Idiomatic Usage (5/5) — d3.scaleBand with padding, d3.scaleLinear with .nice(), data joins using .join(), axis tick formatting — all idiomatic D3
• LM-02: Distinctive Features (3/5) — Error bars built from individual SVG line elements via D3 data joins + bandwidth-derived cap sizing is distinctively D3, but the approach is standard; no uniquely D3 feature beyond what other DOM-based libraries could replicate

Score Caps Applied

• None — no caps triggered; DE-01=4 and DE-02=4, both above the ≤2 threshold

Strengths

• Both themes render flawlessly with correct Imprint palette chrome adaptation; brand green #009E73 is identical across light and dark
• Realistic, scientifically-credible agricultural field trial data with plausible yield values and SDs; perfect spec compliance including visible caps and consistent widths
• Perfectly clean, flat D3 code structure with idiomatic data joins and bandwidth-based cap sizing
• Horizontal-only subtle gridlines, no top/right spines, and pageBg stroke on mean circles are thoughtful refinements above defaults

Weaknesses

• Y-axis domain starts at 0 while all data ranges from 2.8–6.3, leaving the bottom ~40% of the plot area empty — use domain [1.5, 7.0] or [2.0, 7.0] to better fill canvas height
• All six treatments share the same brand green color with no visual differentiation — apply d3.scaleOrdinal over t.palette to give each treatment its own Imprint color, boosting both aesthetic sophistication and storytelling
• No visual emphasis on the top-performing NPK treatment — color variation or a subtle annotation would guide the viewer immediately to the key insight

Issues Found

1. VQ-05 MINOR: Y-axis domain [0, 7] leaves large empty lower region — data cluster between 2.8 and 6.3
   • Fix: Set domain to or a clean [1.5, 7.0]
2. DE-01/DE-03 LOW: Single-color single-series design; no visual hierarchy to guide viewer to NPK insight
   • Fix: Use to assign a distinct Imprint color to each treatment; this also differentiates the groups visually and elevates aesthetic sophistication

AI Feedback for Next Attempt

The core quality is high — spec, data, code, and both theme renders are solid. The gap is entirely in Design Excellence. Fix two things: (1) apply over to give each of the 6 treatments its own Imprint color — this transforms the chart from a monochrome dot plot to a colorful comparison and immediately elevates DE-01 and DE-03; (2) tighten the y-axis domain to start around 1.5–2.0 instead of 0 so the data fills the full plot height and reduces empty lower whitespace. Keep everything else unchanged — grid, spines, cap sizing, and theme token usage are all well-executed.

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) background — correct light surface. Six vertical error bars plotted for fertilizer treatments (Control, Nitrogen, Phosphorus, Potassium, NPK, Organic), each with a mean circle (r=9 CSS), capped upper/lower stems, and a numeric mean label below the circle. Colors follow the Imprint palette in canonical order: Control=#009E73 (green), Nitrogen=#C475FD (lavender), Phosphorus=#4467A3 (blue), Potassium=#BD8233 (ochre), NPK=#AE3030 (matte red), Organic=#2ABCCD (cyan). NPK column has a subtle reddish highlight at 7% opacity and a "★ Top yield" annotation above its upper cap. Title "errorbar-basic · javascript · d3 · anyplot.ai" in bold dark ink at 22px CSS, axis labels ("Fertilizer Treatment", "Crop Yield (t/ha)") in dark ink at 16px CSS, tick labels in soft ink at 14px CSS — all clearly readable against the light background.

Dark render (plot-dark.png): Warm near-black (#1A1A17) background — correct dark surface. Layout and data are identical to the light render. Title, axis labels, and tick labels flip to light ink tokens (#F0EFE8 / #B8B7B0), all fully readable against the dark surface — no dark-on-dark failures detected. The six Imprint palette data colors are visually identical to the light render (only chrome flips). Mean value labels in treatment colors retain adequate contrast on the dark surface. NPK column highlight creates a subtle dark-red tint. "★ Top yield" annotation in matte red (#AE3030) remains legible on near-black.

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

Score: 86/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) — Title 22px, axis labels 16px, tick labels 14px all readable in both themes. Mean value labels at 13px CSS are just below the 14px style-guide floor; minor deduction.
• VQ-02: No Overlap (5/6) — No visible text overlap. Mean labels at y+26 sit 9–13px CSS above lower caps for compact treatments (Control, Potassium) — tight but clear.
• VQ-03: Element Visibility (6/6) — Mean circles at r=9 CSS are prominent for sparse 6-point data; capped stems fully visible in both themes.
• VQ-04: Color Accessibility (2/2) — Imprint palette CVD-safe across 6 hues spanning 4 perceptual families.
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed. Title ~60% width. Generous margins. No clipping.
• VQ-06: Axis Labels & Title (2/2) — X: "Fertilizer Treatment", Y: "Crop Yield (t/ha)" with units. Title format correct.
• VQ-07: Palette Compliance (2/2) — First series (Control) = #009E73. Positions 1–6 canonical order. Backgrounds #FAF8F1 / #1A1A17. Data colors identical across themes.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) — Above default. NPK column highlight + star annotation show intentional visual hierarchy. Distinct Imprint colors per treatment. Deliberate but not exceptional.
• DE-02: Visual Refinement (3/6) — Y-axis-only grid, subtle opacity. Circle stroke matches pageBg for definition. Top/right spines absent by D3 default. Slightly above default.
• DE-03: Data Storytelling (4/6) — NPK highlighted as top performer via column highlight + annotation creates a clear focal point. Mean labels enable quick quantitative comparison.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct error bar plot with point estimates, vertical stems, and capped ends.
• SC-02: Required Features (4/4) — Error bars above and below each point, visible caps, consistent cap widths, distinct group colors.
• SC-03: Data Mapping (3/3) — X: categorical treatments. Y: crop yield. Error: ±1 SD correct.
• SC-04: Title & Legend (3/3) — Title "errorbar-basic · javascript · d3 · anyplot.ai" — correct format. No legend needed (x-axis labels serve as group identifiers).

Data Quality (14/15)

• DQ-01: Feature Coverage (5/6) — 6 groups with means and SDs, symmetric error bars demonstrated. Asymmetric not shown (not required for basic).
• DQ-02: Realistic Context (5/5) — Crop yield field trial is realistic and neutral. Values (3.2–5.7 t/ha) and SDs (0.38–0.61) plausible for cereal crops.
• DQ-03: Appropriate Scale (4/4) — Y-axis 2.0–7.0 covers data with breathing room. Units appropriate for agricultural yield.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — No functions/classes; flat procedural D3 script.
• CQ-02: Reproducibility (2/2) — Fully deterministic: hardcoded data array, no RNG.
• CQ-03: Clean Imports (2/2) — No imports; d3 is a global; all tokens from window.ANYPLOT_TOKENS.
• CQ-04: Code Elegance (2/2) — cx helper, capHalf from bandwidth, .join() bindings — appropriate D3 patterns throughout.
• CQ-05: Output & API (1/1) — Harness handles output files. Current D3 7.9.0 API.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — scaleBand with padding, scaleLinear with .nice(), axisBottom/axisLeft, .call(), .join() — idiomatic D3 above default.
• LM-02: Distinctive Features (3/5) — scaleOrdinal for color mapping, scaleBand for categorical layout, axisLeft repurposed for y-gridlines via tickSize(-iw) — distinctly D3 techniques.

Score Caps Applied

• None

Strengths

• All 6 Imprint palette positions used in canonical order — first series (Control) correctly anchored to brand green #009E73
• Full spec compliance: symmetric error bars with visible caps, mean-value circles, and data labels
• Subtle NPK column highlight (palette[4] at 7% opacity) + star annotation creates a clear narrative focal point
• Both light and dark themes fully readable — ink tokens correctly threaded through all chrome elements
• Mean value labels below each circle enable quick quantitative comparison
• Clean, flat D3 code with proper .join() bindings and deterministic inline data

Weaknesses

• Mean value labels at 13px CSS (26px source) are just below the 14px style-guide minimum — increase to 14px
• Mean labels at y+26 sit 9–13px CSS above lower caps for compact treatments (Control, Potassium) — consider y+30 for a small breathing-room increase
• NPK falls at palette position 5 (matte red #AE3030) through canonical ordering; the "best yield" treatment in semantic-error red creates a slight cognitive mismatch — consider documenting as intentional or reordering

Issues Found

1. VQ-01 MINOR: Mean value labels at 13px CSS, slightly below 14px floor
   • Fix: Change .style("font-size", "13px") to .style("font-size", "14px") on .mean-val elements
2. VQ-02 MINOR: Mean labels proximity to lower error bar caps for compact SDs
   • Fix: Change y(d.mean) + 26 to y(d.mean) + 30 in mean-val text y-attribute

AI Feedback for Next Attempt

Implementation is solid and approved. If regenerating: increase mean-val label font-size from 13px to 14px, shift y offset from +26 to +30 for improved lower-cap clearance. Consider whether NPK (best yield) should use a non-red palette slot to avoid semantic ambiguity with matte red as an error/bad anchor.

Verdict: APPROVED