feat(highcharts): implement scatter-annotated

[github-actions]

Implementation: scatter-annotated - javascript/highcharts

Implements the javascript/highcharts version of scatter-annotated.

File: plots/scatter-annotated/implementations/javascript/highcharts.js

Parent Issue: #2790

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (~#FAF8F1). Bold dark title "scatter-annotated · javascript · highcharts · anyplot.ai" at top. Dark-gray axis titles and medium-gray tick labels on both log-scaled axes ("Annual Revenue (USD billions, log scale)" / "Market Cap (USD billions, log scale)"), with subtle light-gray gridlines. 15 green (#009E73) markers at ~70% opacity, each labeled with a company name (Apple, Microsoft, Alphabet, Amazon, Nvidia, Meta, Tesla, Broadcom, Oracle, Adobe, Salesforce, IBM, Intel, Cisco, Uber) offset to the right of the point. All text is clearly readable against the light background.

Dark render (plot-dark.png): Warm near-black background (~#1A1A17). Title and axis titles render in off-white, tick labels in light gray, gridlines subtle light-on-dark. Data markers are the identical green at the identical positions/opacity as the light render — only chrome flipped, as required. No dark-on-dark or light-on-light failures observed; all text remains legible.

Both paragraphs confirmed above — both renders viewed and checked for legibility.

Score: 77/100

Category	Score	Max
Visual Quality	27	30
Design Excellence	8	20
Spec Compliance	14	15
Data Quality	14	15
Code Quality	10	10
Library Mastery	4	10
Total	77	100

Visual Quality (27/30)

• VQ-01: Text Legibility (7/8)
• VQ-02: No Overlap (5/6)
• VQ-03: Element Visibility (5/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 (8/20)

• DE-01: Aesthetic Sophistication (4/8) - Competent style-guide defaults, no distinctive polish
• DE-02: Visual Refinement (2/6) - Minimal customization beyond token-driven theming
• DE-03: Data Storytelling (2/6) - No visual hierarchy or focal point beyond the text labels

Spec Compliance (14/15)

• SC-01: Plot Type (5/5)
• SC-02: Required Features (3/4) - Labels + moderate alpha present; no connecting lines/arrows for offset labels
• SC-03: Data Mapping (3/3)
• SC-04: Title & Legend (3/3)

Data Quality (14/15)

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

Code Quality (10/10)

• CQ-01: KISS Structure (3/3)
• 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 (4/10)

• LM-01: Idiomatic Usage (3/5)
• LM-02: Distinctive Features (1/5) - Generic dataLabels usage, no distinctive Highcharts-specific feature

Score Caps Applied

• None

Strengths

• Theme-adaptive chrome correctly threaded through (title/axis/tick/grid flip color; data stays #009E73 in both themes; backgrounds match #FAF8F1/#1A1A17).
• Log-log axes are the right call for the wide-range revenue vs. market-cap data (Adobe ~$19B to Amazon ~$575B revenue), avoiding squashing small companies into a corner.
• 15 data labels stay legible and mostly non-overlapping with allowOverlap: false, including graceful placement for the Amazon point near the right edge.
• Realistic, neutral, well-known company dataset with plausible illustrative figures.
• Clean, minimal, deterministic implementation with the correct mount-node/animation contract for the JS harness.

Weaknesses

• Spec notes call for "subtle connecting lines or arrows from labels to points when offset" — labels are simply offset (x:10, y:4) with no leader line. Add a thin connector when Highcharts' overlap avoidance displaces a label from its marker.
• Design excellence is generic: no additional customization beyond style-guide defaults (no accent styling, no size/emphasis variation to create a focal point).
• All 15 points share identical size/color, so there's no visual hierarchy beyond the text labels themselves — consider emphasizing a subset (e.g. top performers) if the spec allows.

Issues Found

1. SC-02 LOW: Missing subtle connector lines from offset labels to their points
   • Fix: Add a thin t.inkSoft/muted connector line (or Highcharts label connector) when a data label is displaced from its marker
2. DE-01/DE-03 LOW: Generic styling with no visual hierarchy or focal point
   • Fix: Consider highlighting 1-2 standout companies (e.g. via a distinct marker size or the semantic-red anchor for an outlier) to create a clearer story, while keeping the rest on brand green

AI Feedback for Next Attempt

Solid, spec-compliant implementation. To raise Design Excellence and Library Mastery: add subtle leader lines connecting offset labels to their points (per the spec notes), and consider a deliberate visual hierarchy (e.g. emphasize outliers or top performers) rather than uniform markers throughout.

Verdict: APPROVED

[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, not pure white). Bold dark title "scatter-annotated · javascript · highcharts · anyplot.ai" centered at top (~35% of canvas width, well within bounds). Dark-gray axis titles with units ("Annual Revenue (USD billions, log scale)" / "Market Cap (USD billions, log scale)"), medium-gray tick labels on both log-scaled axes, subtle light-gray gridlines. 15 green (#009E73) circular markers, most at ~70% opacity with a short subtle connector dash leading to a black company-name label offset to the right. Nvidia and Amazon render as larger, fully-opaque markers with bold labels — clear focal-point highlighting. Pixel-cropped the right edge to confirm the "Amazon" label (closest to the canvas boundary) is fully visible with margin, not clipped. All text is clearly readable against the light background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17, not pure black). Title and axis titles render in light off-white, tick labels in light gray, gridlines and connector dashes in a subtle light-on-dark tone — no dark-on-dark failures. Data markers are pixel-identical in color, position, opacity, and highlight treatment to the light render; only chrome (background, text, grid, connectors) flipped, exactly as required. All text is clearly readable against the dark background.

Both renders pass the theme-readability check.

Score: 88/100

Category	Score	Max
Visual Quality	29	30
Design Excellence	12	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	7	10
Total	88	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 (5/8) - Genuine focal-point styling added (larger opaque marker + bold label for Nvidia/Amazon), but overall chrome still close to defaults
• DE-02: Visual Refinement (3/6) - Custom SVG-rendered connector lines are a real refinement touch; spines/grid otherwise unchanged from defaults
• DE-03: Data Storytelling (4/6) - Clear, reasoned focal points now create real visual hierarchy vs. the prior all-identical markers

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 (10/10)

• CQ-01: KISS Structure (3/3)
• 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 (7/10)

• LM-01: Idiomatic Usage (4/5) - Combines logarithmic axes, dataLabels, and a render-event hook into the SVG renderer
• LM-02: Distinctive Features (3/5) - Manual connector-line drawing via chart.renderer.path in the render event is a genuine, documented Highcharts-specific workaround

Score Caps Applied

• None

Strengths

• Both previously flagged weaknesses are fixed with real implementation work: subtle connector lines (drawn via chart.renderer.path in the render event, since Highcharts has no built-in scatter dataLabel connector) now link every offset label back to its marker, and Nvidia/Amazon are highlighted with a larger, bolder marker plus bold label text as documented focal points.
• Log-log axes remain the right call for the wide-range revenue vs. market-cap data (Adobe ~$19B to Amazon ~$575B revenue).
• Theme-adaptive chrome correctly threaded through, including the connector-line color (t.inkSoft); data colors are pixel-identical across themes.
• Realistic, neutral, well-known company dataset with plausible illustrative figures.
• Clean, minimal, deterministic implementation with the correct mount-node/animation contract.

Weaknesses

• Design excellence, while improved, is still fairly conservative beyond the two focal points — chrome remains close to style-guide defaults.
• Title renders at only ~35% of canvas width at 22px — well under the usual 50–70% comfortable range; not a defect (nothing overflows or looks squeezed) but there's headroom to size it up slightly for better visual weight on the wide canvas.

Issues Found

1. DE-01/DE-02 LOW-MEDIUM: Design excellence beyond the two highlighted focal points is still close to defaults.
   • Fix: Consider light-touch refinements such as a subtle reference line/band, or minor axis-tick emphasis around the highlighted region.

AI Feedback for Next Attempt

This attempt fixed both real weaknesses from the last review (connector lines, visual hierarchy). If iterating further, focus on additional visual-refinement touches (grid/spine treatment) rather than another functional feature — the spec's required elements are all present.

Verdict: APPROVED