From 97c848edc76d488eee7dd4b2ce111ddc99f92c82 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 9 Jun 2026 23:34:51 +0000 Subject: [PATCH 1/3] feat(chartjs): implement scatter-connected-temporal --- .../implementations/javascript/chartjs.js | 170 ++++++++++++++++++ 1 file changed, 170 insertions(+) create mode 100644 plots/scatter-connected-temporal/implementations/javascript/chartjs.js diff --git a/plots/scatter-connected-temporal/implementations/javascript/chartjs.js b/plots/scatter-connected-temporal/implementations/javascript/chartjs.js new file mode 100644 index 0000000000..cc075ab57f --- /dev/null +++ b/plots/scatter-connected-temporal/implementations/javascript/chartjs.js @@ -0,0 +1,170 @@ +// anyplot.ai +// scatter-connected-temporal: Connected Scatter Plot with Temporal Path +// Library: chartjs 4.4.7 | JavaScript 22 +// Quality: pending | Created: 2026-06-09 + +const t = window.ANYPLOT_TOKENS; + +// CO₂ concentration (ppm) vs global temperature anomaly (°C), biennial 1970–2020 +const climateData = [ + { year: 1970, co2: 325.7, temp: 0.03 }, + { year: 1972, co2: 327.5, temp: 0.04 }, + { year: 1974, co2: 330.1, temp: -0.07 }, + { year: 1976, co2: 332.1, temp: -0.10 }, + { year: 1978, co2: 335.5, temp: 0.05 }, + { year: 1980, co2: 338.7, temp: 0.26 }, + { year: 1982, co2: 341.1, temp: 0.12 }, + { year: 1984, co2: 344.4, temp: 0.16 }, + { year: 1986, co2: 347.2, temp: 0.17 }, + { year: 1988, co2: 351.3, temp: 0.39 }, + { year: 1990, co2: 354.4, temp: 0.44 }, + { year: 1992, co2: 356.4, temp: 0.22 }, + { year: 1994, co2: 358.9, temp: 0.31 }, + { year: 1996, co2: 362.7, temp: 0.33 }, + { year: 1998, co2: 366.7, temp: 0.61 }, + { year: 2000, co2: 369.5, temp: 0.33 }, + { year: 2002, co2: 373.2, temp: 0.56 }, + { year: 2004, co2: 377.5, temp: 0.48 }, + { year: 2006, co2: 381.9, temp: 0.61 }, + { year: 2008, co2: 385.6, temp: 0.43 }, + { year: 2010, co2: 389.9, temp: 0.72 }, + { year: 2012, co2: 394.0, temp: 0.64 }, + { year: 2014, co2: 397.2, temp: 0.75 }, + { year: 2016, co2: 403.9, temp: 1.01 }, + { year: 2018, co2: 408.5, temp: 0.83 }, + { year: 2020, co2: 414.2, temp: 1.02 }, +]; + +const n = climateData.length; + +// Parse hex to [r, g, b] +function hexToRgb(hex) { + return [ + parseInt(hex.slice(1, 3), 16), + parseInt(hex.slice(3, 5), 16), + parseInt(hex.slice(5, 7), 16), + ]; +} + +// Temporal gradient: Imprint brand green → Imprint blue (via t.seq) +const [r1, g1, b1] = hexToRgb(t.seq[0]); +const [r2, g2, b2] = hexToRgb(t.seq[1]); + +function lerpColor(frac) { + const r = Math.round(r1 + (r2 - r1) * frac); + const g = Math.round(g1 + (g2 - g1) * frac); + const b = Math.round(b1 + (b2 - b1) * frac); + return `rgb(${r},${g},${b})`; +} + +const pointColors = climateData.map((_, i) => lerpColor(i / (n - 1))); +const pointRadius = climateData.map((_, i) => (i === 0 || i === n - 1 ? 11 : 6)); +const lineColor = `rgba(${r1},${g1},${b1},0.45)`; + +const labelYears = new Set([1970, 1980, 1990, 2000, 2010, 2020]); + +// Fill canvas background before chart renders +Chart.register({ + id: "canvasBg", + beforeDraw(chart) { + const ctx = chart.ctx; + ctx.save(); + ctx.fillStyle = t.pageBg; + ctx.fillRect(0, 0, chart.width, chart.height); + ctx.restore(); + }, +}); + +// Draw year labels above annotated key points +Chart.register({ + id: "temporalLabels", + afterDatasetsDraw(chart) { + const ctx = chart.ctx; + const meta = chart.getDatasetMeta(0); + ctx.save(); + ctx.font = "bold 14px system-ui, sans-serif"; + ctx.textAlign = "center"; + ctx.textBaseline = "bottom"; + ctx.fillStyle = t.inkSoft; + climateData.forEach((d, i) => { + if (!labelYears.has(d.year)) return; + const pt = meta.data[i]; + if (!pt) return; + ctx.fillText(String(d.year), pt.x, pt.y - 14); + }); + ctx.restore(); + }, +}); + +// Mount +const canvas = document.createElement("canvas"); +document.getElementById("container").appendChild(canvas); + +// Chart +new Chart(canvas, { + type: "scatter", + data: { + datasets: [ + { + label: "CO₂ vs Temperature", + data: climateData.map(d => ({ x: d.co2, y: d.temp })), + showLine: true, + borderColor: lineColor, + borderWidth: 2, + pointBackgroundColor: pointColors, + pointBorderColor: t.pageBg, + pointBorderWidth: 1.5, + pointRadius, + pointHoverRadius: pointRadius.map(r => r + 2), + tension: 0, + }, + ], + }, + options: { + responsive: true, + maintainAspectRatio: false, + animation: false, + plugins: { + title: { + display: true, + text: "scatter-connected-temporal · javascript · chartjs · anyplot.ai", + color: t.ink, + font: { size: 22, weight: "600" }, + padding: { top: 20, bottom: 8 }, + }, + subtitle: { + display: true, + text: "Color encodes time: 1970 (green) → 2020 (blue)", + color: t.inkSoft, + font: { size: 14 }, + padding: { bottom: 16 }, + }, + legend: { display: false }, + }, + scales: { + x: { + title: { + display: true, + text: "CO₂ Concentration (ppm)", + color: t.ink, + font: { size: 16 }, + }, + ticks: { color: t.inkSoft, font: { size: 14 } }, + grid: { color: t.grid }, + }, + y: { + title: { + display: true, + text: "Temperature Anomaly (°C)", + color: t.ink, + font: { size: 16 }, + }, + ticks: { color: t.inkSoft, font: { size: 14 } }, + grid: { color: t.grid }, + }, + }, + layout: { + padding: { top: 10, right: 50, bottom: 20, left: 20 }, + }, + }, +}); From 3442ffc5afbb8b19fc5cb5ab0b64a95b8f7ebc0f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 9 Jun 2026 23:35:04 +0000 Subject: [PATCH 2/3] chore(chartjs): add metadata for scatter-connected-temporal --- .../metadata/javascript/chartjs.yaml | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 plots/scatter-connected-temporal/metadata/javascript/chartjs.yaml diff --git a/plots/scatter-connected-temporal/metadata/javascript/chartjs.yaml b/plots/scatter-connected-temporal/metadata/javascript/chartjs.yaml new file mode 100644 index 0000000000..745a056ecf --- /dev/null +++ b/plots/scatter-connected-temporal/metadata/javascript/chartjs.yaml @@ -0,0 +1,21 @@ +# Per-library metadata for chartjs implementation of scatter-connected-temporal +# Auto-generated by impl-generate.yml + +library: chartjs +language: javascript +specification_id: scatter-connected-temporal +created: '2026-06-09T23:35:04Z' +updated: '2026-06-09T23:35:04Z' +generated_by: claude-sonnet +workflow_run: 27242458557 +issue: 4675 +language_version: 22.22.3 +library_version: 4.4.7 +preview_url_light: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/chartjs/plot-light.png +preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/chartjs/plot-dark.png +preview_html_light: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/chartjs/plot-light.html +preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/chartjs/plot-dark.html +quality_score: null +review: + strengths: [] + weaknesses: [] From b775994910650dc76e00dab7e4d0ccdcd62d0472 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 9 Jun 2026 23:42:32 +0000 Subject: [PATCH 3/3] chore(chartjs): update quality score 92 and review feedback for scatter-connected-temporal --- .../implementations/javascript/chartjs.js | 4 +- .../metadata/javascript/chartjs.yaml | 264 +++++++++++++++++- 2 files changed, 259 insertions(+), 9 deletions(-) diff --git a/plots/scatter-connected-temporal/implementations/javascript/chartjs.js b/plots/scatter-connected-temporal/implementations/javascript/chartjs.js index cc075ab57f..d66d67d815 100644 --- a/plots/scatter-connected-temporal/implementations/javascript/chartjs.js +++ b/plots/scatter-connected-temporal/implementations/javascript/chartjs.js @@ -1,7 +1,7 @@ // anyplot.ai // scatter-connected-temporal: Connected Scatter Plot with Temporal Path -// Library: chartjs 4.4.7 | JavaScript 22 -// Quality: pending | Created: 2026-06-09 +// Library: chartjs 4.4.7 | JavaScript 22.22.3 +// Quality: 92/100 | Created: 2026-06-09 const t = window.ANYPLOT_TOKENS; diff --git a/plots/scatter-connected-temporal/metadata/javascript/chartjs.yaml b/plots/scatter-connected-temporal/metadata/javascript/chartjs.yaml index 745a056ecf..712e1131c9 100644 --- a/plots/scatter-connected-temporal/metadata/javascript/chartjs.yaml +++ b/plots/scatter-connected-temporal/metadata/javascript/chartjs.yaml @@ -1,11 +1,8 @@ -# Per-library metadata for chartjs implementation of scatter-connected-temporal -# Auto-generated by impl-generate.yml - library: chartjs language: javascript specification_id: scatter-connected-temporal created: '2026-06-09T23:35:04Z' -updated: '2026-06-09T23:35:04Z' +updated: '2026-06-09T23:42:32Z' generated_by: claude-sonnet workflow_run: 27242458557 issue: 4675 @@ -15,7 +12,260 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/scatter-c preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/chartjs/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/chartjs/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/scatter-connected-temporal/javascript/chartjs/plot-dark.html -quality_score: null +quality_score: 92 review: - strengths: [] - weaknesses: [] + strengths: + - 'Correct use of imprint_seq (t.seq: green → blue) as a continuous temporal gradient + — brand green (#009E73) 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 — both classic Chart.js + patterns' + - 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 without annotation clutter + - Subtitle plugin repurposed as a color-range legend — elegant solution that avoids + a redundant chartjs legend entry for a continuous gradient + - 'All font sizes explicitly set: title 22px/600, subtitle 14px, axis labels 16px, + tick labels 14px, year annotations bold 14px' + - Theme-adaptive chrome properly threaded through all elements (t.ink, t.inkSoft, + t.grid, t.pageBg) + - Both light and dark renders pass theme-readability check with no dark-on-dark + or light-on-light failures + weaknesses: + - 'Chart.js axis scale borders (the thick border line along each axis — equivalent + to all-four-sides spines) are not explicitly removed. Adding `border: { display: + false }` to both x and y scale configs would produce a cleaner L-shaped or open + look per style-guide defaults.' + - 'The connecting line uses a flat semi-transparent green throughout (rgba(0,158,115,0.45)) + while the point colors transition green→blue. This minor visual inconsistency + de-emphasizes the temporal direction along the path. A workaround: use a neutral + ink color (t.inkSoft at 0.3 opacity) for the line so it reads as purely structural, + making the point-color gradient the clear temporal signal.' + - Two helper functions (hexToRgb, lerpColor) and two Chart.register plugin calls + with methods reduce KISS purity — necessary for this technique but adds complexity + vs the flat default structure. + image_description: |- + Light render (plot-light.png): + Background: Warm off-white (#FAF8F1) — correct page surface color, not pure white. + Chrome: Title "scatter-connected-temporal · javascript · chartjs · anyplot.ai" in dark bold 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 in dark ink. Tick labels in inkSoft (dark gray) readable at all positions. Year annotations (1970, 1980, 1990, 2000, 2010, 2020) in bold dark text above their respective points — all readable. + Data: Connected scatter plot. Points transition from brand green (#009E73) at 1970 to blue (#4467A3) at 2020 via imprint_seq gradient. Non-annotated points at radius 6, start (1970) and end (2020) at radius 11. Connecting line is semi-transparent green. Grid lines are subtle. Clear upward-right trend visible. + Legibility verdict: PASS — all text readable, no light-on-light issues. + + Dark render (plot-dark.png): + Background: Warm near-black (#1A1A17) — correct dark surface, not pure black. + Chrome: Title in light-colored text, clearly readable against dark background. Subtitle in slightly softer light text. Axis labels and tick labels in appropriate light colors (t.ink and t.inkSoft for dark theme). Year annotations in light gray against dark background — readable. No dark-on-dark failures detected. + Data: Point colors are identical to light render — brand green (#009E73) at 1970 transitioning to blue (#4467A3) at 2020. The connecting semi-transparent green line is visible against the dark background. Grid lines subtle. + Legibility verdict: PASS — all text readable, no dark-on-dark issues, data colors identical to light render. + 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 22px/600, subtitle 14px, axis + labels 16px, tick labels 14px, annotations bold 14px. Well-proportioned + in both themes.' + - id: VQ-02 + name: No Overlap + score: 6 + max: 6 + passed: true + comment: Year labels offset 14px above points, no collisions with data or + other text. + - id: VQ-03 + name: Element Visibility + score: 6 + max: 6 + passed: true + comment: 26 data points (sparse). Regular radius 6, emphasized endpoints radius + 11. Line visible. Well-adapted. + - id: VQ-04 + name: Color Accessibility + score: 2 + max: 2 + passed: true + comment: Green-to-blue gradient is CVD-safe (not red-green). White point borders + add definition. + - id: VQ-05 + name: Layout & Canvas + score: 4 + max: 4 + passed: true + comment: Canvas gate passed. Good layout balance, right padding=50 reserves + space for year labels near right edge. + - id: VQ-06 + name: Axis Labels & Title + score: 2 + max: 2 + passed: true + comment: 'X: CO₂ Concentration (ppm), Y: Temperature Anomaly (°C) — both descriptive + with units.' + - id: VQ-07 + name: Palette Compliance + score: 2 + max: 2 + passed: true + comment: '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: + score: 14 + max: 20 + items: + - id: DE-01 + name: Aesthetic Sophistication + score: 6 + max: 8 + passed: true + comment: 'Strong design: intentional temporal gradient, start/end emphasis, + subtitle-as-legend. Clearly above library defaults but not FiveThirtyEight + publication level.' + - id: DE-02 + name: Visual Refinement + score: 4 + max: 6 + passed: true + comment: 'Grid subtle via t.grid token, whitespace adequate. However Chart.js + scale borders (spine equivalents) not removed — no border: { display: false + } on x/y scales.' + - id: DE-03 + name: Data Storytelling + score: 4 + max: 6 + passed: true + comment: Temporal gradient and decade markers guide the reader through the + CO₂-temperature narrative. Visual hierarchy via gradient + size variation. + Could be stronger with insight annotations at inflection points. + spec_compliance: + score: 15 + max: 15 + items: + - id: SC-01 + name: Plot Type + score: 5 + max: 5 + passed: true + comment: Scatter with showLine:true — correct Chart.js connected scatter pattern. + - id: SC-02 + name: Required Features + score: 4 + max: 4 + passed: true + comment: Points connected in chronological order, key time points annotated + (decades), color gradient indicates direction, markers visible at each point. + - id: SC-03 + name: Data Mapping + score: 3 + max: 3 + passed: true + comment: 'X: CO₂, Y: Temperature Anomaly, time encoded via color gradient + — all correct.' + - id: SC-04 + name: Title & Legend + score: 3 + max: 3 + passed: true + comment: 'Title: scatter-connected-temporal · javascript · chartjs · anyplot.ai + ✓. Legend hidden; subtitle explains color encoding — appropriate for gradient.' + data_quality: + score: 15 + max: 15 + items: + - id: DQ-01 + name: Feature Coverage + score: 6 + max: 6 + passed: true + comment: Shows temporal path, co-evolution of two variables, gradient direction, + annotated key points, emphasized endpoints — all aspects covered. + - id: DQ-02 + name: Realistic Context + score: 5 + max: 5 + passed: true + comment: 'Real scientific context: CO₂ ppm vs global temperature anomaly 1970–2020. + Neutral, compelling, not controversial.' + - id: DQ-03 + name: Appropriate Scale + score: 4 + max: 4 + passed: true + comment: 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: + score: 9 + max: 10 + items: + - id: CQ-01 + name: KISS Structure + score: 2 + max: 3 + passed: true + comment: Two helper functions (hexToRgb, lerpColor) and two Chart.register + plugin objects with methods are necessary for this technique but deviate + from flat KISS ideal. + - id: CQ-02 + name: Reproducibility + score: 2 + max: 2 + passed: true + comment: All data hard-coded, no random elements. + - id: CQ-03 + name: Clean Imports + score: 2 + max: 2 + passed: true + comment: No imports — uses window globals only. No unused variables. + - id: CQ-04 + name: Code Elegance + score: 2 + max: 2 + passed: true + comment: Clean structure, no over-engineering, no fake UI, plugin pattern + is idiomatic for Chart.js. + - id: CQ-05 + name: Output & API + score: 1 + max: 1 + passed: true + comment: Chart.js is in INTERACTIVE_LIBRARIES — harness produces both PNG + and HTML. No savefig call needed. + library_mastery: + score: 9 + max: 10 + items: + - id: LM-01 + name: Idiomatic Usage + score: 5 + max: 5 + passed: true + comment: Expertly uses scatter+showLine, Chart.register plugin system, per-point + color/radius arrays, subtitle plugin, and all required harness settings. + - id: LM-02 + name: Distinctive Features + score: 4 + max: 5 + passed: true + comment: Custom Chart.register plugins for canvas background and year label + drawing are distinctly Chart.js. Per-point color arrays and subtitle plugin + also Chart.js-specific. Not fully at 5 as some patterns are also possible + in other libraries. + verdict: APPROVED +impl_tags: + dependencies: [] + techniques: + - annotations + - custom-legend + - html-export + patterns: + - data-generation + - iteration-over-groups + dataprep: [] + styling: + - alpha-blending + - edge-highlighting + - gradient-fill