feat(chartjs): implement scatter-connected-temporal

[github-actions]

Implementation: scatter-connected-temporal - javascript/chartjs

Implements the javascript/chartjs version of scatter-connected-temporal.

File: plots/scatter-connected-temporal/implementations/javascript/chartjs.js

Parent Issue: #4675

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Background is warm off-white (#FAF8F1 — correct page surface, not pure white). Title "scatter-connected-temporal · javascript · chartjs · anyplot.ai" in bold dark text, fully readable. Subtitle "Color encodes time: 1970 (green) → 2020 (blue)" in slightly softer dark text. X-axis label "CO₂ Concentration (ppm)" and Y-axis label "Temperature Anomaly (°C)" clearly readable. Tick labels in dark gray (inkSoft), all readable. Year annotations (1970, 1980, 1990, 2000, 2010, 2020) in bold dark text above their points — all readable. Data: connected scatter with points transitioning from brand green (#009E73) at 1970 to blue (#4467A3) at 2020 via imprint_seq gradient. Start/end points have larger radius. Connecting line is semi-transparent green. Clear upward-right trend visible. All text is readable against the light background.

Dark render (plot-dark.png): Background is warm near-black (#1A1A17 — correct dark surface, not pure black). Title in light-colored text, clearly readable. Subtitle in slightly softer light text. Axis labels and tick labels in appropriate light theme colors (t.ink and t.inkSoft for dark theme). Year annotations in light gray — readable against dark background. No dark-on-dark failures detected. Data colors are identical to the light render: brand green (#009E73) at 1970 transitioning to blue (#4467A3) at 2020. The connecting semi-transparent green line is visible against dark background. Grid lines subtle. All text is readable against the dark background.

Score: 92/100

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

Visual Quality (30/30)

• VQ-01: Text Legibility (8/8) — All font sizes explicitly set: title 22px/600, subtitle 14px, axis labels 16px, tick labels 14px, year annotations bold 14px. Well-proportioned in both themes.
• VQ-02: No Overlap (6/6) — Year labels offset 14px above their points, no collisions with data or other text.
• VQ-03: Element Visibility (6/6) — 26 data points (sparse). Regular radius 6, emphasized endpoints radius 11. Line visible. Well-adapted to data density.
• VQ-04: Color Accessibility (2/2) — Green-to-blue gradient is CVD-safe (not red-green). White point borders add definition.
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed. Good layout balance; right padding=50 reserves space for year labels near the right edge.
• VQ-06: Axis Labels & Title (2/2) — X: "CO₂ Concentration (ppm)", Y: "Temperature Anomaly (°C)" — both descriptive with units.
• VQ-07: Palette Compliance (2/2) — Uses t.seq (imprint_seq: #009E73→#4467A3) for continuous temporal gradient. Start color is brand green. Background t.pageBg. All chrome theme-adaptive.

Design Excellence (14/20)

• DE-01: Aesthetic Sophistication (6/8) — Strong design: intentional temporal gradient, start/end marker emphasis, subtitle-as-color-legend. Clearly above library defaults but not at full FiveThirtyEight publication level.
• DE-02: Visual Refinement (4/6) — Grid is subtle via t.grid token, whitespace adequate. However Chart.js scale borders (spine equivalents) are not explicitly removed — border: { display: false } is absent from x/y scale configs.
• DE-03: Data Storytelling (4/6) — Temporal gradient and decade markers guide the reader through the CO₂-temperature narrative. Visual hierarchy via gradient and marker-size variation. Could be stronger with insight annotations at key inflection points.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Scatter with showLine: true — correct Chart.js connected scatter pattern.
• SC-02: Required Features (4/4) — Points connected chronologically, key time points annotated (decades), color gradient indicates direction, markers visible at each point.
• SC-03: Data Mapping (3/3) — X: CO₂, Y: Temperature Anomaly, time encoded via color gradient — all correct.
• SC-04: Title & Legend (3/3) — Title: scatter-connected-temporal · javascript · chartjs · anyplot.ai ✓. Legend hidden; subtitle explains color encoding — appropriate for a continuous gradient.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Temporal path, co-evolution of two variables, gradient direction, annotated key points, emphasized endpoints — all aspects covered.
• DQ-02: Realistic Context (5/5) — Real scientific context: CO₂ ppm vs global temperature anomaly 1970–2020. Neutral, compelling, not controversial.
• DQ-03: Appropriate Scale (4/4) — CO₂ 325–414 ppm and temperature anomaly −0.1 to 1.02 °C are accurate approximations of real Keeling Curve / NASA GISS data.

Code Quality (9/10)

• CQ-01: KISS Structure (2/3) — Two helper functions (hexToRgb, lerpColor) and two Chart.register plugin objects with methods are necessary for this gradient technique but deviate from the flat KISS ideal.
• CQ-02: Reproducibility (2/2) — All data hard-coded, no random elements.
• CQ-03: Clean Imports (2/2) — Uses window globals only; no unused variables.
• CQ-04: Code Elegance (2/2) — Clean structure, no over-engineering, no fake UI; plugin pattern is idiomatic for Chart.js.
• CQ-05: Output & API (1/1) — Chart.js is in INTERACTIVE_LIBRARIES; harness produces both PNG and HTML. No savefig call needed.

Library Mastery (9/10)

• LM-01: Idiomatic Usage (5/5) — Expertly uses scatter+showLine, Chart.register plugin system, per-point color/radius arrays, subtitle plugin, and all required harness settings.
• LM-02: Distinctive Features (4/5) — Custom Chart.register plugins for canvas background fill and year-label drawing are distinctly Chart.js patterns. Per-point color arrays and subtitle plugin also Chart.js-specific. Minor deduction: not every technique is uniquely Chart.js.

Score Caps Applied

• None

Strengths

• Correct use of imprint_seq (t.seq: #009E73 → #4467A3) as a continuous temporal gradient — brand green on earliest points satisfies VQ-07
• Chart.js plugin system used idiomatically: canvasBg fills page background before render, temporalLabels draws year annotations after data draw
• Real climate CO₂-vs-temperature data (1970–2020) is scientifically plausible, factually accurate, and immediately compelling
• Start/end points emphasized via larger radius (11 vs 6) creating natural focal points
• Subtitle plugin repurposed as a color-range legend — elegant solution for a continuous gradient
• All font sizes explicitly set; theme-adaptive chrome properly threaded through all elements

Weaknesses

• Chart.js axis scale borders (equivalent to spines) not removed — add border: { display: false } to both x and y scale configs for a cleaner L-shaped look
• Connecting line uses flat semi-transparent green throughout while point colors transition green→blue — minor visual inconsistency; consider using t.inkSoft at low opacity (e.g. 0.25) for the line so point colors are the unambiguous temporal signal
• Two helper functions (hexToRgb, lerpColor) reduce KISS purity — though necessary for this technique

Issues Found

1. DE-02 MEDIUM: Chart.js scale borders not removed — axes have default border lines on all sides of the data area. Fix: add border: { display: false } to both scales.x and scales.y objects.
2. DE-03 MEDIUM: No insight annotations at key moments. The trend is visible but highlights like "2016 record year" or "rapid acceleration after 2000" would strengthen storytelling. Fix: add one or two afterDatasetsDraw annotations for significant inflection points.

AI Feedback for Next Attempt

Improve visual refinement: add border: { display: false } to both x and y scale configs to remove Chart.js's default axis box borders (this creates the style-guide's preferred L-shaped or open look). Optionally, change the connecting line color from the static green to t.inkSoft at low alpha (~0.25) so the gradient point colors are the unambiguous temporal signal. Consider adding one targeted annotation (e.g. "2016: record +1.01°C" near the 2016 point) to lift storytelling from "good" to "excellent." The core approach — imprint_seq gradient, custom plugins, real climate data — is strong; these are polish fixes only.

Verdict: APPROVED