From 08a792c379c209d7dd4ae4fa007afdc238d18ab7 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 30 Jun 2026 22:41:02 +0000 Subject: [PATCH 1/5] feat(echarts): implement area-mountain-panorama --- .../implementations/javascript/echarts.js | 202 ++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 plots/area-mountain-panorama/implementations/javascript/echarts.js diff --git a/plots/area-mountain-panorama/implementations/javascript/echarts.js b/plots/area-mountain-panorama/implementations/javascript/echarts.js new file mode 100644 index 0000000000..5c55f622e0 --- /dev/null +++ b/plots/area-mountain-panorama/implementations/javascript/echarts.js @@ -0,0 +1,202 @@ +// anyplot.ai +// area-mountain-panorama: Mountain Panorama Profile with Labeled Peaks +// Library: echarts 5.5.1 | JavaScript 22 +// Quality: pending | Created: 2026-06-30 + +const t = window.ANYPLOT_TOKENS; +const THEME = window.ANYPLOT_THEME || 'light'; + +// Wallis (Valais) panorama from Zermatt — Weisshorn to Rimpfischhorn +// peaks: [bearing_deg, elevation_m, name] +const peaks = [ + [6, 4506, "Weisshorn"], + [16, 4221, "Zinalrothorn"], + [24, 4063, "Ober Gabelhorn"], + [31, 4358, "Dent Blanche"], + [43, 4478, "Matterhorn"], + [56, 4164, "Breithorn"], + [63, 4092, "Pollux"], + [68, 4223, "Castor"], + [76, 4527, "Liskamm"], + [86, 4634, "Dufourspitze"], + [93, 4190, "Strahlhorn"], + [98, 4199, "Rimpfischhorn"], +]; +const MATTERHORN_IDX = 4; + +// Piecewise-linear ridgeline — sharp triangular peaks, NOT smooth Gaussian bumps +// Each summit has steep linear flanks meeting at a pointed apex +const ridgePoints = [ + [0, 3050], [2, 3250], [3.5, 3600], [5, 4100], [6, 4506], [7, 4150], + [8, 3800], [9.5, 3420], [11, 3520], [13, 3750], [15, 4080], + [16, 4221], [17, 3900], [18.5, 3420], [19.5, 3280], + [21, 3550], [22.5, 3820], [24, 4063], [25, 3720], [26, 3300], [27, 3080], + [28.5, 3450], [30, 4000], [31, 4358], [32, 4050], [33.5, 3450], [35, 2980], + [37, 2870], [38.5, 3000], [40, 3500], [41.5, 3950], [42.5, 4350], + [43, 4478], [43.5, 4200], [45, 3700], [46.5, 3150], [48, 2950], + [50, 3000], [52, 3300], [54, 3800], [56, 4164], [57.5, 3900], + [59, 3500], [60.5, 3480], [62, 3780], [63, 4092], [63.5, 3960], + [65, 3750], [66.5, 3900], [67.5, 4050], [68, 4223], [68.5, 4010], + [70, 3650], [71.5, 3750], [73.5, 4050], [75, 4350], [76, 4527], + [77, 4280], [78.5, 3900], [80, 3650], [82, 4000], [84.5, 4300], + [86, 4634], [87, 4380], [88.5, 4100], [90, 3750], + [91.5, 3850], [92.5, 4000], [93, 4190], [94, 3950], [95.5, 3720], + [96.5, 3800], [97.5, 4030], [98, 4199], [99, 3880], + [101, 3450], [103, 3100], [105, 2900], +]; + +// Sky gradient — dusk alpine feel +const skyTop = THEME === 'dark' ? '#0B1624' : '#BDD6E8'; +const skyMid = THEME === 'dark' ? '#152030' : '#D8EBF2'; +const skyBg = THEME === 'dark' ? '#1A1A17' : '#FAF8F1'; + +// Mountain silhouette fill — dark warm charcoal for both themes +const fillTop = THEME === 'dark' ? '#38342E' : '#302C26'; +const fillBottom = THEME === 'dark' ? '#201E1A' : '#1A1816'; +const ridgeColor = THEME === 'dark' ? '#5A5048' : '#423A30'; + +// Imprint palette position 1 — highlight the focal Matterhorn peak +const BRAND = t.palette[0]; // #009E73 + +const titleText = "Alpine Panorama · area-mountain-panorama · javascript · echarts · anyplot.ai"; +const titleFontSize = Math.max(14, Math.round(22 * Math.min(1.0, 67 / titleText.length))); + +const chart = echarts.init(document.getElementById("container")); + +chart.setOption({ + animation: false, + color: t.palette, + backgroundColor: { + type: 'linear', x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: skyTop }, + { offset: 0.55, color: skyMid }, + { offset: 1, color: skyBg }, + ], + }, + title: { + text: titleText, + left: 'center', + top: 18, + textStyle: { color: t.ink, fontSize: titleFontSize, fontWeight: 'normal' }, + }, + grid: { + left: 95, + right: 50, + top: 230, + bottom: 65, + }, + xAxis: { + type: 'value', + min: 0, + max: 105, + show: false, + }, + yAxis: { + type: 'value', + min: 2600, + max: 4900, + name: 'Elevation (m)', + nameLocation: 'middle', + nameGap: 60, + nameTextStyle: { color: t.inkSoft, fontSize: 14 }, + axisLabel: { + color: t.inkSoft, + fontSize: 13, + formatter: (v) => `${v} m`, + }, + axisLine: { show: false }, + axisTick: { show: false }, + splitLine: { lineStyle: { color: t.grid, width: 1 } }, + }, + series: [{ + type: 'line', + data: ridgePoints, + smooth: false, + symbol: 'none', + lineStyle: { color: ridgeColor, width: 1.5 }, + areaStyle: { + color: { + type: 'linear', x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: fillTop }, + { offset: 1, color: fillBottom }, + ], + }, + opacity: 1, + }, + }], +}); + +// Peak annotations: staggered leader lines + two-line labels (name + elevation) +// yOffsets: vertical distance (CSS px) from summit to label anchor +// xShifts: horizontal nudge for dense clusters (Pollux/Castor, Strahlhorn/Rimpfischhorn) +const yOffsets = [110, 75, 115, 80, 145, 75, 95, 60, 105, 130, 62, 90]; +const xShifts = [ 0, 0, 0, 0, 0, 0, -14, +14, 0, 0, -8, +8]; + +const graphics = []; +peaks.forEach(([angle, elev, name], i) => { + const result = chart.convertToPixel('grid', [angle, elev]); + if (!result) return; + const [px, py] = result; + + const ly = py - yOffsets[i]; + const lx = px + xShifts[i]; + const isMH = (i === MATTERHORN_IDX); + + const dotColor = isMH ? BRAND : t.inkSoft; + const lineStroke = isMH ? BRAND : t.inkSoft; + const dotR = isMH ? 5 : 3; + const nameFill = isMH ? BRAND : t.ink; + const nameFontSize = isMH ? 15 : 13; + const lineWidth = isMH ? 1.5 : 1; + + // Leader line: from just above summit dot to just below the elevation label + graphics.push({ + type: 'line', + z: 20, + shape: { x1: px, y1: py - dotR - 1, x2: lx, y2: ly + 16 }, + style: { stroke: lineStroke, lineWidth, opacity: 0.7 }, + }); + + // Summit dot + graphics.push({ + type: 'circle', + z: 20, + shape: { cx: px, cy: py - dotR, r: dotR }, + style: { fill: dotColor, stroke: 'none' }, + }); + + // Peak name (bold, baseline at ly) + graphics.push({ + type: 'text', + z: 20, + x: lx, + y: ly, + style: { + text: name, + textAlign: 'center', + textBaseline: 'bottom', + fill: nameFill, + fontSize: nameFontSize, + fontWeight: 'bold', + }, + }); + + // Elevation in meters (lighter, just below name) + graphics.push({ + type: 'text', + z: 20, + x: lx, + y: ly + 2, + style: { + text: `${elev} m`, + textAlign: 'center', + textBaseline: 'top', + fill: t.inkSoft, + fontSize: 11, + }, + }); +}); + +chart.setOption({ graphic: graphics }); From 536d6302d0e36f0526b23662d0b5186314b7d65c Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 30 Jun 2026 22:41:17 +0000 Subject: [PATCH 2/5] chore(echarts): add metadata for area-mountain-panorama --- .../metadata/javascript/echarts.yaml | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 plots/area-mountain-panorama/metadata/javascript/echarts.yaml diff --git a/plots/area-mountain-panorama/metadata/javascript/echarts.yaml b/plots/area-mountain-panorama/metadata/javascript/echarts.yaml new file mode 100644 index 0000000000..d7a88d626a --- /dev/null +++ b/plots/area-mountain-panorama/metadata/javascript/echarts.yaml @@ -0,0 +1,21 @@ +# Per-library metadata for echarts implementation of area-mountain-panorama +# Auto-generated by impl-generate.yml + +library: echarts +language: javascript +specification_id: area-mountain-panorama +created: '2026-06-30T22:41:17Z' +updated: '2026-06-30T22:41:17Z' +generated_by: claude-sonnet +workflow_run: 28479242619 +issue: 5365 +language_version: 22.23.0 +library_version: 5.5.1 +preview_url_light: https://storage.googleapis.com/anyplot-images/plots/area-mountain-panorama/javascript/echarts/plot-light.png +preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/area-mountain-panorama/javascript/echarts/plot-dark.png +preview_html_light: https://storage.googleapis.com/anyplot-images/plots/area-mountain-panorama/javascript/echarts/plot-light.html +preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/area-mountain-panorama/javascript/echarts/plot-dark.html +quality_score: null +review: + strengths: [] + weaknesses: [] From 51a8b0f39b7b74e93104c4d28b2fc93329fc33d2 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 30 Jun 2026 22:49:50 +0000 Subject: [PATCH 3/5] chore(echarts): update quality score 83 and review feedback for area-mountain-panorama --- .../implementations/javascript/echarts.js | 4 +- .../metadata/javascript/echarts.yaml | 272 +++++++++++++++++- 2 files changed, 267 insertions(+), 9 deletions(-) diff --git a/plots/area-mountain-panorama/implementations/javascript/echarts.js b/plots/area-mountain-panorama/implementations/javascript/echarts.js index 5c55f622e0..76917ee35a 100644 --- a/plots/area-mountain-panorama/implementations/javascript/echarts.js +++ b/plots/area-mountain-panorama/implementations/javascript/echarts.js @@ -1,7 +1,7 @@ // anyplot.ai // area-mountain-panorama: Mountain Panorama Profile with Labeled Peaks -// Library: echarts 5.5.1 | JavaScript 22 -// Quality: pending | Created: 2026-06-30 +// Library: echarts 5.5.1 | JavaScript 22.23.0 +// Quality: 83/100 | Created: 2026-06-30 const t = window.ANYPLOT_TOKENS; const THEME = window.ANYPLOT_THEME || 'light'; diff --git a/plots/area-mountain-panorama/metadata/javascript/echarts.yaml b/plots/area-mountain-panorama/metadata/javascript/echarts.yaml index d7a88d626a..b6c20e9765 100644 --- a/plots/area-mountain-panorama/metadata/javascript/echarts.yaml +++ b/plots/area-mountain-panorama/metadata/javascript/echarts.yaml @@ -1,11 +1,8 @@ -# Per-library metadata for echarts implementation of area-mountain-panorama -# Auto-generated by impl-generate.yml - library: echarts language: javascript specification_id: area-mountain-panorama created: '2026-06-30T22:41:17Z' -updated: '2026-06-30T22:41:17Z' +updated: '2026-06-30T22:49:49Z' generated_by: claude-sonnet workflow_run: 28479242619 issue: 5365 @@ -15,7 +12,268 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/area-moun preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/area-mountain-panorama/javascript/echarts/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/area-mountain-panorama/javascript/echarts/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/area-mountain-panorama/javascript/echarts/plot-dark.html -quality_score: null +quality_score: 83 review: - strengths: [] - weaknesses: [] + strengths: + - Sharp piecewise-linear ridgeline correctly avoids smooth Gaussian bumps, producing + an authentic alpine silhouette as the spec requires + - Matterhorn highlighted in brand green (#009E73) with a larger dot and bold label, + creating a clear focal point consistent with spec intent + - 'Sky gradient adapts beautifully to both themes: light-blue-to-cream in light + mode, deep-navy-to-near-black in dark mode — atmospheric alpine photography feel' + - Advanced use of ECharts chart.convertToPixel('grid', [x, y]) for pixel-accurate + graphic annotation placement — idiomatic and sophisticated + - All 12 Wallis peaks annotated with name + elevation, staggered via yOffsets and + xShifts to reduce label crowding + - 'Complete spec compliance: panorama type, sky gradient, leader lines, staggered + labels, elevation y-axis, hidden x-axis — every required feature implemented' + - Clean flat code structure with no unnecessary abstractions; reproducible hard-coded + ridgeline data + weaknesses: + - 'Name/elevation label pairs have only a 2 CSS-px vertical gap (y: ly + 2 with + textBaseline=''top''), making them essentially touching in the rendered output + — increase the gap to at least 12-14px (e.g., y: ly + 14) so each two-line label + breathes properly' + - Ridgeline uses only 77 hand-crafted points vs the spec's 500-2000 sample range + — the silhouette lacks the fine irregular jaggedness (midpoint-displacement noise, + jittered sub-peaks) called for in the spec along ridges between main summits; + consider adding higher-frequency noise to the flanks + - 'backgroundColor overrides the t.pageBg token with a custom multi-stop gradient + using non-Imprint hex values (#BDD6E8, #D8EBF2 in light mode; #0B1624, #152030 + in dark mode) — ECharts library guide requires transparent or t.pageBg; sky gradient + should be layered as a background series or visualMap gradient region instead' + - 'Mountain silhouette fill and ridgeline stroke use custom non-Imprint hex values + (#302C26, #1A1816, #423A30 in light; #38342E, #201E1A, #5A5048 in dark) — use + Imprint neutral/muted anchors (t.inkSoft, t.ink) or the theme-adaptive neutral + anchor instead' + - Horizontal label overlap risk at Strahlhorn/Rimpfischhorn (93°/98°, only 5° separation, + long names, xShifts ±8 may be insufficient) and Pollux/Castor (63°/68°) — consider + larger xShifts or alternating between two distinct yOffset tiers + image_description: |- + Light render (plot-light.png): + Background: Sky gradient from light blue (#BDD6E8) at top through pale blue (#D8EBF2) to warm cream (#FAF8F1) at bottom — creates a photographic alpine sky effect consistent with the spec's optional sky-gradient request. + Chrome: Title "Alpine Panorama · area-mountain-panorama · javascript · echarts · anyplot.ai" appears in dark ink at top-center, clearly readable against the light sky background. Y-axis labels ("2600 m" through "4900 m") and axis name "Elevation (m)" are visible on the left in medium-dark text. X-axis is intentionally hidden. + Data: Mountain silhouette rendered as a filled area in very dark near-black charcoal gradient, filling the lower 60% of the chart. Jagged triangular peaks clearly visible (Weisshorn, Matterhorn, Liskamm, Dufourspitze). Peak annotations include small gray dots with thin leader lines rising to two-line name+elevation labels; the Matterhorn (center) is highlighted with a brand-green (#009E73) dot and bold green label. Some name/elevation label pairs appear extremely tight (2px gap). + Legibility verdict: PASS — all text readable; name/elevation pairs very compressed but not completely illegible. Some horizontal label crowding near Strahlhorn/Rimpfischhorn area. + + Dark render (plot-dark.png): + Background: Dark gradient from deep navy (#0B1624) at top through dark navy-charcoal (#152030) to warm near-black (#1A1A17) at bottom — creates a dusk/night mountain feel. NOT pure black. + Chrome: Title appears in light text (#F0EFE8 ink) on dark background — clearly readable. Y-axis labels and axis name visible in lighter secondary-text color. Grid lines subtle against dark background. + Data: Mountain silhouette renders in warm olive-brown gradient (#38342E to #201E1A) rather than jet black, which creates a pleasing contrast against the dark blue sky. Data colors are identical to light render — the Matterhorn is still highlighted in brand green (#009E73). Other peak dots appear in the lighter inkSoft color (gray/off-white) appropriate for dark theme. + Legibility verdict: PASS — all text correctly renders in light-on-dark colors; no dark-on-dark failures detected. Both themes pass the theme-readability check. + criteria_checklist: + visual_quality: + score: 23 + max: 30 + items: + - id: VQ-01 + name: Text Legibility + score: 6 + max: 8 + passed: true + comment: Title and axis labels readable in both themes; however name/elevation + label pairs have only a 2px CSS gap, making them essentially touching in + output + - id: VQ-02 + name: No Overlap + score: 4 + max: 6 + passed: true + comment: Name/elevation pairs extremely tight (2px gap); some horizontal crowding + near Strahlhorn/Rimpfischhorn and Pollux/Castor; staggering partially mitigates + but not fully + - id: VQ-03 + name: Element Visibility + score: 5 + max: 6 + passed: true + comment: Mountain silhouette and annotations clearly visible; peak dots at + 3px CSS (6px physical) are on the small side but distinguishable + - id: VQ-04 + name: Color Accessibility + score: 2 + max: 2 + passed: true + comment: 'Brand green #009E73 as sole data color is CVD-safe; neutral charcoal + for mountain body raises no accessibility concerns' + - id: VQ-05 + name: Layout & Canvas + score: 3 + max: 4 + passed: true + comment: Canvas gate passed (no gate file). Good landscape proportions; annotation + zone (grid.top=230) provides adequate space though slightly crowded with + 12 peaks + - id: VQ-06 + name: Axis Labels & Title + score: 2 + max: 2 + passed: true + comment: Y-axis labeled 'Elevation (m)' with values in meters; x-axis appropriately + hidden for a bearing-panorama; title descriptive with correct format + - id: VQ-07 + name: Palette Compliance + score: 1 + max: 2 + passed: false + comment: Brand green correctly used as focal-element color (Matterhorn). However + backgroundColor overrides t.pageBg with custom hex gradient (#BDD6E8 etc.) + and mountain fill uses non-Imprint custom hexes (#302C26 etc.) — ECharts + library guide requires transparent or t.pageBg + design_excellence: + score: 15 + max: 20 + items: + - id: DE-01 + name: Aesthetic Sophistication + score: 6 + max: 8 + passed: true + comment: 'Above-default: sky gradient + mountain silhouette gradient + focal + Matterhorn highlight create genuine photographic alpine atmosphere; intentional + visual hierarchy' + - id: DE-02 + name: Visual Refinement + score: 4 + max: 6 + passed: true + comment: 'Clean: no spines, subtle grid, hidden x-axis, thin leader lines; + slight deduction for annotation zone crowding in upper half' + - id: DE-03 + name: Data Storytelling + score: 5 + max: 6 + passed: true + comment: Matterhorn as visual focal point (brand green highlight), left-to-right + panorama sweep narrative, atmospheric depth from sky gradient — effective + alpine storytelling + spec_compliance: + score: 15 + max: 15 + items: + - id: SC-01 + name: Plot Type + score: 5 + max: 5 + passed: true + comment: Mountain panorama silhouette with filled area, sharp triangular piecewise-linear + peaks (not Gaussian bumps), correct chart type + - id: SC-02 + name: Required Features + score: 4 + max: 4 + passed: true + comment: 'All features: jagged ridgeline, summit annotations with name+elevation, + leader lines, Matterhorn focal point, sky gradient, label staggering, elevation + y-axis, hidden x-axis' + - id: SC-03 + name: Data Mapping + score: 3 + max: 3 + passed: true + comment: Bearing on x-axis (0-105°), elevation in meters on y-axis (2600-4900m); + all 12 Wallis peaks correctly positioned + - id: SC-04 + name: Title & Legend + score: 3 + max: 3 + passed: true + comment: Title 'Alpine Panorama · area-mountain-panorama · javascript · echarts + · anyplot.ai' follows {Descriptive} · {spec-id} · {lang} · {lib} · anyplot.ai + format; no legend appropriate for single thematic series + data_quality: + score: 13 + max: 15 + items: + - id: DQ-01 + name: Feature Coverage + score: 5 + max: 6 + passed: true + comment: 'Comprehensive: silhouette, peaks, leader lines, staggering, sky + gradient, focal element — optional depth layers (foreground/background ridges) + not implemented' + - id: DQ-02 + name: Realistic Context + score: 5 + max: 5 + passed: true + comment: Wallis (Valais) panorama from Zermatt with historically accurate + peak elevations; neutral geographic context, no controversy + - id: DQ-03 + name: Appropriate Scale + score: 3 + max: 4 + passed: true + comment: Y-axis 2600-4900m appropriate; 12 peaks within spec's 10-20 range; + however only 77 ridgeline points vs spec's 500-2000 recommendation — fewer + fine-grained jagged details + code_quality: + score: 10 + max: 10 + items: + - id: CQ-01 + name: KISS Structure + score: 3 + max: 3 + passed: true + comment: No functions or classes; flat sequential data → chart setup → graphics + loop + - id: CQ-02 + name: Reproducibility + score: 2 + max: 2 + passed: true + comment: 'Fully deterministic: all data hard-coded, no RNG' + - id: CQ-03 + name: Clean Imports + score: 2 + max: 2 + passed: true + comment: No imports needed; ECharts is a global; all variables used + - id: CQ-04 + name: Code Elegance + score: 2 + max: 2 + passed: true + comment: Clean ECharts idiomatic code; no fake interactivity; peaks loop is + appropriately concise + - id: CQ-05 + name: Output & API + score: 1 + max: 1 + passed: true + comment: animation:false set; echarts.init without explicit size or devicePixelRatio; + harness handles file output + library_mastery: + score: 7 + max: 10 + items: + - id: LM-01 + name: Idiomatic Usage + score: 4 + max: 5 + passed: true + comment: Uses line+areaStyle for filled area, graphic API for custom vector + shapes, convertToPixel for coordinate mapping — above-default idiomatic + ECharts usage + - id: LM-02 + name: Distinctive Features + score: 3 + max: 5 + passed: true + comment: chart.convertToPixel('grid', [x,y]) for pixel-accurate annotation + placement, dual chart.setOption calls to layer graphic elements, backgroundColor + gradient object — genuinely distinctive ECharts capabilities + verdict: APPROVED +impl_tags: + dependencies: [] + techniques: + - annotations + patterns: + - data-generation + - iteration-over-groups + dataprep: [] + styling: + - alpha-blending + - gradient-fill From 9356877a39b8f8811e4951bfd8acb708ee3ab8e7 Mon Sep 17 00:00:00 2001 From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com> Date: Tue, 30 Jun 2026 23:00:48 +0000 Subject: [PATCH 4/5] fix(echarts): address review feedback for area-mountain-panorama Attempt 1/3 - fixes based on AI review --- .../implementations/javascript/echarts.js | 157 +++++++++++------- 1 file changed, 95 insertions(+), 62 deletions(-) diff --git a/plots/area-mountain-panorama/implementations/javascript/echarts.js b/plots/area-mountain-panorama/implementations/javascript/echarts.js index 76917ee35a..23ba836784 100644 --- a/plots/area-mountain-panorama/implementations/javascript/echarts.js +++ b/plots/area-mountain-panorama/implementations/javascript/echarts.js @@ -24,36 +24,59 @@ const peaks = [ ]; const MATTERHORN_IDX = 4; -// Piecewise-linear ridgeline — sharp triangular peaks, NOT smooth Gaussian bumps -// Each summit has steep linear flanks meeting at a pointed apex +// Piecewise-linear ridgeline — sharp triangular peaks with inter-summit jaggedness const ridgePoints = [ - [0, 3050], [2, 3250], [3.5, 3600], [5, 4100], [6, 4506], [7, 4150], - [8, 3800], [9.5, 3420], [11, 3520], [13, 3750], [15, 4080], - [16, 4221], [17, 3900], [18.5, 3420], [19.5, 3280], - [21, 3550], [22.5, 3820], [24, 4063], [25, 3720], [26, 3300], [27, 3080], - [28.5, 3450], [30, 4000], [31, 4358], [32, 4050], [33.5, 3450], [35, 2980], - [37, 2870], [38.5, 3000], [40, 3500], [41.5, 3950], [42.5, 4350], - [43, 4478], [43.5, 4200], [45, 3700], [46.5, 3150], [48, 2950], - [50, 3000], [52, 3300], [54, 3800], [56, 4164], [57.5, 3900], - [59, 3500], [60.5, 3480], [62, 3780], [63, 4092], [63.5, 3960], - [65, 3750], [66.5, 3900], [67.5, 4050], [68, 4223], [68.5, 4010], - [70, 3650], [71.5, 3750], [73.5, 4050], [75, 4350], [76, 4527], - [77, 4280], [78.5, 3900], [80, 3650], [82, 4000], [84.5, 4300], - [86, 4634], [87, 4380], [88.5, 4100], [90, 3750], - [91.5, 3850], [92.5, 4000], [93, 4190], [94, 3950], [95.5, 3720], - [96.5, 3800], [97.5, 4030], [98, 4199], [99, 3880], - [101, 3450], [103, 3100], [105, 2900], + [0, 3050], [1, 3150], [2, 3250], [2.5, 3420], [3.5, 3600], [4, 3800], [5, 4100], + [6, 4506], + [7, 4150], [7.5, 4000], [8, 3800], [8.8, 3650], [9.5, 3420], [10, 3480], [11, 3520], + [11.8, 3620], [12.5, 3700], [13, 3750], [13.8, 3900], [14.5, 4000], [15, 4080], [15.5, 4150], + [16, 4221], + [16.8, 4050], [17, 3900], [17.8, 3700], [18.5, 3420], [19, 3350], [19.5, 3280], + [20, 3320], [20.8, 3420], [21, 3550], [21.5, 3650], [22.5, 3820], [23, 3940], + [24, 4063], + [24.8, 3900], [25, 3720], [25.8, 3580], [26, 3300], [26.8, 3180], [27, 3080], + [27.5, 3200], [28, 3320], [28.5, 3450], [29, 3700], [29.5, 3900], [30, 4000], [30.5, 4150], + [31, 4358], + [31.5, 4200], [32, 4050], [32.8, 3800], [33.5, 3450], [34, 3280], [35, 2980], + [35.8, 2900], [36.5, 2850], [37, 2870], [37.8, 2920], [38.5, 3000], [39, 3220], [39.5, 3380], + [40, 3500], [40.8, 3650], [41.5, 3950], [42, 4150], [42.5, 4350], + [43, 4478], + [43.5, 4200], [44, 3900], [44.8, 3600], [45, 3700], [45.8, 3500], [46.5, 3150], + [47, 3080], [47.8, 2980], [48, 2950], + [48.8, 2980], [49.5, 3000], [50, 3000], [50.8, 3120], [51.5, 3200], [52, 3300], + [52.8, 3500], [53.5, 3650], [54, 3800], [54.8, 3920], [55.5, 4050], + [56, 4164], + [56.8, 4050], [57.5, 3900], [58, 3800], [58.8, 3700], [59, 3500], + [59.8, 3480], [60.5, 3480], [61, 3550], [61.8, 3650], [62, 3780], + [63, 4092], + [63.5, 3960], [64, 3850], [64.8, 3780], [65, 3750], + [65.8, 3800], [66.5, 3900], [67, 3980], [67.5, 4050], + [68, 4223], + [68.5, 4010], [69, 3850], [69.8, 3750], [70, 3650], [70.8, 3700], [71.5, 3750], + [72, 3800], [72.8, 3920], [73.5, 4050], [74, 4180], [74.8, 4300], [75, 4350], + [76, 4527], + [76.8, 4380], [77, 4280], [77.8, 4150], [78.5, 3900], [79, 3780], [79.8, 3700], + [80, 3650], [80.8, 3800], [81.5, 3950], [82, 4000], [82.8, 4150], [83.5, 4200], [84.5, 4300], + [85, 4420], [85.5, 4500], + [86, 4634], + [86.8, 4480], [87, 4380], [87.8, 4250], [88.5, 4100], [89, 3980], [89.8, 3880], + [90, 3750], [90.8, 3800], [91.5, 3850], [92, 3920], [92.5, 4000], + [93, 4190], + [93.8, 4050], [94, 3950], [94.8, 3850], [95.5, 3720], [96, 3760], [96.5, 3800], + [97, 3900], [97.5, 4030], + [98, 4199], + [98.8, 4000], [99, 3880], + [99.8, 3750], [100.5, 3600], [101, 3450], [101.8, 3300], [102.5, 3200], [103, 3100], + [103.8, 3020], [104.5, 2960], [105, 2900], ]; -// Sky gradient — dusk alpine feel -const skyTop = THEME === 'dark' ? '#0B1624' : '#BDD6E8'; -const skyMid = THEME === 'dark' ? '#152030' : '#D8EBF2'; -const skyBg = THEME === 'dark' ? '#1A1A17' : '#FAF8F1'; +// Sky gradient — Imprint blue (#4467A3, palette[2]) layered as background series +const skyTopColor = THEME === 'dark' ? 'rgba(68,103,163,0.75)' : 'rgba(68,103,163,0.32)'; +const skyMidColor = THEME === 'dark' ? 'rgba(68,103,163,0.30)' : 'rgba(68,103,163,0.08)'; -// Mountain silhouette fill — dark warm charcoal for both themes -const fillTop = THEME === 'dark' ? '#38342E' : '#302C26'; -const fillBottom = THEME === 'dark' ? '#201E1A' : '#1A1816'; -const ridgeColor = THEME === 'dark' ? '#5A5048' : '#423A30'; +// Mountain silhouette — theme-adaptive ink tokens (no custom hex values) +const fillColor = t.ink; +const ridgeColor = t.inkSoft; // Imprint palette position 1 — highlight the focal Matterhorn peak const BRAND = t.palette[0]; // #009E73 @@ -66,14 +89,7 @@ const chart = echarts.init(document.getElementById("container")); chart.setOption({ animation: false, color: t.palette, - backgroundColor: { - type: 'linear', x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: skyTop }, - { offset: 0.55, color: skyMid }, - { offset: 1, color: skyBg }, - ], - }, + backgroundColor: t.pageBg, title: { text: titleText, left: 'center', @@ -109,30 +125,47 @@ chart.setOption({ axisTick: { show: false }, splitLine: { lineStyle: { color: t.grid, width: 1 } }, }, - series: [{ - type: 'line', - data: ridgePoints, - smooth: false, - symbol: 'none', - lineStyle: { color: ridgeColor, width: 1.5 }, - areaStyle: { - color: { - type: 'linear', x: 0, y: 0, x2: 0, y2: 1, - colorStops: [ - { offset: 0, color: fillTop }, - { offset: 1, color: fillBottom }, - ], + series: [ + { + // Sky gradient — Imprint blue layered as background series behind mountain + type: 'line', + data: [[0, 4900], [105, 4900]], + smooth: false, + symbol: 'none', + lineStyle: { width: 0, opacity: 0 }, + areaStyle: { + color: { + type: 'linear', x: 0, y: 0, x2: 0, y2: 1, + colorStops: [ + { offset: 0, color: skyTopColor }, + { offset: 0.55, color: skyMidColor }, + { offset: 1, color: 'rgba(68,103,163,0)' }, + ], + }, + opacity: 1, + }, + z: -1, + }, + { + // Mountain silhouette + type: 'line', + data: ridgePoints, + smooth: false, + symbol: 'none', + lineStyle: { color: ridgeColor, width: 1.5 }, + areaStyle: { + color: fillColor, + opacity: 0.95, }, - opacity: 1, + z: 0, }, - }], + ], }); // Peak annotations: staggered leader lines + two-line labels (name + elevation) -// yOffsets: vertical distance (CSS px) from summit to label anchor -// xShifts: horizontal nudge for dense clusters (Pollux/Castor, Strahlhorn/Rimpfischhorn) -const yOffsets = [110, 75, 115, 80, 145, 75, 95, 60, 105, 130, 62, 90]; -const xShifts = [ 0, 0, 0, 0, 0, 0, -14, +14, 0, 0, -8, +8]; +// Wider xShifts for dense clusters (Pollux/Castor, Strahlhorn/Rimpfischhorn) +const yOffsets = [110, 75, 115, 80, 145, 75, 95, 60, 105, 130, 65, 92]; +const xShifts = [ 0, 0, 0, 0, 0, 0, -18, +18, 0, 0, -18, +18]; const graphics = []; peaks.forEach(([angle, elev, name], i) => { @@ -144,14 +177,14 @@ peaks.forEach(([angle, elev, name], i) => { const lx = px + xShifts[i]; const isMH = (i === MATTERHORN_IDX); - const dotColor = isMH ? BRAND : t.inkSoft; - const lineStroke = isMH ? BRAND : t.inkSoft; - const dotR = isMH ? 5 : 3; - const nameFill = isMH ? BRAND : t.ink; - const nameFontSize = isMH ? 15 : 13; - const lineWidth = isMH ? 1.5 : 1; + const dotColor = isMH ? BRAND : t.inkSoft; + const lineStroke = isMH ? BRAND : t.inkSoft; + const dotR = isMH ? 5 : 3; + const nameFill = isMH ? BRAND : t.ink; + const nameFontSize = isMH ? 15 : 13; + const lineWidth = isMH ? 1.5 : 1; - // Leader line: from just above summit dot to just below the elevation label + // Leader line: from just above summit dot to just below elevation label graphics.push({ type: 'line', z: 20, @@ -183,12 +216,12 @@ peaks.forEach(([angle, elev, name], i) => { }, }); - // Elevation in meters (lighter, just below name) + // Elevation — 14px gap below name baseline for breathing room graphics.push({ type: 'text', z: 20, x: lx, - y: ly + 2, + y: ly + 14, style: { text: `${elev} m`, textAlign: 'center', From 4db1a52faf7f8436f98a73c88c0ee7219706d457 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Tue, 30 Jun 2026 23:10:01 +0000 Subject: [PATCH 5/5] chore(echarts): update quality score 91 and review feedback for area-mountain-panorama --- .../implementations/javascript/echarts.js | 2 +- .../metadata/javascript/echarts.yaml | 203 ++++++++---------- 2 files changed, 87 insertions(+), 118 deletions(-) diff --git a/plots/area-mountain-panorama/implementations/javascript/echarts.js b/plots/area-mountain-panorama/implementations/javascript/echarts.js index 23ba836784..9ce6e5e91b 100644 --- a/plots/area-mountain-panorama/implementations/javascript/echarts.js +++ b/plots/area-mountain-panorama/implementations/javascript/echarts.js @@ -1,7 +1,7 @@ // anyplot.ai // area-mountain-panorama: Mountain Panorama Profile with Labeled Peaks // Library: echarts 5.5.1 | JavaScript 22.23.0 -// Quality: 83/100 | Created: 2026-06-30 +// Quality: 91/100 | Created: 2026-06-30 const t = window.ANYPLOT_TOKENS; const THEME = window.ANYPLOT_THEME || 'light'; diff --git a/plots/area-mountain-panorama/metadata/javascript/echarts.yaml b/plots/area-mountain-panorama/metadata/javascript/echarts.yaml index b6c20e9765..3c516aa8a0 100644 --- a/plots/area-mountain-panorama/metadata/javascript/echarts.yaml +++ b/plots/area-mountain-panorama/metadata/javascript/echarts.yaml @@ -2,7 +2,7 @@ library: echarts language: javascript specification_id: area-mountain-panorama created: '2026-06-30T22:41:17Z' -updated: '2026-06-30T22:49:49Z' +updated: '2026-06-30T23:10:01Z' generated_by: claude-sonnet workflow_run: 28479242619 issue: 5365 @@ -12,58 +12,42 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/area-moun preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/area-mountain-panorama/javascript/echarts/plot-dark.png preview_html_light: https://storage.googleapis.com/anyplot-images/plots/area-mountain-panorama/javascript/echarts/plot-light.html preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/area-mountain-panorama/javascript/echarts/plot-dark.html -quality_score: 83 +quality_score: 91 review: strengths: - - Sharp piecewise-linear ridgeline correctly avoids smooth Gaussian bumps, producing - an authentic alpine silhouette as the spec requires - - Matterhorn highlighted in brand green (#009E73) with a larger dot and bold label, - creating a clear focal point consistent with spec intent - - 'Sky gradient adapts beautifully to both themes: light-blue-to-cream in light - mode, deep-navy-to-near-black in dark mode — atmospheric alpine photography feel' - - Advanced use of ECharts chart.convertToPixel('grid', [x, y]) for pixel-accurate - graphic annotation placement — idiomatic and sophisticated - - All 12 Wallis peaks annotated with name + elevation, staggered via yOffsets and - xShifts to reduce label crowding - - 'Complete spec compliance: panorama type, sky gradient, leader lines, staggered - labels, elevation y-axis, hidden x-axis — every required feature implemented' - - Clean flat code structure with no unnecessary abstractions; reproducible hard-coded - ridgeline data + - Authentic Wallis/Valais panorama data with factually correct Swiss Alps peak elevations + - Sharp piecewise-linear ridgeline correctly implements alpine silhouette (no Gaussian + bumps) + - Matterhorn focal point immediately reads via brand green (#009E73) — spec primary + design requirement fulfilled + - 'Sky gradient uses Imprint blue (palette[2] = #4467A3) keeping palette compliance + while adding atmospheric depth' + - chart.convertToPixel for dynamic leader-line positioning is the correct idiomatic + approach in ECharts + - Fully deterministic, self-contained implementation with animation:false and correct + ECharts init pattern weaknesses: - - 'Name/elevation label pairs have only a 2 CSS-px vertical gap (y: ly + 2 with - textBaseline=''top''), making them essentially touching in the rendered output - — increase the gap to at least 12-14px (e.g., y: ly + 14) so each two-line label - breathes properly' - - Ridgeline uses only 77 hand-crafted points vs the spec's 500-2000 sample range - — the silhouette lacks the fine irregular jaggedness (midpoint-displacement noise, - jittered sub-peaks) called for in the spec along ridges between main summits; - consider adding higher-frequency noise to the flanks - - 'backgroundColor overrides the t.pageBg token with a custom multi-stop gradient - using non-Imprint hex values (#BDD6E8, #D8EBF2 in light mode; #0B1624, #152030 - in dark mode) — ECharts library guide requires transparent or t.pageBg; sky gradient - should be layered as a background series or visualMap gradient region instead' - - 'Mountain silhouette fill and ridgeline stroke use custom non-Imprint hex values - (#302C26, #1A1816, #423A30 in light; #38342E, #201E1A, #5A5048 in dark) — use - Imprint neutral/muted anchors (t.inkSoft, t.ink) or the theme-adaptive neutral - anchor instead' - - Horizontal label overlap risk at Strahlhorn/Rimpfischhorn (93°/98°, only 5° separation, - long names, xShifts ±8 may be insufficient) and Pollux/Castor (63°/68°) — consider - larger xShifts or alternating between two distinct yOffset tiers + - Peak elevation sub-labels at 11px are small; consider bumping to 12-13px for better + mobile readability when scaled to ~400px width + - Left cluster (Weisshorn, Zinalrothorn, Ober Gabelhorn) has tight horizontal spacing; + minor xShifts could improve visual breathing room + - Dark-mode silhouette inverts to white/cream (t.ink) — creative and visually compelling, + but slightly deviates from the spec dark solid color evening/dusk feel directive image_description: |- Light render (plot-light.png): - Background: Sky gradient from light blue (#BDD6E8) at top through pale blue (#D8EBF2) to warm cream (#FAF8F1) at bottom — creates a photographic alpine sky effect consistent with the spec's optional sky-gradient request. - Chrome: Title "Alpine Panorama · area-mountain-panorama · javascript · echarts · anyplot.ai" appears in dark ink at top-center, clearly readable against the light sky background. Y-axis labels ("2600 m" through "4900 m") and axis name "Elevation (m)" are visible on the left in medium-dark text. X-axis is intentionally hidden. - Data: Mountain silhouette rendered as a filled area in very dark near-black charcoal gradient, filling the lower 60% of the chart. Jagged triangular peaks clearly visible (Weisshorn, Matterhorn, Liskamm, Dufourspitze). Peak annotations include small gray dots with thin leader lines rising to two-line name+elevation labels; the Matterhorn (center) is highlighted with a brand-green (#009E73) dot and bold green label. Some name/elevation label pairs appear extremely tight (2px gap). - Legibility verdict: PASS — all text readable; name/elevation pairs very compressed but not completely illegible. Some horizontal label crowding near Strahlhorn/Rimpfischhorn area. + Background: Warm off-white (#FAF8F1) — correct theme surface + Chrome: Title "Alpine Panorama · area-mountain-panorama · javascript · echarts · anyplot.ai" clearly visible in dark ink (#1A1A17). Y-axis label "Elevation (m)" and tick labels ("2600 m", "3000 m", etc.) readable in secondary ink (#4A4A44). X-axis hidden (correct per spec). Grid lines subtle and horizontal-only. + Data: Near-black mountain silhouette (t.ink = #1A1A17) fills lower portion. Sky gradient in Imprint blue (#4467A3 at 32% opacity) above ridgeline. 12 peak annotations with leader lines, staggered heights. Matterhorn highlighted with brand green (#009E73) dot and label text — clear focal point. + Legibility verdict: PASS — all text readable against light background; elevation sub-labels at 11px are small but acceptable at canvas size. Dark render (plot-dark.png): - Background: Dark gradient from deep navy (#0B1624) at top through dark navy-charcoal (#152030) to warm near-black (#1A1A17) at bottom — creates a dusk/night mountain feel. NOT pure black. - Chrome: Title appears in light text (#F0EFE8 ink) on dark background — clearly readable. Y-axis labels and axis name visible in lighter secondary-text color. Grid lines subtle against dark background. - Data: Mountain silhouette renders in warm olive-brown gradient (#38342E to #201E1A) rather than jet black, which creates a pleasing contrast against the dark blue sky. Data colors are identical to light render — the Matterhorn is still highlighted in brand green (#009E73). Other peak dots appear in the lighter inkSoft color (gray/off-white) appropriate for dark theme. - Legibility verdict: PASS — all text correctly renders in light-on-dark colors; no dark-on-dark failures detected. Both themes pass the theme-readability check. + Background: Near-black (#1A1A17) — correct dark theme surface + Chrome: Title in light cream (#F0EFE8), Y-axis labels in light gray (#B8B7B0), all readable against dark background. No dark-on-dark failures. Grid lines in dark-theme grid token (rgba(240,239,232,0.15)) very subtle. + Data: Mountain silhouette appears white/cream (#F0EFE8 = t.ink in dark mode), creating snow-mountain-on-night-sky aesthetic. Sky gradient more vivid (75% opacity Imprint blue at top). Matterhorn still in brand green (#009E73) — readable on dark background. Data colors identical to light render; only chrome flips. + Legibility verdict: PASS — all text readable against dark sky background; no dark-on-dark failures observed; brand green visible on dark surface. criteria_checklist: visual_quality: - score: 23 + score: 28 max: 30 items: - id: VQ-01 @@ -71,57 +55,51 @@ review: score: 6 max: 8 passed: true - comment: Title and axis labels readable in both themes; however name/elevation - label pairs have only a 2px CSS gap, making them essentially touching in - output + comment: All font sizes explicitly set; peak names 13-15px and elevations + 11px readable at canvas size; elevation sub-labels small at mobile scale - id: VQ-02 name: No Overlap - score: 4 + score: 6 max: 6 passed: true - comment: Name/elevation pairs extremely tight (2px gap); some horizontal crowding - near Strahlhorn/Rimpfischhorn and Pollux/Castor; staggering partially mitigates - but not fully + comment: Staggered yOffsets and xShifts for clustered pairs eliminate overlap + effectively - id: VQ-03 name: Element Visibility - score: 5 + score: 6 max: 6 passed: true - comment: Mountain silhouette and annotations clearly visible; peak dots at - 3px CSS (6px physical) are on the small side but distinguishable + comment: Mountain silhouette, summit dots, and leader lines clearly visible + in both themes - id: VQ-04 name: Color Accessibility score: 2 max: 2 passed: true - comment: 'Brand green #009E73 as sole data color is CVD-safe; neutral charcoal - for mountain body raises no accessibility concerns' + comment: Imprint palette with brand green focal point; CVD-safe - id: VQ-05 name: Layout & Canvas - score: 3 + score: 4 max: 4 passed: true - comment: Canvas gate passed (no gate file). Good landscape proportions; annotation - zone (grid.top=230) provides adequate space though slightly crowded with - 12 peaks + comment: Landscape orientation ideal for panoramic view; generous top margin + for annotation space; balanced margins - id: VQ-06 name: Axis Labels & Title score: 2 max: 2 passed: true - comment: Y-axis labeled 'Elevation (m)' with values in meters; x-axis appropriately - hidden for a bearing-panorama; title descriptive with correct format + comment: Y-axis Elevation (m) with units; title descriptive; X-axis hidden + per spec allowance - id: VQ-07 name: Palette Compliance - score: 1 + score: 2 max: 2 - passed: false - comment: Brand green correctly used as focal-element color (Matterhorn). However - backgroundColor overrides t.pageBg with custom hex gradient (#BDD6E8 etc.) - and mountain fill uses non-Imprint custom hexes (#302C26 etc.) — ECharts - library guide requires transparent or t.pageBg + passed: true + comment: t.pageBg background, t.palette[0] for Matterhorn, Imprint blue for + sky gradient; both renders theme-correct design_excellence: - score: 15 + score: 14 max: 20 items: - id: DE-01 @@ -129,24 +107,22 @@ review: score: 6 max: 8 passed: true - comment: 'Above-default: sky gradient + mountain silhouette gradient + focal - Matterhorn highlight create genuine photographic alpine atmosphere; intentional - visual hierarchy' + comment: 'Visually striking: dark silhouette vs Imprint-blue sky gradient, + Matterhorn focal point in brand green; well above generic defaults' - id: DE-02 name: Visual Refinement score: 4 max: 6 passed: true - comment: 'Clean: no spines, subtle grid, hidden x-axis, thin leader lines; - slight deduction for annotation zone crowding in upper half' + comment: X-axis hidden, Y-axis-only subtle grid, generous annotation whitespace; + minor left-cluster spacing - id: DE-03 name: Data Storytelling - score: 5 + score: 4 max: 6 passed: true - comment: Matterhorn as visual focal point (brand green highlight), left-to-right - panorama sweep narrative, atmospheric depth from sky gradient — effective - alpine storytelling + comment: Clear Matterhorn focal point via brand green; leader lines guide + viewer; real data provides authentic story spec_compliance: score: 15 max: 15 @@ -156,58 +132,53 @@ review: score: 5 max: 5 passed: true - comment: Mountain panorama silhouette with filled area, sharp triangular piecewise-linear - peaks (not Gaussian bumps), correct chart type + comment: Correct mountain panorama area chart with filled silhouette - id: SC-02 name: Required Features score: 4 max: 4 passed: true - comment: 'All features: jagged ridgeline, summit annotations with name+elevation, - leader lines, Matterhorn focal point, sky gradient, label staggering, elevation - y-axis, hidden x-axis' + comment: Piecewise-linear ridgeline, filled area, sky gradient, peak annotations + with leader lines, staggered labels, Matterhorn focal point, sensible Y-axis + lower bound - id: SC-03 name: Data Mapping score: 3 max: 3 passed: true - comment: Bearing on x-axis (0-105°), elevation in meters on y-axis (2600-4900m); - all 12 Wallis peaks correctly positioned + comment: Bearing on X, elevation on Y; all 12 peaks correctly placed - id: SC-04 name: Title & Legend score: 3 max: 3 passed: true - comment: Title 'Alpine Panorama · area-mountain-panorama · javascript · echarts - · anyplot.ai' follows {Descriptive} · {spec-id} · {lang} · {lib} · anyplot.ai - format; no legend appropriate for single thematic series + comment: Alpine Panorama prefix + spec-id · javascript · echarts · anyplot.ai + format correct; no legend needed data_quality: - score: 13 + score: 15 max: 15 items: - id: DQ-01 name: Feature Coverage - score: 5 + score: 6 max: 6 passed: true - comment: 'Comprehensive: silhouette, peaks, leader lines, staggering, sky - gradient, focal element — optional depth layers (foreground/background ridges) - not implemented' + comment: Varied peak heights, steep asymmetric flanks, cols between summits, + 12 labeled peaks from Weisshorn to Rimpfischhorn - id: DQ-02 name: Realistic Context score: 5 max: 5 passed: true - comment: Wallis (Valais) panorama from Zermatt with historically accurate - peak elevations; neutral geographic context, no controversy + comment: Authentic Wallis (Valais) panorama from Zermatt with real peak names; + neutral geographic/alpine content - id: DQ-03 name: Appropriate Scale - score: 3 + score: 4 max: 4 passed: true - comment: Y-axis 2600-4900m appropriate; 12 peaks within spec's 10-20 range; - however only 77 ridgeline points vs spec's 500-2000 recommendation — fewer - fine-grained jagged details + comment: 'All elevations factually correct: Dufourspitze 4634m highest in + Switzerland, Matterhorn 4478m; Y-axis start 2600m matches Zermatt valley' code_quality: score: 10 max: 10 @@ -217,62 +188,60 @@ review: score: 3 max: 3 passed: true - comment: No functions or classes; flat sequential data → chart setup → graphics - loop + comment: 'Flat structure: constants → data → init → setOption → graphics loop; + no functions or classes' - id: CQ-02 name: Reproducibility score: 2 max: 2 passed: true - comment: 'Fully deterministic: all data hard-coded, no RNG' + comment: Fully deterministic hard-coded ridge and peak data; no RNG - id: CQ-03 name: Clean Imports score: 2 max: 2 passed: true - comment: No imports needed; ECharts is a global; all variables used + comment: No imports; echarts is a global; no unused declarations - id: CQ-04 name: Code Elegance score: 2 max: 2 passed: true - comment: Clean ECharts idiomatic code; no fake interactivity; peaks loop is - appropriately concise + comment: Clean, appropriate complexity; two-pass setOption pattern is correct + ECharts idiom for graphic overlays - id: CQ-05 name: Output & API score: 1 max: 1 passed: true - comment: animation:false set; echarts.init without explicit size or devicePixelRatio; - harness handles file output + comment: 'echarts.init/setOption without explicit size/devicePixelRatio; animation: + false; harness handles file output' library_mastery: - score: 7 + score: 9 max: 10 items: - id: LM-01 name: Idiomatic Usage - score: 4 + score: 5 max: 5 passed: true - comment: Uses line+areaStyle for filled area, graphic API for custom vector - shapes, convertToPixel for coordinate mapping — above-default idiomatic - ECharts usage + comment: 'Expert ECharts use: graphic component for annotations, z-index series + layering, linear gradient in areaStyle, animation disabled' - id: LM-02 name: Distinctive Features - score: 3 + score: 4 max: 5 passed: true - comment: chart.convertToPixel('grid', [x,y]) for pixel-accurate annotation - placement, dual chart.setOption calls to layer graphic elements, backgroundColor - gradient object — genuinely distinctive ECharts capabilities + comment: chart.convertToPixel for data→pixel conversion is ECharts-distinctive; + two-step setOption for graphics overlay; z-layer control verdict: APPROVED impl_tags: dependencies: [] techniques: - annotations + - html-export patterns: - data-generation - - iteration-over-groups dataprep: [] styling: - alpha-blending