From 4cfdc3ccceadd919de7e1cd920cfd18c6669befc Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 10 Jun 2026 02:06:14 +0000 Subject: [PATCH 1/5] feat(echarts): implement acf-pacf --- .../implementations/javascript/echarts.js | 197 ++++++++++++++++++ 1 file changed, 197 insertions(+) create mode 100644 plots/acf-pacf/implementations/javascript/echarts.js diff --git a/plots/acf-pacf/implementations/javascript/echarts.js b/plots/acf-pacf/implementations/javascript/echarts.js new file mode 100644 index 0000000000..72b5d424f2 --- /dev/null +++ b/plots/acf-pacf/implementations/javascript/echarts.js @@ -0,0 +1,197 @@ +// anyplot.ai +// acf-pacf: Autocorrelation and Partial Autocorrelation (ACF/PACF) Plot +// Library: echarts 5.5.1 | JavaScript 22 +// Quality: pending | Created: 2026-06-10 + +//# anyplot-orientation: landscape +const t = window.ANYPLOT_TOKENS; + +// Seeded LCG for deterministic data generation +let _seed = 42; +function _lcg() { + _seed = (Math.imul(_seed, 1664525) + 1013904223) >>> 0; + return _seed / 0x100000000; +} +function _randn() { + const u1 = _lcg() + 1e-10, u2 = _lcg(); + return Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2); +} + +// Generate AR(2) time series: x_t = 0.6*x_{t-1} + 0.25*x_{t-2} + ε_t +// Represents daily temperature anomaly residuals (°C) +const N = 300; +const series = new Array(N).fill(0); +for (let i = 2; i < N; i++) { + series[i] = 0.6 * series[i - 1] + 0.25 * series[i - 2] + _randn(); +} + +// Compute sample ACF at lags 0..maxLag +function sampleACF(data, maxLag) { + const n = data.length; + const mean = data.reduce((s, v) => s + v, 0) / n; + const denom = data.reduce((s, v) => s + (v - mean) ** 2, 0); + const acf = []; + for (let k = 0; k <= maxLag; k++) { + let num = 0; + for (let i = k; i < n; i++) num += (data[i] - mean) * (data[i - k] - mean); + acf.push(num / denom); + } + return acf; +} + +// Compute sample PACF at lags 1..maxLag via Durbin-Levinson recursion +function samplePACF(acf, maxLag) { + const pacf = [null]; // pacf[0] unused; pacf[k] = PACF at lag k + let phi = [acf[1]]; + pacf.push(acf[1]); + for (let k = 2; k <= maxLag; k++) { + let num = acf[k], den = 1; + for (let j = 0; j < k - 1; j++) { + num -= phi[j] * acf[k - 1 - j]; + den -= phi[j] * acf[j + 1]; + } + const pkk = num / den; + const next = new Array(k); + for (let j = 0; j < k - 1; j++) next[j] = phi[j] - pkk * phi[k - 2 - j]; + next[k - 1] = pkk; + phi = next; + pacf.push(pkk); + } + return pacf.slice(1); // [PACF(1), PACF(2), ..., PACF(maxLag)] +} + +const MAX_LAG = 35; +const acf = sampleACF(series, MAX_LAG); +const pacf = samplePACF(acf, MAX_LAG); +const ci = 1.96 / Math.sqrt(N); // 95% confidence bound ≈ ±0.113 + +// Color code bars: significant vs insignificant +const SIG_ACF = t.palette[0]; // #009E73 +const INSIG_ACF = "rgba(0,158,115,0.28)"; +const SIG_PACF = t.palette[2]; // #4467A3 +const INSIG_PACF = "rgba(68,103,163,0.28)"; + +const acfLags = Array.from({ length: MAX_LAG + 1 }, (_, i) => i); +const pacfLags = Array.from({ length: MAX_LAG }, (_, i) => i + 1); + +const acfBarData = acf.map((v, i) => ({ + value: +v.toFixed(4), + itemStyle: { color: (i === 0 || Math.abs(v) > ci) ? SIG_ACF : INSIG_ACF } +})); +const pacfBarData = pacf.map((v, i) => ({ + value: +v.toFixed(4), + itemStyle: { color: Math.abs(v) > ci ? SIG_PACF : INSIG_PACF } +})); + +// Shared confidence interval markLine (amber dashed) + zero baseline +function ciMarkLine() { + return { + silent: true, + symbol: "none", + label: { show: false }, + data: [ + { yAxis: 0, lineStyle: { color: t.inkSoft, type: "solid", width: 1.5 } }, + { yAxis: ci, lineStyle: { color: t.amber, type: "dashed", width: 2 } }, + { yAxis: -ci, lineStyle: { color: t.amber, type: "dashed", width: 2 } } + ] + }; +} + +// Init chart +const chart = echarts.init(document.getElementById("container")); + +chart.setOption({ + animation: false, + color: t.palette, + backgroundColor: "transparent", + + title: { + text: "acf-pacf · javascript · echarts · anyplot.ai", + subtext: "AR(2) daily temperature anomalies · N = 300 · 95% CI shown", + left: "center", + top: 16, + textStyle: { color: t.ink, fontSize: 22, fontWeight: "600" }, + subtextStyle: { color: t.inkSoft, fontSize: 14 } + }, + + // Two stacked grids (1600 × 900 CSS canvas) + grid: [ + { left: 85, right: 50, top: 78, bottom: 472 }, // ACF + { left: 85, right: 50, top: 470, bottom: 62 } // PACF + ], + + xAxis: [ + { + gridIndex: 0, + type: "category", + data: acfLags.map(String), + axisLabel: { show: false }, + axisLine: { lineStyle: { color: t.inkSoft } }, + axisTick: { show: false }, + splitLine: { show: false } + }, + { + gridIndex: 1, + type: "category", + data: pacfLags.map(String), + name: "Lag", + nameLocation: "middle", + nameGap: 38, + nameTextStyle: { color: t.ink, fontSize: 15, fontWeight: "500" }, + axisLabel: { color: t.inkSoft, fontSize: 13 }, + axisLine: { lineStyle: { color: t.inkSoft } }, + axisTick: { show: false }, + splitLine: { show: false } + } + ], + + yAxis: [ + { + gridIndex: 0, + type: "value", + name: "ACF", + nameLocation: "middle", + nameGap: 52, + nameTextStyle: { color: t.ink, fontSize: 15, fontWeight: "500" }, + min: -0.35, + max: 1.05, + interval: 0.25, + axisLabel: { color: t.inkSoft, fontSize: 13, formatter: v => v.toFixed(2) }, + axisLine: { show: true, lineStyle: { color: t.inkSoft } }, + splitLine: { lineStyle: { color: t.grid } } + }, + { + gridIndex: 1, + type: "value", + name: "PACF", + nameLocation: "middle", + nameGap: 52, + nameTextStyle: { color: t.ink, fontSize: 15, fontWeight: "500" }, + min: -0.40, + max: 0.85, + interval: 0.25, + axisLabel: { color: t.inkSoft, fontSize: 13, formatter: v => v.toFixed(2) }, + axisLine: { show: true, lineStyle: { color: t.inkSoft } }, + splitLine: { lineStyle: { color: t.grid } } + } + ], + + series: [ + { + type: "bar", + xAxisIndex: 0, + yAxisIndex: 0, + data: acfBarData, + barWidth: 3, + markLine: ciMarkLine() + }, + { + type: "bar", + xAxisIndex: 1, + yAxisIndex: 1, + data: pacfBarData, + barWidth: 3, + markLine: ciMarkLine() + } + ] +}); From 4cefd67806835a7d467ac081a7ac522db68c5806 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 10 Jun 2026 02:06:24 +0000 Subject: [PATCH 2/5] chore(echarts): add metadata for acf-pacf --- .../acf-pacf/metadata/javascript/echarts.yaml | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 plots/acf-pacf/metadata/javascript/echarts.yaml diff --git a/plots/acf-pacf/metadata/javascript/echarts.yaml b/plots/acf-pacf/metadata/javascript/echarts.yaml new file mode 100644 index 0000000000..7b973ee564 --- /dev/null +++ b/plots/acf-pacf/metadata/javascript/echarts.yaml @@ -0,0 +1,21 @@ +# Per-library metadata for echarts implementation of acf-pacf +# Auto-generated by impl-generate.yml + +library: echarts +language: javascript +specification_id: acf-pacf +created: '2026-06-10T02:06:24Z' +updated: '2026-06-10T02:06:24Z' +generated_by: claude-sonnet +workflow_run: 27247913178 +issue: 4663 +language_version: 22.22.3 +library_version: 5.5.1 +preview_url_light: https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/echarts/plot-light.png +preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/echarts/plot-dark.png +preview_html_light: https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/echarts/plot-light.html +preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/echarts/plot-dark.html +quality_score: null +review: + strengths: [] + weaknesses: [] From 2a69fe7c5bad2a737edd58646311fd35c8f8744f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 10 Jun 2026 02:14:27 +0000 Subject: [PATCH 3/5] chore(echarts): update quality score 87 and review feedback for acf-pacf --- .../implementations/javascript/echarts.js | 4 +- .../acf-pacf/metadata/javascript/echarts.yaml | 235 +++++++++++++++++- 2 files changed, 230 insertions(+), 9 deletions(-) diff --git a/plots/acf-pacf/implementations/javascript/echarts.js b/plots/acf-pacf/implementations/javascript/echarts.js index 72b5d424f2..1a1ac035c2 100644 --- a/plots/acf-pacf/implementations/javascript/echarts.js +++ b/plots/acf-pacf/implementations/javascript/echarts.js @@ -1,7 +1,7 @@ // anyplot.ai // acf-pacf: Autocorrelation and Partial Autocorrelation (ACF/PACF) Plot -// Library: echarts 5.5.1 | JavaScript 22 -// Quality: pending | Created: 2026-06-10 +// Library: echarts 5.5.1 | JavaScript 22.22.3 +// Quality: 87/100 | Created: 2026-06-10 //# anyplot-orientation: landscape const t = window.ANYPLOT_TOKENS; diff --git a/plots/acf-pacf/metadata/javascript/echarts.yaml b/plots/acf-pacf/metadata/javascript/echarts.yaml index 7b973ee564..fd2929d4d2 100644 --- a/plots/acf-pacf/metadata/javascript/echarts.yaml +++ b/plots/acf-pacf/metadata/javascript/echarts.yaml @@ -1,11 +1,8 @@ -# Per-library metadata for echarts implementation of acf-pacf -# Auto-generated by impl-generate.yml - library: echarts language: javascript specification_id: acf-pacf created: '2026-06-10T02:06:24Z' -updated: '2026-06-10T02:06:24Z' +updated: '2026-06-10T02:14:27Z' generated_by: claude-sonnet workflow_run: 27247913178 issue: 4663 @@ -15,7 +12,231 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/acf-pacf/ preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/echarts/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/echarts/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/echarts/plot-dark.html -quality_score: null +quality_score: 87 review: - strengths: [] - weaknesses: [] + strengths: + - Significant vs. insignificant lag opacity coding is an elegant, information-rich + design choice unique to this implementation + - AR(2) data is pedagogically optimal — produces both the characteristic PACF cutoff + and ACF decay pattern, immediately illustrating when ACF/PACF analysis is useful + - Amber semantic token used correctly for CI bounds (warning/threshold role) + - Both themes render correctly with full theme-adaptive chrome; no dark-on-dark + or light-on-light failures + - Durbin-Levinson PACF recursion and sample ACF computation are mathematically correct + weaknesses: + - 'PACF uses t.palette[2] (#4467A3, blue) — canonical Imprint order requires position + 2 (t.palette[1], lavender #C475FD) for the second categorical series; change SIG_PACF + = t.palette[2] to t.palette[1] and update INSIG_PACF rgba to rgba(196,117,253,0.28)' + - ACF x-axis has 36 categories (lags 0–35) and PACF has 35 categories (lags 1–35); + bars don't vertically align between panels — fix by prepending a null entry to + PACF data so both grids use 36 slots, making lag N line up visually between the + two panels + image_description: |- + Light render (plot-light.png): + Background: Warm off-white #FAF8F1 — correct theme surface + Chrome: Title "acf-pacf · javascript · echarts · anyplot.ai" centered in dark ink; subtitle in secondary ink; Y-axis names "ACF"/"PACF" in dark ink; tick labels in secondary ink; X-axis label "Lag" — all clearly readable + Data: Two stacked panels. ACF panel (top): 36 vertical bars, significant lags in brand green #009E73 (full opacity), insignificant in rgba(0,158,115,0.28). Amber dashed CI at ±0.113; solid near-black zero baseline. Gradual geometric decay pattern visible. PACF panel (bottom): 35 bars (lags 1–35) in blue #4467A3 (significant) and rgba(68,103,163,0.28) (insignificant). Clear spikes at lags 1–2; near-zero beyond. + Legibility verdict: PASS + + Dark render (plot-dark.png): + Background: Warm near-black #1A1A17 — correct theme surface + Chrome: Title and subtitle in light ink; axis labels and tick labels in lighter secondary ink — all clearly readable against dark surface. No dark-on-dark failures detected. + Data: Data colors identical to light render — brand green #009E73 for significant ACF bars, blue #4467A3 for significant PACF bars. Amber dashes and zero baseline visible. Only chrome (background, text, grid) flipped. + Legibility verdict: PASS + criteria_checklist: + visual_quality: + score: 29 + max: 30 + items: + - id: VQ-01 + name: Text Legibility + score: 8 + max: 8 + passed: true + comment: All font sizes explicitly set (title 22px, subtitle 14px, axis names + 15px, tick labels 13px). Readable in both themes. + - id: VQ-02 + name: No Overlap + score: 6 + max: 6 + passed: true + comment: No text collisions in either render. + - id: VQ-03 + name: Element Visibility + score: 6 + max: 6 + passed: true + comment: barWidth=3 creates stem-plot look; significant vs insignificant opacity + contrast clearly distinguishable. + - id: VQ-04 + name: Color Accessibility + score: 2 + max: 2 + passed: true + comment: Imprint palette is CVD-safe; opacity adds redundant encoding. + - id: VQ-05 + name: Layout & Canvas + score: 4 + max: 4 + passed: true + comment: Dual stacked panels fill canvas well, balanced margins, nothing cut + off. + - id: VQ-06 + name: Axis Labels & Title + score: 2 + max: 2 + passed: true + comment: ACF, PACF, Lag are descriptive; dimensionless correlations need no + units. + - id: VQ-07 + name: Palette Compliance + score: 1 + max: 2 + passed: false + comment: PACF uses t.palette[2] (#4467A3 blue) skipping canonical position + 2 (#C475FD lavender) without semantic justification. + design_excellence: + score: 13 + max: 20 + items: + - id: DE-01 + name: Aesthetic Sophistication + score: 5 + max: 8 + passed: true + comment: Opacity-based significance coding is above defaults; amber CI semantic + token; informative subtext. + - id: DE-02 + name: Visual Refinement + score: 4 + max: 6 + passed: true + comment: No top/right spines; subtle Y-axis grid; ACF x-axis labels hidden; + clean panel separation. + - id: DE-03 + name: Data Storytelling + score: 4 + max: 6 + passed: true + comment: AR(2) chosen purposefully; opacity significance coding creates visual + hierarchy; viewer immediately sees which lags matter. + spec_compliance: + score: 14 + max: 15 + items: + - id: SC-01 + name: Plot Type + score: 5 + max: 5 + passed: true + comment: Correct dual-panel ACF/PACF stem plot. + - id: SC-02 + name: Required Features + score: 3 + max: 4 + passed: false + comment: All features present but ACF (36 categories) and PACF (35 categories) + bars don't vertically align between panels. + - id: SC-03 + name: Data Mapping + score: 3 + max: 3 + passed: true + comment: Lags on x, correlation values on y; all data visible. + - id: SC-04 + name: Title & Legend + score: 3 + max: 3 + passed: true + comment: Title format exact; y-axis names serve as panel labels. + data_quality: + score: 15 + max: 15 + items: + - id: DQ-01 + name: Feature Coverage + score: 6 + max: 6 + passed: true + comment: ACF decay, PACF cutoff, significant/insignificant lags, CI bounds + all demonstrated. + - id: DQ-02 + name: Realistic Context + score: 5 + max: 5 + passed: true + comment: AR(2) daily temperature anomaly residuals (°C), N=300 — scientifically + neutral and realistic. + - id: DQ-03 + name: Appropriate Scale + score: 4 + max: 4 + passed: true + comment: AR(2) parameters produce realistic correlations; CI ±1.96/sqrt(300) + mathematically correct. + code_quality: + score: 9 + max: 10 + items: + - id: CQ-01 + name: KISS Structure + score: 2 + max: 3 + passed: false + comment: Five helper functions present (_lcg, _randn, sampleACF, samplePACF, + ciMarkLine); deviates from flat data->plot pattern. + - id: CQ-02 + name: Reproducibility + score: 2 + max: 2 + passed: true + comment: Fixed-seed LCG (_seed = 42), fully deterministic. + - id: CQ-03 + name: Clean Imports + score: 2 + max: 2 + passed: true + comment: No imports; ECharts is global; no dead code. + - id: CQ-04 + name: Code Elegance + score: 2 + max: 2 + passed: true + comment: Correct statistical algorithms; no over-engineering; no fake UI. + - id: CQ-05 + name: Output & API + score: 1 + max: 1 + passed: true + comment: ECharts harness produces plot-{theme}.png and .html; current API. + library_mastery: + score: 7 + max: 10 + items: + - id: LM-01 + name: Idiomatic Usage + score: 4 + max: 5 + passed: true + comment: Good multi-grid layout, markLine for reference lines, per-item itemStyle, + animation:false. + - id: LM-02 + name: Distinctive Features + score: 3 + max: 5 + passed: true + comment: Per-item itemStyle for significance distinction, mixed-type markLine, + multi-grid stacking are ECharts-distinctive. + verdict: REJECTED +impl_tags: + dependencies: [] + techniques: + - subplots + - html-export + - annotations + patterns: + - data-generation + dataprep: + - time-series + styling: + - alpha-blending From 2e00a5fe7fa3765a8c4971aa8bf0a7a07e98db8f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 10 Jun 2026 02:19:45 +0000 Subject: [PATCH 4/5] fix(echarts): address review feedback for acf-pacf Attempt 1/3 - fixes based on AI review --- .../implementations/javascript/echarts.js | 123 +++++++++--------- 1 file changed, 60 insertions(+), 63 deletions(-) diff --git a/plots/acf-pacf/implementations/javascript/echarts.js b/plots/acf-pacf/implementations/javascript/echarts.js index 1a1ac035c2..dfdea0620c 100644 --- a/plots/acf-pacf/implementations/javascript/echarts.js +++ b/plots/acf-pacf/implementations/javascript/echarts.js @@ -25,77 +25,56 @@ for (let i = 2; i < N; i++) { series[i] = 0.6 * series[i - 1] + 0.25 * series[i - 2] + _randn(); } -// Compute sample ACF at lags 0..maxLag -function sampleACF(data, maxLag) { - const n = data.length; - const mean = data.reduce((s, v) => s + v, 0) / n; - const denom = data.reduce((s, v) => s + (v - mean) ** 2, 0); - const acf = []; - for (let k = 0; k <= maxLag; k++) { - let num = 0; - for (let i = k; i < n; i++) num += (data[i] - mean) * (data[i - k] - mean); - acf.push(num / denom); - } - return acf; -} +const MAX_LAG = 35; +const ci = 1.96 / Math.sqrt(N); + +// Sample ACF at lags 0..MAX_LAG +const acfMean = series.reduce((s, v) => s + v, 0) / N; +const acfDenom = series.reduce((s, v) => s + (v - acfMean) ** 2, 0); +const acf = Array.from({ length: MAX_LAG + 1 }, (_, k) => { + let num = 0; + for (let i = k; i < N; i++) num += (series[i] - acfMean) * (series[i - k] - acfMean); + return num / acfDenom; +}); -// Compute sample PACF at lags 1..maxLag via Durbin-Levinson recursion -function samplePACF(acf, maxLag) { - const pacf = [null]; // pacf[0] unused; pacf[k] = PACF at lag k - let phi = [acf[1]]; - pacf.push(acf[1]); - for (let k = 2; k <= maxLag; k++) { - let num = acf[k], den = 1; - for (let j = 0; j < k - 1; j++) { - num -= phi[j] * acf[k - 1 - j]; - den -= phi[j] * acf[j + 1]; - } - const pkk = num / den; - const next = new Array(k); - for (let j = 0; j < k - 1; j++) next[j] = phi[j] - pkk * phi[k - 2 - j]; - next[k - 1] = pkk; - phi = next; - pacf.push(pkk); +// Sample PACF at lags 1..MAX_LAG via Durbin-Levinson recursion +const pacf = [acf[1]]; +let phi = [acf[1]]; +for (let k = 2; k <= MAX_LAG; k++) { + let num = acf[k], den = 1; + for (let j = 0; j < k - 1; j++) { + num -= phi[j] * acf[k - 1 - j]; + den -= phi[j] * acf[j + 1]; } - return pacf.slice(1); // [PACF(1), PACF(2), ..., PACF(maxLag)] + const pkk = num / den; + const next = new Array(k); + for (let j = 0; j < k - 1; j++) next[j] = phi[j] - pkk * phi[k - 2 - j]; + next[k - 1] = pkk; + phi = next; + pacf.push(pkk); } -const MAX_LAG = 35; -const acf = sampleACF(series, MAX_LAG); -const pacf = samplePACF(acf, MAX_LAG); -const ci = 1.96 / Math.sqrt(N); // 95% confidence bound ≈ ±0.113 - -// Color code bars: significant vs insignificant -const SIG_ACF = t.palette[0]; // #009E73 +// Color tokens: palette[0] = ACF green #009E73, palette[1] = PACF lavender #C475FD +const SIG_ACF = t.palette[0]; const INSIG_ACF = "rgba(0,158,115,0.28)"; -const SIG_PACF = t.palette[2]; // #4467A3 -const INSIG_PACF = "rgba(68,103,163,0.28)"; +const SIG_PACF = t.palette[1]; +const INSIG_PACF = "rgba(196,117,253,0.28)"; -const acfLags = Array.from({ length: MAX_LAG + 1 }, (_, i) => i); -const pacfLags = Array.from({ length: MAX_LAG }, (_, i) => i + 1); +// Shared 36-slot category axis (lags 0–35) for both panels so bars align vertically +const lagLabels = Array.from({ length: MAX_LAG + 1 }, (_, i) => String(i)); const acfBarData = acf.map((v, i) => ({ value: +v.toFixed(4), itemStyle: { color: (i === 0 || Math.abs(v) > ci) ? SIG_ACF : INSIG_ACF } })); -const pacfBarData = pacf.map((v, i) => ({ - value: +v.toFixed(4), - itemStyle: { color: Math.abs(v) > ci ? SIG_PACF : INSIG_PACF } -})); -// Shared confidence interval markLine (amber dashed) + zero baseline -function ciMarkLine() { - return { - silent: true, - symbol: "none", - label: { show: false }, - data: [ - { yAxis: 0, lineStyle: { color: t.inkSoft, type: "solid", width: 1.5 } }, - { yAxis: ci, lineStyle: { color: t.amber, type: "dashed", width: 2 } }, - { yAxis: -ci, lineStyle: { color: t.amber, type: "dashed", width: 2 } } - ] - }; -} +// Prepend null at lag-0 slot so PACF panel columns align with ACF panel +const pacfBarData = [{ value: null, itemStyle: { color: "transparent" } }].concat( + pacf.map((v) => ({ + value: +v.toFixed(4), + itemStyle: { color: Math.abs(v) > ci ? SIG_PACF : INSIG_PACF } + })) +); // Init chart const chart = echarts.init(document.getElementById("container")); @@ -124,7 +103,7 @@ chart.setOption({ { gridIndex: 0, type: "category", - data: acfLags.map(String), + data: lagLabels, axisLabel: { show: false }, axisLine: { lineStyle: { color: t.inkSoft } }, axisTick: { show: false }, @@ -133,7 +112,7 @@ chart.setOption({ { gridIndex: 1, type: "category", - data: pacfLags.map(String), + data: lagLabels, name: "Lag", nameLocation: "middle", nameGap: 38, @@ -183,7 +162,16 @@ chart.setOption({ yAxisIndex: 0, data: acfBarData, barWidth: 3, - markLine: ciMarkLine() + markLine: { + silent: true, + symbol: "none", + label: { show: false }, + data: [ + { yAxis: 0, lineStyle: { color: t.inkSoft, type: "solid", width: 1.5 } }, + { yAxis: ci, lineStyle: { color: t.amber, type: "dashed", width: 2 } }, + { yAxis: -ci, lineStyle: { color: t.amber, type: "dashed", width: 2 } } + ] + } }, { type: "bar", @@ -191,7 +179,16 @@ chart.setOption({ yAxisIndex: 1, data: pacfBarData, barWidth: 3, - markLine: ciMarkLine() + markLine: { + silent: true, + symbol: "none", + label: { show: false }, + data: [ + { yAxis: 0, lineStyle: { color: t.inkSoft, type: "solid", width: 1.5 } }, + { yAxis: ci, lineStyle: { color: t.amber, type: "dashed", width: 2 } }, + { yAxis: -ci, lineStyle: { color: t.amber, type: "dashed", width: 2 } } + ] + } } ] }); From fb04b322da32db499ccc949e8770b05f7cb504af Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Wed, 10 Jun 2026 02:27:15 +0000 Subject: [PATCH 5/5] chore(echarts): update quality score 88 and review feedback for acf-pacf --- .../implementations/javascript/echarts.js | 2 +- .../acf-pacf/metadata/javascript/echarts.yaml | 157 +++++++++--------- 2 files changed, 79 insertions(+), 80 deletions(-) diff --git a/plots/acf-pacf/implementations/javascript/echarts.js b/plots/acf-pacf/implementations/javascript/echarts.js index dfdea0620c..bb57ad59f9 100644 --- a/plots/acf-pacf/implementations/javascript/echarts.js +++ b/plots/acf-pacf/implementations/javascript/echarts.js @@ -1,7 +1,7 @@ // anyplot.ai // acf-pacf: Autocorrelation and Partial Autocorrelation (ACF/PACF) Plot // Library: echarts 5.5.1 | JavaScript 22.22.3 -// Quality: 87/100 | Created: 2026-06-10 +// Quality: 88/100 | Created: 2026-06-10 //# anyplot-orientation: landscape const t = window.ANYPLOT_TOKENS; diff --git a/plots/acf-pacf/metadata/javascript/echarts.yaml b/plots/acf-pacf/metadata/javascript/echarts.yaml index fd2929d4d2..412d62110d 100644 --- a/plots/acf-pacf/metadata/javascript/echarts.yaml +++ b/plots/acf-pacf/metadata/javascript/echarts.yaml @@ -2,7 +2,7 @@ library: echarts language: javascript specification_id: acf-pacf created: '2026-06-10T02:06:24Z' -updated: '2026-06-10T02:14:27Z' +updated: '2026-06-10T02:27:14Z' generated_by: claude-sonnet workflow_run: 27247913178 issue: 4663 @@ -12,89 +12,89 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/acf-pacf/ preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/echarts/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/echarts/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/echarts/plot-dark.html -quality_score: 87 +quality_score: 88 review: strengths: - - Significant vs. insignificant lag opacity coding is an elegant, information-rich - design choice unique to this implementation - - AR(2) data is pedagogically optimal — produces both the characteristic PACF cutoff - and ACF decay pattern, immediately illustrating when ACF/PACF analysis is useful - - Amber semantic token used correctly for CI bounds (warning/threshold role) - - Both themes render correctly with full theme-adaptive chrome; no dark-on-dark - or light-on-light failures - - Durbin-Levinson PACF recursion and sample ACF computation are mathematically correct + - Correct PACF computation via Durbin-Levinson recursion — mathematically rigorous + - Significant vs. insignificant bar alpha encoding adds an analytical layer true + to ACF/PACF best practices + - Full Imprint palette compliance with amber CI lines as semantic anchors (threshold/caution + role) + - 'Complete theme adaptation: all chrome tokens thread through both panels in both + renders' + - Subtitle (AR(2) daily temperature anomalies · N = 300 · 95% CI shown) provides + rich interpretive context + - 'Clean shared-axis design: upper panel x-axis labels hidden, tick marks removed + throughout' weaknesses: - - 'PACF uses t.palette[2] (#4467A3, blue) — canonical Imprint order requires position - 2 (t.palette[1], lavender #C475FD) for the second categorical series; change SIG_PACF - = t.palette[2] to t.palette[1] and update INSIG_PACF rgba to rgba(196,117,253,0.28)' - - ACF x-axis has 36 categories (lags 0–35) and PACF has 35 categories (lags 1–35); - bars don't vertically align between panels — fix by prepending a null entry to - PACF data so both grids use 36 slots, making lag N line up visually between the - two panels + - Tick label font size is 13px CSS (one point below the 14px echarts guide default) + — nudge up to 14px for full compliance + - Muted insignificant PACF bars (rgba alpha ~0.28) are slightly faint on dark background + — consider bumping alpha to 0.35–0.40 for dark theme image_description: |- Light render (plot-light.png): - Background: Warm off-white #FAF8F1 — correct theme surface - Chrome: Title "acf-pacf · javascript · echarts · anyplot.ai" centered in dark ink; subtitle in secondary ink; Y-axis names "ACF"/"PACF" in dark ink; tick labels in secondary ink; X-axis label "Lag" — all clearly readable - Data: Two stacked panels. ACF panel (top): 36 vertical bars, significant lags in brand green #009E73 (full opacity), insignificant in rgba(0,158,115,0.28). Amber dashed CI at ±0.113; solid near-black zero baseline. Gradual geometric decay pattern visible. PACF panel (bottom): 35 bars (lags 1–35) in blue #4467A3 (significant) and rgba(68,103,163,0.28) (insignificant). Clear spikes at lags 1–2; near-zero beyond. - Legibility verdict: PASS + Background: Warm off-white #FAF8F1 — correct + Chrome: Title "acf-pacf · javascript · echarts · anyplot.ai" (dark, 22px, centered), subtitle "AR(2) daily temperature anomalies · N = 300 · 95% CI shown" (secondary text, 14px). ACF y-axis label "ACF" and PACF y-axis label "PACF" (15px), x-axis label "Lag" (15px). Tick labels at 13px — all clearly readable. + Data: ACF panel (top) uses brand green #009E73 for significant bars, semi-transparent green rgba(0,158,115,0.28) for insignificant. Characteristic exponential decay from lag 0 (~1.0) through lag ~20. PACF panel (bottom) uses lavender #C475FD for significant bars (prominent spikes at lags 1 and 2), semi-transparent lavender for insignificant. Amber dashed CI lines at ±0.113. Zero baseline solid. + Legibility verdict: PASS — all text readable against warm off-white background, no light-on-light issues. Dark render (plot-dark.png): - Background: Warm near-black #1A1A17 — correct theme surface - Chrome: Title and subtitle in light ink; axis labels and tick labels in lighter secondary ink — all clearly readable against dark surface. No dark-on-dark failures detected. - Data: Data colors identical to light render — brand green #009E73 for significant ACF bars, blue #4467A3 for significant PACF bars. Amber dashes and zero baseline visible. Only chrome (background, text, grid) flipped. - Legibility verdict: PASS + Background: Warm near-black #1A1A17 — correct + Chrome: Title, subtitle, axis labels, tick labels all rendered in light-colored text (ink tokens flipped). Clearly readable against dark background. Grid lines are subtle light-colored rules. No dark-on-dark failures observed. + Data: ACF bars remain identical green #009E73; PACF bars remain identical lavender #C475FD; CI lines remain amber #DDCC77. Data colors exactly match light render — only chrome flipped. + Legibility verdict: PASS — all text readable against warm near-black background, no dark-on-dark issues. criteria_checklist: visual_quality: - score: 29 + score: 28 max: 30 items: - id: VQ-01 name: Text Legibility - score: 8 + score: 7 max: 8 passed: true - comment: All font sizes explicitly set (title 22px, subtitle 14px, axis names - 15px, tick labels 13px). Readable in both themes. + comment: All font sizes explicitly set; tick labels at 13px CSS are 1px below + guide default of 14px - id: VQ-02 name: No Overlap score: 6 max: 6 passed: true - comment: No text collisions in either render. + comment: Clean two-panel layout with no text collisions - id: VQ-03 name: Element Visibility - score: 6 + score: 5 max: 6 passed: true - comment: barWidth=3 creates stem-plot look; significant vs insignificant opacity - contrast clearly distinguishable. + comment: 3px bars appropriate for 36 lags; insignificant bars visible but + slightly faint on dark background - id: VQ-04 name: Color Accessibility score: 2 max: 2 passed: true - comment: Imprint palette is CVD-safe; opacity adds redundant encoding. + comment: Green/lavender distinct hue families; amber CI lines; CVD-safe Imprint + palette - id: VQ-05 name: Layout & Canvas score: 4 max: 4 passed: true - comment: Dual stacked panels fill canvas well, balanced margins, nothing cut - off. + comment: Canvas gate passed; two-panel layout fills canvas well with balanced + margins - id: VQ-06 name: Axis Labels & Title score: 2 max: 2 passed: true - comment: ACF, PACF, Lag are descriptive; dimensionless correlations need no - units. + comment: Lag, ACF, PACF per spec; title format correct - id: VQ-07 name: Palette Compliance - score: 1 + score: 2 max: 2 - passed: false - comment: PACF uses t.palette[2] (#4467A3 blue) skipping canonical position - 2 (#C475FD lavender) without semantic justification. + passed: true + comment: 'ACF=palette[0] #009E73, PACF=palette[1] #C475FD, CI=amber #DDCC77; + transparent bg shows page tokens; colors identical across themes' design_excellence: score: 13 max: 20 @@ -104,24 +104,24 @@ review: score: 5 max: 8 passed: true - comment: Opacity-based significance coding is above defaults; amber CI semantic - token; informative subtext. + comment: 'Above defaults: per-item alpha encoding for significant/insignificant + bars, informative subtitle, semantic CI lines' - id: DE-02 name: Visual Refinement score: 4 max: 6 passed: true - comment: No top/right spines; subtle Y-axis grid; ACF x-axis labels hidden; - clean panel separation. + comment: Tick marks removed; upper panel x-axis labels hidden; grid only on + y-axis; good whitespace - id: DE-03 name: Data Storytelling score: 4 max: 6 passed: true - comment: AR(2) chosen purposefully; opacity significance coding creates visual - hierarchy; viewer immediately sees which lags matter. + comment: AR(2) signature immediately readable; alpha encoding creates visual + hierarchy; subtitle anchors interpretation spec_compliance: - score: 14 + score: 15 max: 15 items: - id: SC-01 @@ -129,26 +129,26 @@ review: score: 5 max: 5 passed: true - comment: Correct dual-panel ACF/PACF stem plot. + comment: Correct dual-panel ACF/PACF layout with narrow stem-style bars - id: SC-02 name: Required Features - score: 3 + score: 4 max: 4 - passed: false - comment: All features present but ACF (36 categories) and PACF (35 categories) - bars don't vertically align between panels. + passed: true + comment: ACF top + PACF bottom; shared lag x-axis; 95% CI dashed; lag 0 in + ACF; PACF from lag 1; 35 lags; zero baseline - id: SC-03 name: Data Mapping score: 3 max: 3 passed: true - comment: Lags on x, correlation values on y; all data visible. + comment: Lag on x-axis; correlation values on y; axes correctly ranged - id: SC-04 name: Title & Legend score: 3 max: 3 passed: true - comment: Title format exact; y-axis names serve as panel labels. + comment: Title matches spec format; panels labeled via y-axis names data_quality: score: 15 max: 15 @@ -158,57 +158,57 @@ review: score: 6 max: 6 passed: true - comment: ACF decay, PACF cutoff, significant/insignificant lags, CI bounds - all demonstrated. + comment: Both ACF and PACF; significant/insignificant coding; Durbin-Levinson + PACF; CI bounds; lag-0 in ACF - id: DQ-02 name: Realistic Context score: 5 max: 5 passed: true - comment: AR(2) daily temperature anomaly residuals (°C), N=300 — scientifically - neutral and realistic. + comment: AR(2) daily temperature anomaly residuals — neutral scientific domain, + N=300 - id: DQ-03 name: Appropriate Scale score: 4 max: 4 passed: true - comment: AR(2) parameters produce realistic correlations; CI ±1.96/sqrt(300) - mathematically correct. + comment: Correlation values in [-1,1]; y-axis ranges match data; AR(2) signature + factually consistent code_quality: - score: 9 + score: 10 max: 10 items: - id: CQ-01 name: KISS Structure - score: 2 + score: 3 max: 3 - passed: false - comment: Five helper functions present (_lcg, _randn, sampleACF, samplePACF, - ciMarkLine); deviates from flat data->plot pattern. + passed: true + comment: Minimal LCG helpers, flat data → config → setOption - id: CQ-02 name: Reproducibility score: 2 max: 2 passed: true - comment: Fixed-seed LCG (_seed = 42), fully deterministic. + comment: Fixed-seed LCG (seed=42); fully deterministic - id: CQ-03 name: Clean Imports score: 2 max: 2 passed: true - comment: No imports; ECharts is global; no dead code. + comment: No imports; echarts is global per harness contract - id: CQ-04 name: Code Elegance score: 2 max: 2 passed: true - comment: Correct statistical algorithms; no over-engineering; no fake UI. + comment: Clean, well-organized; idiomatic per-item itemStyle; no fake UI - id: CQ-05 name: Output & API score: 1 max: 1 passed: true - comment: ECharts harness produces plot-{theme}.png and .html; current API. + comment: Harness generates plot-{theme}.png + plot-{theme}.html; ECharts 5.5.1 + API library_mastery: score: 7 max: 10 @@ -218,25 +218,24 @@ review: score: 4 max: 5 passed: true - comment: Good multi-grid layout, markLine for reference lines, per-item itemStyle, - animation:false. + comment: Multiple grids, xAxisIndex/yAxisIndex association, markLine within + series, per-item itemStyle object format - id: LM-02 name: Distinctive Features score: 3 max: 5 passed: true - comment: Per-item itemStyle for significance distinction, mixed-type markLine, - multi-grid stacking are ECharts-distinctive. - verdict: REJECTED + comment: markLine for CI reference lines (ECharts-specific), multiple grid + instances for panel alignment, per-item data object format + verdict: APPROVED impl_tags: dependencies: [] techniques: - subplots - html-export - - annotations + - manual-ticks patterns: - data-generation - dataprep: - - time-series + dataprep: [] styling: - alpha-blending