feat(d3): implement scatter-basic (#8249)

## Implementation: `scatter-basic` - javascript/d3

Implements the **javascript/d3** version of `scatter-basic`.

**File:** `plots/scatter-basic/implementations/javascript/d3.js`

**Parent Issue:** #611

---
:robot: *[impl-generate
workflow](https://github.com/MarkusNeusinger/anyplot/actions/runs/26850510462)*

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Markus Neusinger <2921697+MarkusNeusinger@users.noreply.github.com>

Author: github-actions[bot]

plots/scatter-basic/implementations/javascript/d3.js

@@ -0,0 +1,128 @@
+// anyplot.ai
+// scatter-basic: Basic Scatter Plot
+// Library: d3 7.9.0 | JavaScript 22.22.3
+// Quality: 92/100 | Created: 2026-06-02
+
+const t = window.ANYPLOT_TOKENS;
+const { width, height } = window.ANYPLOT_SIZE;
+const margin = { top: 80, right: 60, bottom: 100, left: 120 };
+const iw = width - margin.left - margin.right;
+const ih = height - margin.top - margin.bottom;
+
+// --- Data (deterministic LCG seed=42, marketing spend vs sales revenue) ----
+let seed = 42;
+function lcgRand() {
+  seed = (1664525 * seed + 1013904223) >>> 0;
+  return seed / 4294967296;
+}
+function lcgRandn() {
+  const u1 = lcgRand() + 1e-10;
+  const u2 = lcgRand();
+  return Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
+}
+
+const data = Array.from({ length: 100 }, () => {
+  const spend = 10 + lcgRand() * 140;
+  const sales = Math.max(0.3, 0.8 + spend * 0.035 + lcgRandn() * 1.2);
+  return { x: spend, y: sales };
+});
+
+// --- OLS regression and Pearson r ------------------------------------------
+const n = data.length;
+const sumX = data.reduce((s, d) => s + d.x, 0);
+const sumY = data.reduce((s, d) => s + d.y, 0);
+const sumXY = data.reduce((s, d) => s + d.x * d.y, 0);
+const sumX2 = data.reduce((s, d) => s + d.x * d.x, 0);
+const sumY2 = data.reduce((s, d) => s + d.y * d.y, 0);
+const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
+const intercept = (sumY - slope * sumX) / n;
+const r = (n * sumXY - sumX * sumY) /
+  Math.sqrt((n * sumX2 - sumX * sumX) * (n * sumY2 - sumY * sumY));
+
+// --- SVG mount -------------------------------------------------------------
+const svg = d3.select("#container")
+  .append("svg")
+  .attr("width", width)
+  .attr("height", height);
+const g = svg.append("g").attr("transform", `translate(${margin.left},${margin.top})`);
+
+// --- Scales ----------------------------------------------------------------
+const x = d3.scaleLinear()
+  .domain([0, d3.max(data, (d) => d.x) * 1.04]).nice().range([0, iw]);
+const y = d3.scaleLinear()
+  .domain([0, d3.max(data, (d) => d.y) * 1.04]).nice().range([ih, 0]);
+
+// --- Grid lines (both axes, floating-grid — no domain line) ----------------
+g.append("g").attr("transform", `translate(0,${ih})`)
+  .call(d3.axisBottom(x).ticks(8).tickSize(-ih).tickFormat(""))
+  .call((ax) => ax.select(".domain").remove())
+  .call((ax) => ax.selectAll("line").attr("stroke", t.grid));
+
+g.append("g")
+  .call(d3.axisLeft(y).ticks(6).tickSize(-iw).tickFormat(""))
+  .call((ax) => ax.select(".domain").remove())
+  .call((ax) => ax.selectAll("line").attr("stroke", t.grid));
+
+// --- X axis (floating — domain removed for clean open look) ----------------
+g.append("g").attr("transform", `translate(0,${ih})`)
+  .call(d3.axisBottom(x).ticks(8).tickFormat((d) => `${d}K`))
+  .call((ax) => ax.select(".domain").remove())
+  .call((ax) => ax.selectAll(".tick text").attr("fill", t.inkSoft).style("font-size", "18px"))
+  .call((ax) => ax.selectAll(".tick line").remove());
+
+// --- Y axis (floating — domain removed for clean open look) ----------------
+g.append("g")
+  .call(d3.axisLeft(y).ticks(6).tickFormat((d) => `$${d.toFixed(1)}M`))
+  .call((ax) => ax.select(".domain").remove())
+  .call((ax) => ax.selectAll(".tick text").attr("fill", t.inkSoft).style("font-size", "18px"))
+  .call((ax) => ax.selectAll(".tick line").remove());
+
+// --- OLS trend line --------------------------------------------------------
+const xDom = x.domain();
+g.append("path")
+  .datum([
+    { x: xDom[0], y: intercept + slope * xDom[0] },
+    { x: xDom[1], y: intercept + slope * xDom[1] },
+  ])
+  .attr("fill", "none")
+  .attr("stroke", t.palette[0])
+  .attr("stroke-width", 2.5)
+  .attr("stroke-opacity", 0.5)
+  .attr("d", d3.line().x((d) => x(d.x)).y((d) => y(d.y)));
+
+// --- Scatter markers -------------------------------------------------------
+g.selectAll("circle").data(data).join("circle")
+  .attr("cx", (d) => x(d.x))
+  .attr("cy", (d) => y(d.y))
+  .attr("r", 8)
+  .attr("fill", t.palette[0])
+  .attr("fill-opacity", 0.7)
+  .attr("stroke", t.pageBg)
+  .attr("stroke-width", 1.5);
+
+// --- Correlation annotation (upper-right margin) ---------------------------
+g.append("text")
+  .attr("x", iw - 8)
+  .attr("y", 22)
+  .attr("text-anchor", "end")
+  .attr("fill", t.inkSoft)
+  .style("font-size", "16px")
+  .text(`r ≈ ${r.toFixed(2)}`);
+
+// --- Axis labels -----------------------------------------------------------
+svg.append("text")
+  .attr("x", margin.left + iw / 2).attr("y", height - 18)
+  .attr("text-anchor", "middle").attr("fill", t.inkSoft)
+  .style("font-size", "22px").text("Marketing Spend ($K)");
+
+svg.append("text")
+  .attr("transform", `translate(22,${margin.top + ih / 2}) rotate(-90)`)
+  .attr("text-anchor", "middle").attr("fill", t.inkSoft)
+  .style("font-size", "22px").text("Sales Revenue ($M)");
+
+// --- Title -----------------------------------------------------------------
+svg.append("text")
+  .attr("x", width / 2).attr("y", 48)
+  .attr("text-anchor", "middle").attr("fill", t.ink)
+  .style("font-size", "28px").style("font-weight", "600")
+  .text("scatter-basic · javascript · d3 · anyplot.ai");

plots/scatter-basic/metadata/javascript/d3.yaml

@@ -0,0 +1,270 @@
+library: d3
+language: javascript
+specification_id: scatter-basic
+created: '2026-06-02T22:05:57Z'
+updated: '2026-06-02T22:24:59Z'
+generated_by: claude-sonnet
+workflow_run: 26850510462
+issue: 611
+language_version: 22.22.3
+library_version: 7.9.0
+preview_url_light: https://storage.googleapis.com/anyplot-images/plots/scatter-basic/javascript/d3/plot-light.png
+preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/scatter-basic/javascript/d3/plot-dark.png
+preview_html_light: null
+preview_html_dark: null
+quality_score: 92
+review:
+  strengths:
+  - OLS regression trend line with correlation annotation (r≈0.81) creates a clear
+    analytical narrative — viewer immediately grasps the marketing-spend → sales relationship
+  - 'Floating grid technique (two separate axis calls: one for gridlines, one for
+    tick labels with no tick marks) is idiomatic D3 and produces a clean, open layout'
+  - 'Perfect Imprint palette usage: #009E73 for both markers and trend line, t.pageBg
+    for marker strokes (theme-adaptive definition ring), t.inkSoft/t.ink/t.grid for
+    all chrome'
+  - Deterministic LCG seed (seed=42) with Box-Muller transform satisfies reproducibility
+    requirement for JS environment without seeded Math.random
+  - All font sizes explicitly set (title 28px, axis labels 22px, ticks 18px, annotation
+    16px) with balanced typography hierarchy
+  - Both HTML and PNG outputs produced as required for D3 (interactive library), and
+    ANYPLOT_SIZE/ANYPLOT_TOKENS contract correctly observed
+  weaknesses:
+  - 'DE-01 not at top tier: design choices (OLS line, annotation, floating grid) are
+    thoughtful but the overall aesthetic is functional rather than striking — a reference-line
+    annotation style or subtle confidence-band shading around the OLS line would push
+    it toward publication-ready'
+  - DE-02 near-perfect but Y-axis label is positioned at x=22 (very close to left
+    canvas edge in SVG space) — while not clipped, this is inelegant and could conflict
+    with longer Y-axis label text in future variants; increase to x=30–35
+  - DE-03 storytelling is good but not excellent — the r≈0.81 annotation conveys the
+    correlation but doesn't highlight any notable sub-pattern (e.g., whether diminishing
+    returns exist at high spend, or whether outlier points distort the trend); visual
+    emphasis on an insight would elevate this
+  - 'LM-02: no distinctly D3-exclusive technique beyond the floating grid pattern
+    — a D3-native enhancement such as a confidence-interval band via d3.area() or
+    a brushable selection region would demonstrate deeper library mastery'
+  image_description: |-
+    Light render (plot-light.png):
+      Background: Warm off-white (#FAF8F1) — correct light-theme page surface, no pure white
+      Chrome: Title "scatter-basic · javascript · d3 · anyplot.ai" in dark ink at 28px CSS (56px in PNG) spans ~50% of the 3200px width — well-proportioned. X-axis label "Marketing Spend ($K)" and Y-axis label "Sales Revenue ($M)" in secondary ink (t.inkSoft) at 22px CSS. Tick labels (18px CSS) readable for all values: 0K–160K on X, $0.0M–$8.0M on Y. Correlation annotation "r ≈ 0.81" in upper right, visible.
+      Data: 100 scatter points in #009E73 (Imprint brand green) with fill-opacity 0.7 and white page-background stroke (1.5px) for clean separation. OLS trend line in same green at 50% opacity, spanning full data range. Grid lines are subtle (t.grid token). Domain/axis lines removed for clean open look. Tick marks removed (labels only).
+      Legibility verdict: PASS — all text clearly readable; no light-on-light issues; no element clipping at canvas edges.
+
+    Dark render (plot-dark.png):
+      Background: Warm near-black (#1A1A17) — correct dark-theme page surface, no pure black
+      Chrome: Title and axis labels switch to light ink (t.ink / t.inkSoft = #F0EFE8 / #B8B7B0) — clearly visible against dark background. Tick labels light-colored, all readable. Correlation annotation "r ≈ 0.81" visible in upper right (t.inkSoft adapts to light gray on dark). Grid lines subtle (t.grid token adapts to rgba(240,239,232,0.15)).
+      Data: Scatter points remain identical #009E73 (Imprint palette is theme-independent) — data colors unchanged from light render as required. Marker strokes use t.pageBg = #1A1A17 (dark), creating a subtle dark ring that still visually separates overlapping points. OLS trend line same #009E73 at 50% opacity, visible on dark background.
+      Legibility verdict: PASS — no dark-on-dark failures; all text uses light-themed tokens; brand green #009E73 readable on #1A1A17 surface.
+  criteria_checklist:
+    visual_quality:
+      score: 30
+      max: 30
+      items:
+      - id: VQ-01
+        name: Text Legibility
+        score: 8
+        max: 8
+        passed: true
+        comment: 'All font sizes explicitly set: title 28px CSS, axis labels 22px,
+          ticks 18px, annotation 16px. Well-proportioned hierarchy, readable at both
+          full-res and 400px mobile thumbnail.'
+      - id: VQ-02
+        name: No Overlap
+        score: 6
+        max: 6
+        passed: true
+        comment: No overlapping elements. Correlation annotation placed in upper-right
+          empty area, tick labels spaced appropriately.
+      - id: VQ-03
+        name: Element Visibility
+        score: 6
+        max: 6
+        passed: true
+        comment: 100 points with r=8 CSS (16px in PNG), fill-opacity=0.7 — optimal
+          for medium density. White-ring stroke helps define overlapping markers.
+          OLS line visible.
+      - id: VQ-04
+        name: Color Accessibility
+        score: 2
+        max: 2
+        passed: true
+        comment: 'Single series in #009E73 (colorblind-safe Imprint brand green).
+          Adequate contrast on both surface colors.'
+      - id: VQ-05
+        name: Layout & Canvas
+        score: 4
+        max: 4
+        passed: true
+        comment: Canvas gate passed (no /tmp/anyplot-canvas-gate.txt). Plot fills
+          ~71% of canvas (inner 1420x720 CSS of 1600x900). Margins balanced. Nothing
+          cut off.
+      - id: VQ-06
+        name: Axis Labels & Title
+        score: 2
+        max: 2
+        passed: true
+        comment: 'X: ''Marketing Spend ($K)'', Y: ''Sales Revenue ($M)'' — both descriptive
+          with units.'
+      - id: VQ-07
+        name: Palette Compliance
+        score: 2
+        max: 2
+        passed: true
+        comment: 't.palette[0]=#009E73 used for markers and trend line. Backgrounds
+          #FAF8F1 light / #1A1A17 dark. All chrome tokens (t.ink, t.inkSoft, t.grid,
+          t.pageBg) correctly applied. Data colors identical across themes.'
+    design_excellence:
+      score: 14
+      max: 20
+      items:
+      - id: DE-01
+        name: Aesthetic Sophistication
+        score: 5
+        max: 8
+        passed: true
+        comment: 'Above configured-default (4): OLS trend line, correlation annotation,
+          floating grid, and marker stroke ring show design thinking. Not yet ''strong
+          design'' (6): visual is clean and functional but lacks a striking focal
+          element.'
+      - id: DE-02
+        name: Visual Refinement
+        score: 5
+        max: 6
+        passed: true
+        comment: Domain lines removed, tick marks removed, subtle grid via theme tokens,
+          generous whitespace, page-bg marker strokes. Y-axis label at x=22 is slightly
+          inelegant but functional. Nearly perfect.
+      - id: DE-03
+        name: Data Storytelling
+        score: 4
+        max: 6
+        passed: true
+        comment: 'OLS trend line + r≈0.81 annotation create a clear quantitative narrative.
+          ''Good'' (4): visual hierarchy guides the reader to the correlation story,
+          but not ''Excellent'' (6) — no emphasis on outliers or sub-patterns.'
+    spec_compliance:
+      score: 15
+      max: 15
+      items:
+      - id: SC-01
+        name: Plot Type
+        score: 5
+        max: 5
+        passed: true
+        comment: Correct 2D scatter plot.
+      - id: SC-02
+        name: Required Features
+        score: 4
+        max: 4
+        passed: true
+        comment: Points plotted, alpha~0.7, grid lines, axis labels, descriptive title
+          — all spec requirements met.
+      - id: SC-03
+        name: Data Mapping
+        score: 3
+        max: 3
+        passed: true
+        comment: X=Marketing Spend, Y=Sales Revenue. All data visible on axes.
+      - id: SC-04
+        name: Title & Legend
+        score: 3
+        max: 3
+        passed: true
+        comment: Title is 'scatter-basic · javascript · d3 · anyplot.ai'. No legend
+          needed for single series.
+    data_quality:
+      score: 15
+      max: 15
+      items:
+      - id: DQ-01
+        name: Feature Coverage
+        score: 6
+        max: 6
+        passed: true
+        comment: 100 points with positive correlation, visible scatter/noise, outliers
+          present, full range of variation shown.
+      - id: DQ-02
+        name: Realistic Context
+        score: 5
+        max: 5
+        passed: true
+        comment: Marketing spend vs. sales revenue is a real, neutral, comprehensible
+          business scenario.
+      - id: DQ-03
+        name: Appropriate Scale
+        score: 4
+        max: 4
+        passed: true
+        comment: $10K–$150K spend range, $0–$8M sales range — plausible proportions
+          for a mid-sized business.
+    code_quality:
+      score: 10
+      max: 10
+      items:
+      - id: CQ-01
+        name: KISS Structure
+        score: 3
+        max: 3
+        passed: true
+        comment: Data → OLS calc → SVG mount → axes → trend line → markers → annotation
+          → labels → title. LCG helpers are minimal and necessary.
+      - id: CQ-02
+        name: Reproducibility
+        score: 2
+        max: 2
+        passed: true
+        comment: Fixed-seed LCG (seed=42) with Box-Muller satisfies JS reproducibility
+          requirement.
+      - id: CQ-03
+        name: Clean Imports
+        score: 2
+        max: 2
+        passed: true
+        comment: No imports needed; d3 is a global. All code is used.
+      - id: CQ-04
+        name: Code Elegance
+        score: 2
+        max: 2
+        passed: true
+        comment: Clean, well-organized. No fake interactive elements. OLS computation
+          is minimal and appropriate.
+      - id: CQ-05
+        name: Output & API
+        score: 1
+        max: 1
+        passed: true
+        comment: D3 is an interactive library; harness emits plot-light.png + plot-dark.png
+          + plot-light.html + plot-dark.html. Current D3 7.9.0 API used.
+    library_mastery:
+      score: 8
+      max: 10
+      items:
+      - id: LM-01
+        name: Idiomatic Usage
+        score: 5
+        max: 5
+        passed: true
+        comment: 'Expert D3 idioms: data join (.data().join()), d3.axis generators
+          with .call() chaining, d3.line() for trend line, floating grid (separate
+          axis call with tickSize(-ih) and no labels), ANYPLOT_SIZE/ANYPLOT_TOKENS
+          contract correctly observed.'
+      - id: LM-02
+        name: Distinctive Features
+        score: 3
+        max: 5
+        passed: true
+        comment: Floating grid (dual-axis trick) and data join pattern are distinctly
+          D3. No D3-exclusive technique beyond this — e.g., no d3.area() confidence
+          band, no d3.brush(), no hierarchy/force layout features.
+  verdict: APPROVED
+impl_tags:
+  dependencies: []
+  techniques:
+  - annotations
+  patterns:
+  - data-generation
+  dataprep:
+  - regression
+  styling:
+  - alpha-blending
+  - edge-highlighting