feat(d3): implement horizon-basic

[github-actions]

Implementation: horizon-basic - javascript/d3

Implements the javascript/d3 version of horizon-basic.

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

Parent Issue: #1877

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white (#FAF8F1-consistent) background. Title "Facility Temperature Deviation · horizon-basic · javascript · d3 · anyplot.ai" is centered at top in bold dark ink. A right-aligned diverging legend ("Deviation from baseline (°C)", -6°C / 0°C / +6°C) sits above the chart. 8 horizontal strips labeled with station names (Greenhouse North/South, Warehouse A/B, Rooftop Array, Basement Vault, Loading Dock, Server Room) show folded horizon bands — light-to-dark blue mounds above baseline, light-to-dark red mounds below baseline, following a clear diurnal rhythm. Bottom axis shows "Jan 01"–"Jan 09". All text is clearly readable against the light background.

Dark render (plot-dark.png): Warm near-black (#1A1A17-consistent) background. Same title, legend, row labels, and axis ticks now render in light ink/inkSoft tones, fully legible. The red/blue data bands are identical in hue and magnitude-to-saturation mapping to the light render — only chrome flipped. No dark-on-dark failures: every text element (title, legend units, row labels, date ticks) reads clearly against the near-black surface.

Both paragraphs above confirm both renders were inspected and are legible.

Score: 89/100

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

Visual Quality (29/30)

• VQ-01: Text Legibility (7/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 (12/20)

• DE-01: Aesthetic Sophistication (6/8) - Genuine horizon-fold technique with magnitude-graded shading
• DE-02: Visual Refinement (3/6) - Outer bounding rect + per-strip baseline rule add extra chrome
• DE-03: Data Storytelling (3/6) - No single-series emphasis or focal point across 8 parallel strips

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) - Small helper functions (bandScale, bandPath, makeRng), justified by repetition
• 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 (9/10)

• LM-01: Idiomatic Usage (5/5)
• LM-02: Distinctive Features (4/5) - Hand-built horizon fold via clipPath + layered d3.area is exactly D3's bespoke-chart use case

Score Caps Applied

• None

Strengths

• Correctly implements the horizon-chart fold algorithm (overlaid bands via clipPath, one <path> per band per sign) matching the classic horizon-chart definition rather than a fake/simulated version.
• Color intensity increases with magnitude across 3 mirrored bands, using the spec's own suggested blue-positive/red-negative convention with theme-adaptive Imprint diverging stops (div[0]/midpoint/div[2]) — data colors identical between light and dark renders.
• Deterministic, reproducible data via a seeded LCG, with a plausible, neutral facility-monitoring context (8 named sensors, diurnal cycle + bounded random walk).
• Theme-correct chrome in both renders with no legibility failures.
• Clean, idiomatic D3: scaleTime, d3.area + curveMonotoneX, clipPath, axisBottom, no extraneous imports, no fake interactivity, animations correctly omitted for the static harness capture.

Weaknesses

• The bounding rect drawn around the whole strip area plus a baseline rule under every strip add a bit of extra chrome/frame that slightly undercuts visual refinement — consider dropping the outer rect or lightening it further.
• With 8 near-parallel strips and no single-series emphasis, there's no visual hook drawing the eye to a specific noteworthy pattern or outlier sensor — a subtle highlight would strengthen data storytelling.
• Legend swatch/tick text (13px) and station row labels (15px) are the smallest text elements on the canvas — legible at full size but tight once scaled down to a ~400px thumbnail.
• Small helper functions add minor structural complexity versus a fully flat script; justified here by the per-band/per-series repetition.

Issues Found

1. DE-02 LOW: Outer bounding rect + per-strip baseline rules read as extra chrome
   • Fix: Drop the outer rect border or reduce its opacity; keep only the subtle per-strip separator if needed for readability.
2. DE-03 LOW: No clear focal point across 8 near-identical strips
   • Fix: Consider a subtle emphasis (bolder label, thin outline) on the sensor with the most volatile deviation to give the chart a storytelling hook.

AI Feedback for Next Attempt

Solid, technically correct horizon chart — no repair needed. If iterating further: drop or lighten the outer bounding rect for a cleaner frame, and consider a subtle visual emphasis on the most volatile series to add a storytelling focal point.

Verdict: APPROVED