feat(highcharts): implement scatter-connected-temporal

[github-actions]

Implementation: scatter-connected-temporal - javascript/highcharts

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

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

Parent Issue: #4675

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white #FAF8F1 background. Title "scatter-connected-temporal · javascript · highcharts · anyplot.ai" in dark bold text (~22px) fills ~70% of width — well-proportioned. Subtitle "US unemployment rate vs. inflation rate, 1960–1995 · connected chronologically" in lighter secondary text. X-axis "Unemployment Rate (%)" and Y-axis "Inflation Rate (%)" with % tick format, both clearly labeled. Subtle grid lines on both axes (appropriate for scatter). Single series in brand green #009E73: 36 data points connected by lineWidth-2 lines in temporal order; regular markers as small circles (radius 5); start point 1960 as larger triangle (radius 9); end point 1995 as larger diamond (radius 9). Year labels at 5-year intervals with textOutline for legibility. Connected path traces the Phillips Curve — cyclical 1960s pattern, stagflation peak visible at upper area (~13.5% inflation, 1980 label), and 1980s recovery path. All text is clearly readable against the light background; minor label crowding around 5.5% unemployment where 1960, 1990, and 1995 labels converge.

Dark render (plot-dark.png): Warm near-black #1A1A17 background — correct. Title, subtitle, axis labels, and tick labels all render in light-colored text, fully readable against the dark background. No dark-on-dark failures. Grid lines remain subtle and visible. Data series is brand green #009E73 — identical to light render, confirming only chrome flips. Marker outlines using t.pageBg adapt to dark surface, maintaining definition. All year labels readable. The green series reads with good contrast on the dark surface. Both renders pass the legibility check.

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

Score: 86/100

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

Visual Quality (27/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set; well-proportioned. Year annotation labels at 13px slightly small for optimal mobile readability.
• VQ-02: No Overlap (5/6) — All labels readable. Minor crowding around 5.5% unemployment zone where 1960, 1990, 1995 labels converge with crossing paths.
• VQ-03: Element Visibility (5/6) — Lines and markers visible. Start/end at radius 9 are well-sized; regular circles at radius 5 slightly small for 36 sparse data points.
• VQ-04: Color Accessibility (2/2) — Single brand green series, good contrast on both themes, CVD-safe.
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed. Good proportions, no overflow or clipping.
• VQ-06: Axis Labels & Title (2/2) — Both axes descriptive with units and % format.
• VQ-07: Palette Compliance (2/2) — palette[0] = #009E73 for single series; transparent background over correct theme surfaces; all chrome uses theme tokens; data colors identical between renders.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) — Above default (4): distinct start/end marker symbols (▲/◆), descriptive subtitle, textOutline on labels, and theme-adaptive marker edges add polish. Clean overall look but lacks a dominant focal point or publication-ready emphasis that would push to 6+.
• DE-02: Visual Refinement (3/6) — Above default (2): transparent background, subtle grid via t.grid token, no redundant legend for single series. Grid on both axes is appropriate for scatter. Could further refine whitespace margins and reduce grid opacity.
• DE-03: Data Storytelling (4/6) — Above default (2): start/end markers create temporal reading anchors, 5-year interval labels provide waypoints, subtitle contextualizes the Phillips Curve narrative. Missing: no visual emphasis on the 1979–1981 stagflation climax (the key insight) — a larger marker or call-out label at the 1980 peak would make the story land harder.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct connected scatter using Highcharts scatter type with lineWidth — preserves temporal (data-array) order unlike line series.
• SC-02: Required Features (4/4) — Chronological connections ✓, key time-point annotations ✓, markers at every point ✓, start/end differentiated with distinct symbols and larger radius ✓. Color gradient for direction is optional per spec.
• SC-03: Data Mapping (3/3) — X = unemployment, Y = inflation, time used for ordering; all 36 points visible.
• SC-04: Title & Legend (3/3) — Title: scatter-connected-temporal · javascript · highcharts · anyplot.ai ✓. No legend (correct for single series) ✓.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Phillips Curve demonstrates cyclical patterns, regime change, hysteresis, and equilibrium — all key aspects of connected scatter.
• DQ-02: Realistic Context (5/5) — US unemployment vs. inflation 1960–1995 is historically accurate, widely cited, and neutral.
• DQ-03: Appropriate Scale (4/4) — Values align with actual US historical data; 36 annual points within the 10–100 spec range; stagflation peak ~13.5% in 1980 is factually correct.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Flat script: data → processing → chart config. No functions or classes.
• CQ-02: Reproducibility (2/2) — Hard-coded historical data, fully deterministic.
• CQ-03: Clean Imports (2/2) — No imports (Highcharts global); correct for harness environment.
• CQ-04: Code Elegance (2/2) — Clean .map() for data transformation, per-point marker overrides are concise, no fake UI.
• CQ-05: Output & API (1/1) — Highcharts 12.6.0 API; harness emits plot-{theme}.png + plot-{theme}.html.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — Above default (3): correctly uses scatter + lineWidth to preserve temporal ordering (documented in code comment), sets both animation flags, applies textOutline for label legibility — solid Highcharts pattern knowledge.
• LM-02: Distinctive Features (3/5) — Above default (1): per-point marker.symbol overrides (triangle/diamond/circle), textOutline on data labels, and the scatter-type trick for temporal order are all Highcharts-specific patterns.

Score Caps Applied

• None applied. (DE-01 = 5 > 2; all other caps not triggered.)

Strengths

• Correct Highcharts pattern: scatter type with lineWidth preserves data-array (temporal) order — unlike line series which sorts by x-value — clearly understood and documented in code comment
• Distinct start (▲, radius 9) and end (◆, radius 9) marker symbols give immediate visual anchors for the temporal journey
• All theme tokens correctly applied: t.ink for title, t.inkSoft for axes/subtitles, t.grid for grid lines, t.pageBg for marker outlines — complete chrome adaptation
• Historically meaningful US Phillips Curve dataset that showcases cyclical patterns, stagflation regime changes, and return to equilibrium
• textOutline: '2px ' + t.pageBg on year annotations ensures readability on any background

Weaknesses

• Regular data point markers at radius: 5 are slightly small for 36 sparse data points — increase to radius: 7–8 for better individual observation visibility (style guide: prominent markers for <50 points)
• No visual emphasis on the 1979–1981 stagflation peak (the key insight in this dataset) — consider a larger marker or distinct dataLabel at the 1980 point to create a focal point and lift DE-01/DE-03
• Year annotation fontSize: '13px' could be increased to '15px' to improve mobile readability without crowding
• Design lacks sufficient polish for 90+ (attempt 1 threshold): consider adding a directional time-flow annotation or arrow, and increasing chart margins to create more breathing room

Issues Found

1. VQ-03 MINOR: Regular markers at radius: 5 slightly small for sparse 36-point scatter
   • Fix: Increase default marker radius from 5 to 7–8 in plotOptions.scatter.marker
2. DE-01/DE-03 LOW: No focal point on the stagflation climax — the key data story is not visually emphasized
   • Fix: Add a custom dataLabel or larger marker at the 1980 data point (highest inflation peak) to draw the reader's eye to the central insight; or use a different marker color/size for the 1974–1981 stagflation regime
3. DE-02 REFINEMENT: Chart margins could be more generous; grid opacity could be reduced further
   • Fix: Add chart.marginTop: 60, chart.marginBottom: 80 (or similar), reduce gridLineWidth to 0.5 or lower gridLineColor opacity

AI Feedback for Next Attempt

The implementation is technically strong and fully spec-compliant. To push past 90, focus on design excellence: (1) add a visual focal point at the 1980 stagflation peak — the spec says "key time points should be annotated" and this is the most important one; (2) increase regular marker radius from 5 to 7–8 for sparse data; (3) consider a directional arrow or gradient hint to make the temporal flow immediately obvious without tracing from the triangle to the diamond; (4) generous margins and slightly larger year annotation labels (15px) would polish the overall feel.

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): The plot renders on a warm off-white (#FAF8F1) background. The title "scatter-connected-temporal · javascript · highcharts · anyplot.ai" appears in dark ink at ~65% of canvas width — well-proportioned. The subtitle "US Phillips Curve, 1960 → 1995 · path traces chronological order" in inkSoft provides immediate temporal context. Y-axis title "Inflation Rate (%)" and X-axis title "Unemployment Rate (%)" both carry units and are clearly readable. Tick labels with % suffix are visible on both axes. Year annotations (1960, 1965, 1970, 1975, 1985, 1990, 1995) appear in inkSoft with white textOutlines above their respective markers. The "★ Stagflation Peak" label in amber sits above the enlarged amber circle at 1980. The connected scatter path is brand green (#009E73) with a triangle marker at the 1960 start, diamond at the 1995 end, and circle markers elsewhere. The Phillips Curve spiral shape is clearly legible. All text is readable against the light background.

Dark render (plot-dark.png): The plot renders on a warm near-black (#1A1A17) background. Title appears in light ink (#F0EFE8) — fully readable against the dark surface. Axis titles, year annotation labels, and tick labels are all in light inkSoft tones; no dark-on-dark failures are present. The amber "★ Stagflation Peak" label is visually distinct on the dark surface. Grid lines are subtly visible. The data path is the same brand green (#009E73) as the light render — data colors are theme-invariant. The amber peak marker is identical. Start/end marker shapes are preserved. All chrome adapts correctly to the dark theme with no legibility issues.

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

Score: 88/100

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

Visual Quality (28/30)

• VQ-01: Text Legibility (7/8) — All font sizes explicitly set (22px title, 16px axis titles, 14px ticks/labels, 15px year labels). Readable in both themes. Minor: year label fontSize 15px is slightly generous in the dense 5–6% unemployment cluster.
• VQ-02: No Overlap (5/6) — Year labels 1960, 1990, 1995 cluster near x≈5.5% unemployment (different y-values prevent actual overlap but creates minor visual crowding). No text overlaps data elements.
• VQ-03: Element Visibility (6/6) — 36 data points with radius 7–13px markers; appropriately prominent for sparse dataset. lineWidth 2 connects them clearly. Start/end/peak markers are more prominent.
• VQ-04: Color Accessibility (2/2) — Single series (#009E73) with amber accent for peak — CVD-safe combination.
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed. Good proportions, generous spacing, legend correctly disabled for single series.
• VQ-06: Axis Labels & Title (2/2) — "Unemployment Rate (%)" and "Inflation Rate (%)" with units.
• VQ-07: Palette Compliance (2/2) — First series #009E73, amber #DDCC77 used semantically for peak/warning role, background #FAF8F1 light / #1A1A17 dark, all chrome token-driven.

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Thoughtful: amber semantic accent, distinct marker shapes for temporal anchors (triangle=start, diamond=end), textOutline for cross-theme readability, informative subtitle. Clearly above library defaults but not quite publication-ready.
• DE-02: Visual Refinement (4/6) — Subtle grid (0.5 width), transparent background, pageBg marker edges, spacing set. Good refinement; default Highcharts axis structure is retained.
• DE-03: Data Storytelling (4/6) — Stagflation peak is a clear focal point (amber, enlarged, annotated with star). Subtitle orients the viewer to the temporal path. Start/end markers guide the reader through the loop. Strong Phillips Curve narrative.

Spec Compliance (14/15)

• SC-01: Plot Type (5/5) — Connected scatter correctly implemented via Highcharts scatter type with lineWidth (preserves data order unlike line series).
• SC-02: Required Features (3/4) — Points connected in chronological order ✓, key time points annotated ✓, markers at each position ✓, direction via start/end marker shapes ✓. No systematic color gradient for temporal progression (spec says "consider" — optional, but would strengthen the temporal narrative).
• SC-03: Data Mapping (3/3) — X=unemployment, Y=inflation, data array ordered 1960→1995.
• SC-04: Title & Legend (3/3) — Title scatter-connected-temporal · javascript · highcharts · anyplot.ai ✓. Legend disabled for single series ✓.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — Connected path, temporal ordering, directional start/end markers, annotated peak, characteristic spiral loop, both cyclical and structural-break patterns visible.
• DQ-02: Realistic Context (5/5) — US Phillips Curve (1960–1995): real, well-known, neutral macroeconomic historical data.
• DQ-03: Appropriate Scale (4/4) — Historically accurate: 1960s low inflation (~1–1.7%), 1973–1980 stagflation climax (13.5%), 1980s disinflation. Values match historical record.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Data → chart. No functions or classes.
• CQ-02: Reproducibility (2/2) — Hard-coded deterministic rawData array.
• CQ-03: Clean Imports (2/2) — No imports; uses Highcharts global and ANYPLOT_TOKENS only.
• CQ-04: Code Elegance (2/2) — Clean, idiomatic JS. rawData.map() for per-point construction. Conditional per-point properties are clear and purposeful.
• CQ-05: Output & API (1/1) — Interactive library; harness produces plot-{theme}.png + plot-{theme}.html. No deprecated API.

Library Mastery (8/10)

• LM-01: Idiomatic Usage (4/5) — Scatter+lineWidth is the correct Highcharts idiom for connected scatter. Per-point marker objects, formatter callbacks, tooltip configuration — all idiomatic.
• LM-02: Distinctive Features (4/5) — Scatter+lineWidth data-order-preserving pattern is distinctly Highcharts. Per-point marker customization (radius, symbol, fillColor) via nested objects leverages Highcharts' rich point API. Custom tooltip and dataLabel formatters use Highcharts' callback system effectively.

Score Caps Applied

• None applied — DE-01=5 and DE-02=4 (both above the ≤2 threshold for the 75-cap); no other cap conditions met.

Strengths

• Connected scatter via scatter+lineWidth preserves data insertion order (correct Highcharts idiom — line type would sort by x and destroy the temporal path)
• Amber semantic anchor (#DDCC77) used correctly for 1980 stagflation peak marker (warning/peak role matches semantic intent)
• Per-point marker differentiation (triangle start, diamond end, enlarged amber peak) creates meaningful temporal anchors without any annotation clutter
• textOutline: '2px ' + t.pageBg technique ensures year labels readable over the path lines in both light and dark themes
• Historically accurate US Phillips Curve data with correct inflation/unemployment values — the spiral shape of the loop is an authentic feature of this dataset
• All token-driven chrome adapts correctly — dark render shows light text on dark background with no dark-on-dark failures

Weaknesses

• No color gradient for temporal progression — the spec says "consider a subtle color gradient (e.g., light to dark) to encode temporal progression"; currently only marker shape (triangle/diamond) signals start/end, which is valid but the gradient would make the direction continuously legible along the full path
• Year labels (1960, 1990, 1995) cluster near x≈5.5% unemployment — minor visual crowding even though actual pixel overlap is not present; reducing year label fontSize to 13px would ease this
• DE-01 ceiling: typographic hierarchy between title (22px, weight 600) and subtitle (14px) is good, but slightly bolder title or marginally larger subtitle contrast would push the design closer to publication-ready

Issues Found

1. SC-02 MINOR: No systematic temporal color gradient along the path
   • Fix: Add a second invisible series or use colorByPoint: true with a computed gradient from t.seq[0] → t.seq[1] to encode earlier→later years along the path
2. VQ-02 MINOR: Label crowding in the 5–5.6% unemployment zone
   • Fix: Reduce year label fontSize from '15px' to '13px' in plotOptions.scatter.dataLabels.style

AI Feedback for Next Attempt

The implementation is strong and ready for approval at attempt 2 threshold (88 ≥ 80). If a further attempt is needed, focus on: (1) adding a light-to-dark color gradient along the connected path to encode temporal direction continuously, and (2) reducing year label fontSize from 15px to 13px to ease crowding in the dense center cluster. These would lift the score toward 92–94.

Verdict: APPROVED