Skip to content

Commit d7a7620

Browse files
github-actions[bot]github-actions[bot]
committed
chore(d3): update quality score 87 and review feedback for dumbbell-basic
1 parent 6c8d605 commit d7a7620

2 files changed

Lines changed: 248 additions & 9 deletions

File tree

  • plots/dumbbell-basic

‎plots/dumbbell-basic/implementations/javascript/d3.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// anyplot.ai
22
// dumbbell-basic: Basic Dumbbell Chart
3-
// Library: d3 7.9.0 | JavaScript 22
4-
// Quality: pending | Created: 2026-06-30
3+
// Library: d3 7.9.0 | JavaScript 22.23.1
4+
// Quality: 87/100 | Created: 2026-06-30
55

66
const t = window.ANYPLOT_TOKENS;
77
const { width, height } = window.ANYPLOT_SIZE;

‎plots/dumbbell-basic/metadata/javascript/d3.yaml‎

Lines changed: 246 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
1-
# Per-library metadata for d3 implementation of dumbbell-basic
2-
# Auto-generated by impl-generate.yml
3-
41
library: d3
52
language: javascript
63
specification_id: dumbbell-basic
74
created: '2026-06-30T23:07:35Z'
8-
updated: '2026-06-30T23:07:35Z'
5+
updated: '2026-06-30T23:13:41Z'
96
generated_by: claude-sonnet
107
workflow_run: 28481348050
118
issue: 945
@@ -15,7 +12,249 @@ preview_url_light: https://storage.googleapis.com/anyplot-images/plots/dumbbell-
1512
preview_url_dark: https://storage.googleapis.com/anyplot-images/plots/dumbbell-basic/javascript/d3/plot-dark.png
1613
preview_html_light: https://storage.googleapis.com/anyplot-images/plots/dumbbell-basic/javascript/d3/plot-light.html
1714
preview_html_dark: https://storage.googleapis.com/anyplot-images/plots/dumbbell-basic/javascript/d3/plot-dark.html
18-
quality_score: null
15+
quality_score: 87
1916
review:
20-
strengths: []
21-
weaknesses: []
17+
strengths:
18+
- 'Correct Imprint palette usage — #009E73 first series, #C475FD second; both colors
19+
theme-identical across light and dark renders'
20+
- 'Excellent data scenario: employee satisfaction before/after flexible work policy
21+
is instantly relatable with realistic department names and plausible score ranges'
22+
- Sorting by improvement magnitude (largest delta at top) adds genuine storytelling
23+
value to the chart
24+
- Stroke halos on dots (pageBg color) create clean visual separation, especially
25+
where dots fall near gridlines
26+
- Domain 50–100 makes efficient use of x-axis space — no wasted whitespace below
27+
the data range
28+
- Dynamic title font-size scaling correctly handles the long descriptive title to
29+
avoid overflow
30+
- 'Clean margins: left=175px generously accommodates ''Customer Success'' label;
31+
connecting lines at 40% opacity are visible but non-distracting'
32+
weaknesses:
33+
- No annotations calling out standout data points — Research (+22 pts) and Engineering
34+
(+19 pts) are the most striking improvements but are not highlighted, requiring
35+
viewers to read individual tick positions to discover this
36+
- Tick and category labels at 13px CSS are slightly below the d3 guide's recommended
37+
14px floor — readable at full canvas size but marginally below spec
38+
- 'LM-02 is below par: no distinctively D3 features beyond the canonical axis +
39+
join + scaleBand pattern; could leverage D3 path generators, custom tick formatting,
40+
or transition-safe static rendering patterns'
41+
- Both before and after dots have equal visual weight — no size or opacity encoding
42+
that reflects magnitude of improvement to guide the viewer's eye
43+
image_description: |-
44+
Light render (plot-light.png):
45+
Background: Warm off-white consistent with #FAF8F1 — not pure white, correct anyplot surface
46+
Chrome: Title "Employee Satisfaction · dumbbell-basic · javascript · d3 · anyplot.ai" in bold dark text, clearly readable. Category labels (Research, Engineering, Product, IT Support, Design, Operations, Marketing, Customer Success, HR, Finance) on y-axis in dark text — all readable. X-axis tick labels (50, 60, 70, 80, 90, 100) in dark text — readable. X-axis label "Satisfaction Score (0–100)" and legend labels "Before Policy" / "After Policy" all clearly visible against the light background.
47+
Data: Green (#009E73, Imprint palette[0]) dots for "Before Policy"; lavender (#C475FD, Imprint palette[1]) dots for "After Policy"; thin gray connecting lines at 40% opacity. Chart sorted by improvement with Research at top (+22 pts) and Finance at bottom (+7 pts). Dots have pageBg stroke halos for clean separation.
48+
Legibility verdict: PASS
49+
50+
Dark render (plot-dark.png):
51+
Background: Warm near-black consistent with #1A1A17 — not pure black, correct anyplot dark surface
52+
Chrome: Title renders as light text on dark background — clearly readable. Category labels, x-axis tick labels, x-axis label, and legend text all flip to light/white text — no dark-on-dark issues detected. Gridlines remain subtle against the dark surface.
53+
Data: Data colors are identical to the light render — green (#009E73) and lavender (#C475FD) dots maintain the same appearance. Both colors read well on the dark surface. Connecting lines visible as mid-gray.
54+
Legibility verdict: PASS
55+
criteria_checklist:
56+
visual_quality:
57+
score: 29
58+
max: 30
59+
items:
60+
- id: VQ-01
61+
name: Text Legibility
62+
score: 7
63+
max: 8
64+
passed: true
65+
comment: All text readable in both themes; tick and category labels at 13px
66+
CSS are slightly below the d3 guide's 14px recommendation but remain readable
67+
at canvas size
68+
- id: VQ-02
69+
name: No Overlap
70+
score: 6
71+
max: 6
72+
passed: true
73+
comment: No overlapping elements in either render; generous band padding prevents
74+
category label collisions
75+
- id: VQ-03
76+
name: Element Visibility
77+
score: 6
78+
max: 6
79+
passed: true
80+
comment: r=10 dots are prominent for sparse 10-point data; connecting lines
81+
at 40% opacity visible but non-distracting
82+
- id: VQ-04
83+
name: Color Accessibility
84+
score: 2
85+
max: 2
86+
passed: true
87+
comment: Imprint palette positions 0 and 1 — both CVD-safe per palette design
88+
- id: VQ-05
89+
name: Layout & Canvas
90+
score: 4
91+
max: 4
92+
passed: true
93+
comment: Canvas gate passed; margins generous; left=175px accommodates 'Customer
94+
Success' label; no overflow or clipping
95+
- id: VQ-06
96+
name: Axis Labels & Title
97+
score: 2
98+
max: 2
99+
passed: true
100+
comment: X-axis label 'Satisfaction Score (0–100)' is descriptive with units;
101+
categories are self-labeling
102+
- id: VQ-07
103+
name: Palette Compliance
104+
score: 2
105+
max: 2
106+
passed: true
107+
comment: 'First series #009E73 (palette[0]), second series #C475FD (palette[1]);
108+
light bg warm off-white, dark bg warm near-black; data colors identical
109+
between themes'
110+
design_excellence:
111+
score: 12
112+
max: 20
113+
items:
114+
- id: DE-01
115+
name: Aesthetic Sophistication
116+
score: 5
117+
max: 8
118+
passed: true
119+
comment: Clean and professional; stroke halos on dots add depth; intentional
120+
sorting by improvement shows design thought; no exceptional visual innovations
121+
beyond fundamentals
122+
- id: DE-02
123+
name: Visual Refinement
124+
score: 4
125+
max: 6
126+
passed: true
127+
comment: Y-axis domain removed; tick marks removed; vertical gridlines appropriate
128+
for horizontal chart orientation; opacity on connecting lines reduces visual
129+
noise
130+
- id: DE-03
131+
name: Data Storytelling
132+
score: 3
133+
max: 6
134+
passed: false
135+
comment: Sorting by improvement creates a narrative, but no annotations highlight
136+
standout results (Research +22 pts, Engineering +19 pts); viewer must read
137+
tick positions manually
138+
spec_compliance:
139+
score: 15
140+
max: 15
141+
items:
142+
- id: SC-01
143+
name: Plot Type
144+
score: 5
145+
max: 5
146+
passed: true
147+
comment: Correct horizontal dumbbell / Cleveland dot plot implementation
148+
- id: SC-02
149+
name: Required Features
150+
score: 4
151+
max: 4
152+
passed: true
153+
comment: Distinct dot colors, thin subtle connecting line (stroke-width 2.5,
154+
opacity 0.4), horizontal orientation, sorted by difference
155+
- id: SC-03
156+
name: Data Mapping
157+
score: 3
158+
max: 3
159+
passed: true
160+
comment: Categories on y-axis, satisfaction scores on x-axis, all 10 departments
161+
shown
162+
- id: SC-04
163+
name: Title & Legend
164+
score: 3
165+
max: 3
166+
passed: true
167+
comment: Title follows {Descriptive Title} · {spec-id} · {language} · {library}
168+
· anyplot.ai format; legend labels 'Before Policy' / 'After Policy' are
169+
clear
170+
data_quality:
171+
score: 15
172+
max: 15
173+
items:
174+
- id: DQ-01
175+
name: Feature Coverage
176+
score: 6
177+
max: 6
178+
passed: true
179+
comment: Both before/after values shown, connecting lines, legend, sorting
180+
by improvement, 10 categories within spec's 5-20 range
181+
- id: DQ-02
182+
name: Realistic Context
183+
score: 5
184+
max: 5
185+
passed: true
186+
comment: Employee satisfaction before/after flexible work policy — realistic
187+
neutral scenario; departments and score ranges (57-91) are plausible
188+
- id: DQ-03
189+
name: Appropriate Scale
190+
score: 4
191+
max: 4
192+
passed: true
193+
comment: Domain 50-100 chosen to avoid wasted whitespace below data range
194+
while showing the full score scale context
195+
code_quality:
196+
score: 10
197+
max: 10
198+
items:
199+
- id: CQ-01
200+
name: KISS Structure
201+
score: 3
202+
max: 3
203+
passed: true
204+
comment: No functions or classes; linear, direct code structure
205+
- id: CQ-02
206+
name: Reproducibility
207+
score: 2
208+
max: 2
209+
passed: true
210+
comment: All data hardcoded; no random elements; deterministic output
211+
- id: CQ-03
212+
name: Clean Imports
213+
score: 2
214+
max: 2
215+
passed: true
216+
comment: No imports; d3 correctly used as global per harness contract
217+
- id: CQ-04
218+
name: Code Elegance
219+
score: 2
220+
max: 2
221+
passed: true
222+
comment: Idiomatic D3 .join() pattern throughout; no fake UI elements
223+
- id: CQ-05
224+
name: Output & API
225+
score: 1
226+
max: 1
227+
passed: true
228+
comment: Harness-driven output; no manual file writes; correct browser harness
229+
contract
230+
library_mastery:
231+
score: 6
232+
max: 10
233+
items:
234+
- id: LM-01
235+
name: Idiomatic Usage
236+
score: 4
237+
max: 5
238+
passed: true
239+
comment: scaleBand + scaleLinear, axisBottom + axisLeft, .join() pattern,
240+
window.ANYPLOT_TOKENS/ANYPLOT_SIZE correctly consumed; solid idiomatic D3
241+
- id: LM-02
242+
name: Distinctive Features
243+
score: 2
244+
max: 5
245+
passed: false
246+
comment: No distinctively D3 features beyond the canonical axis + join + scaleBand
247+
pattern; no D3 path generators, advanced tick formatting, or other library-specific
248+
capabilities leveraged
249+
verdict: APPROVED
250+
impl_tags:
251+
dependencies: []
252+
techniques:
253+
- custom-legend
254+
patterns:
255+
- data-generation
256+
- iteration-over-groups
257+
dataprep: []
258+
styling:
259+
- alpha-blending
260+
- edge-highlighting

0 commit comments

Comments
 (0)