From aec0d2c4df7622e388fff14d85e57b4f6d05bf50 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sat, 25 Jul 2026 23:51:06 +0000 Subject: [PATCH 1/5] feat(echarts): implement slope-basic --- .../implementations/javascript/echarts.js | 94 +++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 plots/slope-basic/implementations/javascript/echarts.js diff --git a/plots/slope-basic/implementations/javascript/echarts.js b/plots/slope-basic/implementations/javascript/echarts.js new file mode 100644 index 0000000000..68b15ca30a --- /dev/null +++ b/plots/slope-basic/implementations/javascript/echarts.js @@ -0,0 +1,94 @@ +// anyplot.ai +// slope-basic: Basic Slope Chart (Slopegraph) +// Library: echarts 6.1.0 | JavaScript 22 +// Quality: pending | Created: 2026-07-25 + +//# anyplot-orientation: square +const t = window.ANYPLOT_TOKENS; + +// --- Data (in-memory, deterministic) --------------------------------------- +// Employee engagement survey score (0-100) by department, before vs after a +// company-wide feedback program. +const departments = [ + { name: "Product", start: 82, end: 88 }, + { name: "HR", start: 80, end: 83 }, + { name: "Marketing", start: 75, end: 70 }, + { name: "Finance", start: 77, end: 72 }, + { name: "Design", start: 73, end: 77 }, + { name: "Engineering", start: 72, end: 81 }, + { name: "Sales", start: 68, end: 74 }, + { name: "Operations", start: 70, end: 68 }, + { name: "Support", start: 64, end: 79 }, + { name: "Legal", start: 66, end: 65 }, +]; + +const INCREASE = t.palette[0]; // "#009E73" brand green — profit/up/gain +const DECREASE = t.palette[4]; // "#AE3030" matte red — semantic anchor for loss/down + +// --- Init ------------------------------------------------------------------- +const chart = echarts.init(document.getElementById("container")); + +// --- Option ----------------------------------------------------------------- +const title = "Employee Engagement Score · slope-basic · javascript · echarts · anyplot.ai"; + +chart.setOption({ + animation: false, + backgroundColor: "transparent", + title: { + text: title, + left: "center", + top: 30, + textStyle: { color: t.ink, fontSize: 20, fontWeight: 500 }, + }, + grid: { left: 300, right: 300, top: 130, bottom: 90 }, + xAxis: { + type: "category", + data: ["2024 (before)", "2025 (after)"], + boundaryGap: false, + axisLabel: { color: t.inkSoft, fontSize: 16 }, + axisLine: { lineStyle: { color: t.inkSoft } }, + axisTick: { show: false }, + splitLine: { show: false }, + }, + yAxis: { + type: "value", + min: 62, + max: 90, + show: false, + }, + series: departments.map((d) => { + const color = d.end >= d.start ? INCREASE : DECREASE; + return { + name: d.name, + type: "line", + symbol: "circle", + symbolSize: 8, + lineStyle: { width: 3, color }, + itemStyle: { color }, + data: [ + { + value: d.start, + label: { + show: true, + position: "left", + distance: 16, + formatter: () => `${d.name} ${d.start}`, + color: t.ink, + fontSize: 14, + }, + }, + { + value: d.end, + label: { + show: true, + position: "right", + distance: 16, + formatter: () => `${d.end} ${d.name}`, + color: t.ink, + fontSize: 14, + }, + }, + ], + }; + }), +}); From 9b366adc0bcc42e33145bbe1d5c0512085ba28c2 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sat, 25 Jul 2026 23:51:14 +0000 Subject: [PATCH 2/5] chore(echarts): add metadata for slope-basic --- .../metadata/javascript/echarts.yaml | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 plots/slope-basic/metadata/javascript/echarts.yaml diff --git a/plots/slope-basic/metadata/javascript/echarts.yaml b/plots/slope-basic/metadata/javascript/echarts.yaml new file mode 100644 index 0000000000..f14ed6c3b8 --- /dev/null +++ b/plots/slope-basic/metadata/javascript/echarts.yaml @@ -0,0 +1,21 @@ +# Per-library metadata for echarts implementation of slope-basic +# Auto-generated by impl-generate.yml + +library: echarts +language: javascript +specification_id: slope-basic +created: '2026-07-25T23:51:14Z' +updated: '2026-07-25T23:51:14Z' +generated_by: claude-sonnet +workflow_run: 30179940609 +issue: 981 +language_version: 22.23.1 +library_version: 6.1.0 +preview_url_light: https://storage.googleapis.com/anyplot-images/plots/slope-basic/javascript/echarts/plot-light.png +preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/slope-basic/javascript/echarts/plot-dark.png +preview_html_light: https://storage.googleapis.com/anyplot-images/plots/slope-basic/javascript/echarts/plot-light.html +preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/slope-basic/javascript/echarts/plot-dark.html +quality_score: null +review: + strengths: [] + weaknesses: [] From 68985af43ca21f9064c7d76c78c430fd26cd6a88 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sat, 25 Jul 2026 23:56:54 +0000 Subject: [PATCH 3/5] chore(echarts): update quality score 87 and review feedback for slope-basic --- .../implementations/javascript/echarts.js | 4 +- .../metadata/javascript/echarts.yaml | 251 +++++++++++++++++- 2 files changed, 246 insertions(+), 9 deletions(-) diff --git a/plots/slope-basic/implementations/javascript/echarts.js b/plots/slope-basic/implementations/javascript/echarts.js index 68b15ca30a..ff9e2bfd3c 100644 --- a/plots/slope-basic/implementations/javascript/echarts.js +++ b/plots/slope-basic/implementations/javascript/echarts.js @@ -1,7 +1,7 @@ // anyplot.ai // slope-basic: Basic Slope Chart (Slopegraph) -// Library: echarts 6.1.0 | JavaScript 22 -// Quality: pending | Created: 2026-07-25 +// Library: echarts 6.1.0 | JavaScript 22.23.1 +// Quality: 87/100 | Created: 2026-07-25 //# anyplot-orientation: square const t = window.ANYPLOT_TOKENS; diff --git a/plots/slope-basic/metadata/javascript/echarts.yaml b/plots/slope-basic/metadata/javascript/echarts.yaml index f14ed6c3b8..645af090cf 100644 --- a/plots/slope-basic/metadata/javascript/echarts.yaml +++ b/plots/slope-basic/metadata/javascript/echarts.yaml @@ -1,11 +1,8 @@ -# Per-library metadata for echarts implementation of slope-basic -# Auto-generated by impl-generate.yml - library: echarts language: javascript specification_id: slope-basic created: '2026-07-25T23:51:14Z' -updated: '2026-07-25T23:51:14Z' +updated: '2026-07-25T23:56:53Z' generated_by: claude-sonnet workflow_run: 30179940609 issue: 981 @@ -15,7 +12,247 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/slope-bas preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/slope-basic/javascript/echarts/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/slope-basic/javascript/echarts/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/slope-basic/javascript/echarts/plot-dark.html -quality_score: null +quality_score: 87 review: - strengths: [] - weaknesses: [] + strengths: + - 'Correct slope-chart construction: uses a continuous value y-axis (min 62 / max + 90) instead of equal-spaced rows, so vertical position reflects the actual score + magnitude at each time point.' + - Semantic red/green line coloring for decrease/increase is redundant with the visible + slope direction, so the chart stays readable without relying on hue alone. + - Direct per-line data labels at both endpoints replace a crowded 10-entry legend, + keeping the chart clean. + - 'Theme-adaptive chrome verified correct in both light and dark renders; Imprint + data colors (#009E73 / #AE3030) are identical across themes, only chrome flips.' + - Realistic, neutral business dataset (employee engagement scores) covering a good + range of magnitudes, from a +15 point jump (Support) to a small -1 dip (Legal). + weaknesses: + - Grid margins (left:300, right:300 CSS px on a 1200px mount) leave a lot of empty + canvas at the far left/right edges beyond where the text labels actually end — + tighten to ~180-200px given the longest label ('Engineering 72') to raise canvas + fill. + - 'symbolSize: 8 is a bit small for only 10 sparse two-point series — bump to ~10-12 + for more prominent, publication-ready markers given the low data density (<50 + points).' + - 'LM-02: the per-point label formatter + itemStyle coloring is a generic pattern + easily replicated in any charting library; nothing here leverages an ECharts-distinctive + capability (e.g. graphic elements, emphasis/focus states, custom label layout + avoidance).' + - Data labels for closely-valued entities ('Design 73' / 'Engineering 72', only + 1 point apart on the value axis) sit close together vertically — legible at full + size but tightens up when the image is scaled to mobile widths. + image_description: |- + Light render (plot-light.png): + Background: Warm off-white, matches #FAF8F1 — not pure white. + Chrome: Title "Employee Engagement Score · slope-basic · javascript · echarts · anyplot.ai" in dark ink at top, centered, clearly legible. "2024 (before)" / "2025 (after)" axis labels in soft dark gray at the bottom, sitting on a thin baseline. No grid lines, no visible spines other than the bottom axis rule. + Data: 10 department lines connecting a 2024 value (left) to a 2025 value (right), each endpoint marked with a filled circle and a text label showing the department name and score. Lines trending up-right are brand green (#009E73), lines trending down-right are matte red (#AE3030). Values range 64-88. + Legibility verdict: PASS — all text (title, axis labels, data labels) is dark-on-light and clearly readable; no light-on-light issues. + + Dark render (plot-dark.png): + Background: Warm near-black, matches #1A1A17 — not pure black. + Chrome: Same title and axis labels now rendered in light ink/gray, clearly visible against the dark surface. No dark-on-dark text detected — all title, axis, and data labels read cleanly. + Data: Identical layout and identical green (#009E73) / red (#AE3030) line colors to the light render — only the chrome (background, text) flipped, confirming theme-adaptive tokens were threaded through correctly. + Legibility verdict: PASS — no dark-on-dark failures; all text and data elements remain clearly distinguishable from the background. + criteria_checklist: + visual_quality: + score: 26 + max: 30 + items: + - id: VQ-01 + name: Text Legibility + score: 7 + max: 8 + passed: true + comment: All font sizes explicitly set (title 20, axis 16, data labels 14); + readable in both themes; title fits at ~55% width. Data labels shrink to + fairly small text at 400px mobile width. + - id: VQ-02 + name: No Overlap + score: 6 + max: 6 + passed: true + comment: No text overlap; even closely-valued entities (Design 73 / Engineering + 72) remain visually separated. + - id: VQ-03 + name: Element Visibility + score: 5 + max: 6 + passed: true + comment: Markers clearly visible but symbolSize 8 is slightly small for only + 10 sparse two-point series. + - id: VQ-04 + name: Color Accessibility + score: 2 + max: 2 + passed: true + comment: Red/green direction coding is redundant with visible line slope, + so CVD users can still read direction without relying on hue. + - id: VQ-05 + name: Layout & Canvas + score: 2 + max: 4 + passed: true + comment: Vertical fill is good (~80% via the value-axis range), but generous + left/right grid margins (300px each side of the 1200px mount) leave noticeable + empty canvas beyond where labels end, ~40-50% total canvas utilization. + - id: VQ-06 + name: Axis Labels & Title + score: 2 + max: 2 + passed: true + comment: '''2024 (before)'' / ''2025 (after)'' descriptively label the two + time points as required by the spec.' + - id: VQ-07 + name: Palette Compliance + score: 2 + max: 2 + passed: true + comment: 'First categorical use is #009E73 (increase); #AE3030 correctly reserved + for the semantic loss/decrease role. Identical data colors across both theme-correct + renders.' + design_excellence: + score: 16 + max: 20 + items: + - id: DE-01 + name: Aesthetic Sophistication + score: 6 + max: 8 + passed: true + comment: Thoughtful semantic coloring and label placement, clearly above a + default line-chart look. + - id: DE-02 + name: Visual Refinement + score: 6 + max: 6 + passed: true + comment: No grid, minimal chrome (single baseline rule only), generous whitespace, + consistent label formatting. + - id: DE-03 + name: Data Storytelling + score: 4 + max: 6 + passed: true + comment: Direction-based color coding creates immediate visual hierarchy (who + improved vs declined) without requiring the reader to read every number. + spec_compliance: + score: 15 + max: 15 + items: + - id: SC-01 + name: Plot Type + score: 5 + max: 5 + passed: true + comment: Genuine slope chart with two vertical time points connected by lines. + - id: SC-02 + name: Required Features + score: 4 + max: 4 + passed: true + comment: Labels at both endpoints, direction color-coding, labeled vertical + axes, 10 entities within the 5-15 recommended range. + - id: SC-03 + name: Data Mapping + score: 3 + max: 3 + passed: true + comment: X-axis correctly represents the two time points; y-axis value scale + correctly maps all department scores. + - id: SC-04 + name: Title & Legend + score: 3 + max: 3 + passed: true + comment: Title matches '{Descriptive Title} · {spec-id} · {language} · {library} + · anyplot.ai'; per-line direct labels correctly substitute for a legend. + data_quality: + score: 15 + max: 15 + items: + - id: DQ-01 + name: Feature Coverage + score: 6 + max: 6 + passed: true + comment: 'Good spread of magnitude and direction: large increase (Support + +15), large decrease (none extreme but Marketing -5), and small changes + (HR +3, Legal -1).' + - id: DQ-02 + name: Realistic Context + score: 5 + max: 5 + passed: true + comment: Employee engagement survey before/after a feedback program — realistic, + neutral business scenario. + - id: DQ-03 + name: Appropriate Scale + score: 4 + max: 4 + passed: true + comment: Scores in the plausible 64-88 range on a 0-100 engagement scale; + changes are believable. + code_quality: + score: 10 + max: 10 + items: + - id: CQ-01 + name: KISS Structure + score: 3 + max: 3 + passed: true + comment: No functions/classes; linear data -> option -> render structure. + - id: CQ-02 + name: Reproducibility + score: 2 + max: 2 + passed: true + comment: Fully deterministic hard-coded data, no randomness. + - id: CQ-03 + name: Clean Imports + score: 2 + max: 2 + passed: true + comment: No unused imports; only the provided echarts/token globals are used. + - id: CQ-04 + name: Code Elegance + score: 2 + max: 2 + passed: true + comment: Clean functional series mapping, no over-engineering, no fake interactivity. + - id: CQ-05 + name: Output & API + score: 1 + max: 1 + passed: true + comment: Correct mount-node contract, animation:false set, no explicit devicePixelRatio/size + passed to echarts.init. + library_mastery: + score: 5 + max: 10 + items: + - id: LM-01 + name: Idiomatic Usage + score: 4 + max: 5 + passed: true + comment: Correct high-level setOption usage with per-series style objects + and formatter callbacks. + - id: LM-02 + name: Distinctive Features + score: 1 + max: 5 + passed: false + comment: Per-point label formatter + itemStyle coloring is generic and easily + replicated in any charting library; no ECharts-distinctive capability (graphic + elements, emphasis/focus states, etc.) is used. + verdict: REJECTED +impl_tags: + dependencies: [] + techniques: [] + patterns: + - data-generation + - iteration-over-groups + dataprep: [] + styling: + - minimal-chrome From e7e72922a0c0706dc8ae9f61e00b5508af6fddbc Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sun, 26 Jul 2026 00:01:20 +0000 Subject: [PATCH 4/5] fix(echarts): address review feedback for slope-basic Attempt 1/4 - fixes based on AI review --- .../implementations/javascript/echarts.js | 23 +++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/plots/slope-basic/implementations/javascript/echarts.js b/plots/slope-basic/implementations/javascript/echarts.js index ff9e2bfd3c..208e09abd3 100644 --- a/plots/slope-basic/implementations/javascript/echarts.js +++ b/plots/slope-basic/implementations/javascript/echarts.js @@ -25,6 +25,12 @@ const departments = [ const INCREASE = t.palette[0]; // "#009E73" brand green — profit/up/gain const DECREASE = t.palette[4]; // "#AE3030" matte red — semantic anchor for loss/down +// Biggest mover (by absolute change) drives the callout annotation below. +const biggestMover = departments.reduce((a, b) => + Math.abs(b.end - b.start) > Math.abs(a.end - a.start) ? b : a, +); +const biggestDelta = biggestMover.end - biggestMover.start; + // --- Init ------------------------------------------------------------------- const chart = echarts.init(document.getElementById("container")); @@ -40,7 +46,18 @@ chart.setOption({ top: 30, textStyle: { color: t.ink, fontSize: 20, fontWeight: 500 }, }, - grid: { left: 300, right: 300, top: 130, bottom: 90 }, + graphic: { + type: "text", + left: "center", + top: 68, + style: { + text: `Biggest mover: ${biggestMover.name} ${biggestDelta > 0 ? "+" : ""}${biggestDelta} pts`, + fill: t.inkSoft, + fontSize: 14, + fontStyle: "italic", + }, + }, + grid: { left: 190, right: 190, top: 130, bottom: 90 }, xAxis: { type: "category", data: ["2024 (before)", "2025 (after)"], @@ -62,9 +79,11 @@ chart.setOption({ name: d.name, type: "line", symbol: "circle", - symbolSize: 8, + symbolSize: 11, lineStyle: { width: 3, color }, itemStyle: { color }, + emphasis: { focus: "series", lineStyle: { width: 5 } }, + blur: { lineStyle: { opacity: 0.15 }, label: { opacity: 0.25 } }, data: [ { value: d.start, From 725bfafa10346b76b65a775b2332bbb75802e654 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Sun, 26 Jul 2026 00:05:42 +0000 Subject: [PATCH 5/5] chore(echarts): update quality score 94 and review feedback for slope-basic --- .../implementations/javascript/echarts.js | 2 +- .../metadata/javascript/echarts.yaml | 117 +++++++++--------- 2 files changed, 62 insertions(+), 57 deletions(-) diff --git a/plots/slope-basic/implementations/javascript/echarts.js b/plots/slope-basic/implementations/javascript/echarts.js index 208e09abd3..8d30417a80 100644 --- a/plots/slope-basic/implementations/javascript/echarts.js +++ b/plots/slope-basic/implementations/javascript/echarts.js @@ -1,7 +1,7 @@ // anyplot.ai // slope-basic: Basic Slope Chart (Slopegraph) // Library: echarts 6.1.0 | JavaScript 22.23.1 -// Quality: 87/100 | Created: 2026-07-25 +// Quality: 94/100 | Updated: 2026-07-26 //# anyplot-orientation: square const t = window.ANYPLOT_TOKENS; diff --git a/plots/slope-basic/metadata/javascript/echarts.yaml b/plots/slope-basic/metadata/javascript/echarts.yaml index 645af090cf..0093fafe9c 100644 --- a/plots/slope-basic/metadata/javascript/echarts.yaml +++ b/plots/slope-basic/metadata/javascript/echarts.yaml @@ -2,7 +2,7 @@ library: echarts language: javascript specification_id: slope-basic created: '2026-07-25T23:51:14Z' -updated: '2026-07-25T23:56:53Z' +updated: '2026-07-26T00:05:42Z' generated_by: claude-sonnet workflow_run: 30179940609 issue: 981 @@ -12,50 +12,53 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/slope-bas preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/slope-basic/javascript/echarts/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/slope-basic/javascript/echarts/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/slope-basic/javascript/echarts/plot-dark.html -quality_score: 87 +quality_score: 94 review: strengths: + - 'All three weaknesses from the previous review were fixed with concrete, verifiable + changes: grid margins tightened from 300px to 190px (better canvas fill), symbolSize + bumped from 8 to 11 (more prominent markers for sparse two-point series), and + a graphic-text ''Biggest mover'' callout plus emphasis/focus + blur cross-series + highlighting were added to leverage ECharts-distinctive capabilities.' + - 'The ''Biggest mover: Support +15 pts'' callout gives the chart an explicit narrative + focal point, so the viewer immediately sees the standout insight instead of having + to scan all 10 lines.' - 'Correct slope-chart construction: uses a continuous value y-axis (min 62 / max 90) instead of equal-spaced rows, so vertical position reflects the actual score magnitude at each time point.' - Semantic red/green line coloring for decrease/increase is redundant with the visible - slope direction, so the chart stays readable without relying on hue alone. - - Direct per-line data labels at both endpoints replace a crowded 10-entry legend, - keeping the chart clean. + slope direction, so the chart stays readable without relying on hue alone (CVD-safe). - 'Theme-adaptive chrome verified correct in both light and dark renders; Imprint - data colors (#009E73 / #AE3030) are identical across themes, only chrome flips.' - - Realistic, neutral business dataset (employee engagement scores) covering a good - range of magnitudes, from a +15 point jump (Support) to a small -1 dip (Legal). + data colors (#009E73 / #AE3030) are identical across themes, only chrome (background, + text) flips.' + - Realistic, neutral business dataset (employee engagement scores) with a good spread + of magnitude and direction, from a +15 point jump (Support) to a small -1 dip + (Legal). weaknesses: - - Grid margins (left:300, right:300 CSS px on a 1200px mount) leave a lot of empty - canvas at the far left/right edges beyond where the text labels actually end — - tighten to ~180-200px given the longest label ('Engineering 72') to raise canvas - fill. - - 'symbolSize: 8 is a bit small for only 10 sparse two-point series — bump to ~10-12 - for more prominent, publication-ready markers given the low data density (<50 - points).' - - 'LM-02: the per-point label formatter + itemStyle coloring is a generic pattern - easily replicated in any charting library; nothing here leverages an ECharts-distinctive - capability (e.g. graphic elements, emphasis/focus states, custom label layout - avoidance).' - Data labels for closely-valued entities ('Design 73' / 'Engineering 72', only - 1 point apart on the value axis) sit close together vertically — legible at full - size but tightens up when the image is scaled to mobile widths. + 1 point apart on the value axis) still sit close together vertically — legible + at full canvas size but tightens further when scaled to mobile widths. + - LM-02 has improved (graphic callout + emphasis/focus/blur cross-highlighting) + but is still moderate rather than maxed — could go further with e.g. dynamic label-overlap + avoidance or additional graphic elements distinctive to ECharts. + - Data label fontSize (14px CSS, 28px in the 2x-scaled PNG) becomes quite small + once the image is scaled down to a ~400px mobile preview — consider a modest bump + for mobile legibility headroom. image_description: |- Light render (plot-light.png): - Background: Warm off-white, matches #FAF8F1 — not pure white. - Chrome: Title "Employee Engagement Score · slope-basic · javascript · echarts · anyplot.ai" in dark ink at top, centered, clearly legible. "2024 (before)" / "2025 (after)" axis labels in soft dark gray at the bottom, sitting on a thin baseline. No grid lines, no visible spines other than the bottom axis rule. - Data: 10 department lines connecting a 2024 value (left) to a 2025 value (right), each endpoint marked with a filled circle and a text label showing the department name and score. Lines trending up-right are brand green (#009E73), lines trending down-right are matte red (#AE3030). Values range 64-88. - Legibility verdict: PASS — all text (title, axis labels, data labels) is dark-on-light and clearly readable; no light-on-light issues. + Background: Warm off-white, matches #FAF8F1 — not pure white, not dark. + Chrome: Title "Employee Engagement Score · slope-basic · javascript · echarts · anyplot.ai" in dark ink at top, centered, clearly legible (~54% of canvas width). Below it, an italic subtitle "Biggest mover: Support +15 pts" in soft dark gray, also clearly readable. "2024 (before)" / "2025 (after)" axis labels sit at the bottom on a thin baseline rule. No grid lines, no visible spines other than the bottom axis rule. Grid margins are visibly tighter than the previous attempt, so the plot occupies noticeably more of the canvas. + Data: 10 department lines connecting a 2024 value (left) to a 2025 value (right), each endpoint marked with a larger (11px) filled circle and a text label showing the department name and score. Lines trending up-right are brand green (#009E73), lines trending down-right are matte red (#AE3030). Values range 64-88. No overlapping text; even closely-valued entities (Design 73 / Engineering 72) remain visually separated. + Legibility verdict: PASS — all text (title, subtitle, axis labels, data labels) is dark-on-light and clearly readable; no light-on-light issues. Dark render (plot-dark.png): - Background: Warm near-black, matches #1A1A17 — not pure black. - Chrome: Same title and axis labels now rendered in light ink/gray, clearly visible against the dark surface. No dark-on-dark text detected — all title, axis, and data labels read cleanly. - Data: Identical layout and identical green (#009E73) / red (#AE3030) line colors to the light render — only the chrome (background, text) flipped, confirming theme-adaptive tokens were threaded through correctly. + Background: Warm near-black, matches #1A1A17 — not pure black, not light. + Chrome: Same title and subtitle now rendered in light ink/soft gray, clearly visible against the dark surface. Axis labels at the bottom are also light-colored and legible. No dark-on-dark text detected anywhere. + Data: Identical layout, identical marker size, and identical green (#009E73) / red (#AE3030) line colors to the light render — only the chrome (background, text) flipped, confirming theme-adaptive tokens were threaded through correctly. Legibility verdict: PASS — no dark-on-dark failures; all text and data elements remain clearly distinguishable from the background. criteria_checklist: visual_quality: - score: 26 + score: 29 max: 30 items: - id: VQ-01 @@ -63,9 +66,9 @@ review: score: 7 max: 8 passed: true - comment: All font sizes explicitly set (title 20, axis 16, data labels 14); - readable in both themes; title fits at ~55% width. Data labels shrink to - fairly small text at 400px mobile width. + comment: All font sizes explicitly set (title 20, subtitle 14, axis 16, data + labels 14); readable in both themes; title fits at ~54% width. Data label + text still becomes quite small once scaled to a ~400px mobile preview. - id: VQ-02 name: No Overlap score: 6 @@ -75,11 +78,11 @@ review: 72) remain visually separated. - id: VQ-03 name: Element Visibility - score: 5 + score: 6 max: 6 passed: true - comment: Markers clearly visible but symbolSize 8 is slightly small for only - 10 sparse two-point series. + comment: symbolSize bumped from 8 to 11, giving prominent, publication-ready + markers appropriate for 10 sparse two-point series (<50 total points). - id: VQ-04 name: Color Accessibility score: 2 @@ -89,12 +92,11 @@ review: so CVD users can still read direction without relying on hue. - id: VQ-05 name: Layout & Canvas - score: 2 + score: 4 max: 4 passed: true - comment: Vertical fill is good (~80% via the value-axis range), but generous - left/right grid margins (300px each side of the 1200px mount) leave noticeable - empty canvas beyond where labels end, ~40-50% total canvas utilization. + comment: Grid margins tightened from 300px to 190px on each side, meaningfully + raising canvas utilization; balanced margins, nothing cut off. - id: VQ-06 name: Axis Labels & Title score: 2 @@ -109,9 +111,9 @@ review: passed: true comment: 'First categorical use is #009E73 (increase); #AE3030 correctly reserved for the semantic loss/decrease role. Identical data colors across both theme-correct - renders.' + renders; backgrounds match #FAF8F1 / #1A1A17.' design_excellence: - score: 16 + score: 18 max: 20 items: - id: DE-01 @@ -119,8 +121,9 @@ review: score: 6 max: 8 passed: true - comment: Thoughtful semantic coloring and label placement, clearly above a - default line-chart look. + comment: Thoughtful semantic coloring, callout annotation, and focus/blur + interaction states — clearly above a default line-chart look, though not + quite FiveThirtyEight-level polish. - id: DE-02 name: Visual Refinement score: 6 @@ -130,11 +133,12 @@ review: consistent label formatting. - id: DE-03 name: Data Storytelling - score: 4 + score: 6 max: 6 passed: true - comment: Direction-based color coding creates immediate visual hierarchy (who - improved vs declined) without requiring the reader to read every number. + comment: 'New ''Biggest mover: Support +15 pts'' callout explicitly states + the key insight, combined with direction-based color coding — viewer immediately + sees the story without reading every number.' spec_compliance: score: 15 max: 15 @@ -176,8 +180,8 @@ review: max: 6 passed: true comment: 'Good spread of magnitude and direction: large increase (Support - +15), large decrease (none extreme but Marketing -5), and small changes - (HR +3, Legal -1).' + +15), moderate decrease (Marketing -5), and small changes (HR +3, Legal + -1).' - id: DQ-02 name: Realistic Context score: 5 @@ -228,7 +232,7 @@ review: comment: Correct mount-node contract, animation:false set, no explicit devicePixelRatio/size passed to echarts.init. library_mastery: - score: 5 + score: 7 max: 10 items: - id: LM-01 @@ -240,16 +244,17 @@ review: and formatter callbacks. - id: LM-02 name: Distinctive Features - score: 1 + score: 3 max: 5 - passed: false - comment: Per-point label formatter + itemStyle coloring is generic and easily - replicated in any charting library; no ECharts-distinctive capability (graphic - elements, emphasis/focus states, etc.) is used. - verdict: REJECTED + passed: true + comment: Now uses ECharts-specific emphasis/focus + blur cross-series highlighting + and the graphic API for a declarative text overlay — clearly beyond generic + usage, though not a feature entirely unreplicable elsewhere. + verdict: APPROVED impl_tags: dependencies: [] - techniques: [] + techniques: + - annotations patterns: - data-generation - iteration-over-groups