Skip to content

Commit 7a7ca49

Browse files
update(bar-basic): plotly — comprehensive quality review (#4210)
## Summary Updated **plotly** implementation for **bar-basic**. ### Changes - Added `tickprefix` and `tickformat` for Y-axis dollar formatting - Text labels now include `$` prefix - Font sizes rebalanced (40→28pt) for better proportions at scale_factor=3 - Unicode middot separator ## Test Plan - [x] Preview images uploaded to GCS staging - [x] Implementation file passes ruff format/check - [x] Metadata YAML updated with current versions - [ ] Automated review triggered --- Generated with [Claude Code](https://claude.com/claude-code) `/update` command --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 parent 54028d2 commit 7a7ca49

File tree

2 files changed

+281
-22
lines changed

2 files changed

+281
-22
lines changed

plots/bar-basic/implementations/plotly.py

Lines changed: 62 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,93 @@
11
""" pyplots.ai
22
bar-basic: Basic Bar Chart
3-
Library: plotly 6.5.0 | Python 3.13.11
4-
Quality: 100/100 | Created: 2025-12-13
3+
Library: plotly 6.5.2 | Python 3.14
4+
Quality: 92/100 | Created: 2026-02-14
55
"""
66

77
import plotly.graph_objects as go
88

99

10-
# Data
10+
# Data — product sales by department, sorted descending
1111
categories = ["Electronics", "Clothing", "Home & Garden", "Sports", "Books", "Toys", "Automotive", "Health"]
1212
values = [45200, 38700, 31500, 27800, 24300, 21600, 18900, 15400]
1313

14+
# Highlight the top performer with a distinct shade
15+
bar_colors = ["#1A4971"] + ["#306998"] * (len(categories) - 1)
16+
1417
# Create figure
1518
fig = go.Figure()
1619

1720
fig.add_trace(
1821
go.Bar(
1922
x=categories,
2023
y=values,
21-
marker_color="#306998",
24+
marker={"color": bar_colors, "line": {"color": "rgba(0,0,0,0.08)", "width": 1}},
2225
text=values,
2326
textposition="outside",
24-
texttemplate="%{text:,.0f}",
25-
textfont={"size": 32},
27+
texttemplate="$%{text:,.0f}",
28+
textfont={"size": 20, "color": "#444444"},
29+
hovertemplate="<b>%{x}</b><br>Sales: $%{y:,.0f}<extra></extra>",
2630
)
2731
)
2832

33+
# Annotation: highlight the leading category with an insight callout
34+
fig.add_annotation(
35+
x="Electronics",
36+
y=45200,
37+
text="<b>Top seller</b><br>17% ahead of #2",
38+
showarrow=True,
39+
arrowhead=2,
40+
arrowsize=1.2,
41+
arrowwidth=2,
42+
arrowcolor="#1A4971",
43+
ax=100,
44+
ay=-75,
45+
font={"size": 18, "color": "#1A4971"},
46+
align="left",
47+
bordercolor="#1A4971",
48+
borderwidth=1.5,
49+
borderpad=6,
50+
bgcolor="rgba(255,255,255,0.85)",
51+
)
52+
53+
# Subtle average reference line
54+
avg_value = sum(values) / len(values)
55+
fig.add_hline(
56+
y=avg_value,
57+
line={"color": "rgba(0,0,0,0.25)", "width": 1.5, "dash": "dot"},
58+
annotation={
59+
"text": f"Avg ${avg_value:,.0f}",
60+
"font": {"size": 16, "color": "#666666"},
61+
"showarrow": False,
62+
"xanchor": "left",
63+
},
64+
)
65+
2966
# Layout
3067
fig.update_layout(
31-
title={"text": "bar-basic · plotly · pyplots.ai", "font": {"size": 40}, "x": 0.5, "xanchor": "center"},
32-
xaxis={"title": {"text": "Product Category", "font": {"size": 40}}, "tickfont": {"size": 32}},
68+
title={
69+
"text": "bar-basic · plotly · pyplots.ai",
70+
"font": {"size": 28, "color": "#222222"},
71+
"x": 0.5,
72+
"xanchor": "center",
73+
},
74+
xaxis={
75+
"title": {"text": "Product Category", "font": {"size": 22, "color": "#333333"}},
76+
"tickfont": {"size": 18, "color": "#444444"},
77+
},
3378
yaxis={
34-
"title": {"text": "Sales ($)", "font": {"size": 40}},
35-
"tickfont": {"size": 32},
36-
"gridcolor": "rgba(0,0,0,0.1)",
79+
"title": {"text": "Sales ($)", "font": {"size": 22, "color": "#333333"}},
80+
"tickfont": {"size": 18, "color": "#444444"},
81+
"tickprefix": "$",
82+
"tickformat": ",.0f",
83+
"gridcolor": "rgba(0,0,0,0.07)",
84+
"zeroline": False,
3785
},
3886
template="plotly_white",
3987
bargap=0.3,
40-
margin={"t": 120, "b": 80, "l": 100, "r": 50},
88+
margin={"t": 100, "b": 80, "l": 100, "r": 120},
89+
plot_bgcolor="white",
90+
showlegend=False,
4191
)
4292

4393
# Save
Lines changed: 219 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,235 @@
11
library: plotly
22
specification_id: bar-basic
33
created: 2025-12-13 23:14:18+00:00
4-
updated: 2025-12-13 23:14:18+00:00
5-
generated_by: claude-opus-4-5-20251101
4+
updated: '2026-02-14T14:55:26Z'
5+
generated_by: claude-opus-4-6
66
workflow_run: 20199224291
77
issue: 612
8-
python_version: 3.13.11
9-
library_version: 6.5.0
8+
python_version: '3.14'
9+
library_version: 6.5.2
1010
preview_url: https://storage.googleapis.com/pyplots-images/plots/bar-basic/plotly/plot.png
1111
preview_thumb: https://storage.googleapis.com/pyplots-images/plots/bar-basic/plotly/plot_thumb.png
1212
preview_html: https://storage.googleapis.com/pyplots-images/plots/bar-basic/plotly/plot.html
13-
quality_score: 100
13+
quality_score: 92
1414
impl_tags:
1515
dependencies: []
1616
techniques:
17+
- annotations
1718
- html-export
18-
patterns:
19-
- explicit-figure
19+
patterns: []
2020
dataprep: []
21-
styling: []
21+
styling:
22+
- edge-highlighting
23+
- grid-styling
2224
review:
23-
strengths: []
24-
weaknesses: []
25+
strengths:
26+
- 'Excellent data storytelling with the Top seller annotation providing contextual
27+
insight (17% ahead of #2) and the average reference line giving statistical context'
28+
- All font sizes explicitly set and well-calibrated for 4800x2700 output — perfectly
29+
readable
30+
- Clean, idiomatic Plotly code with good use of library-specific features (hovertemplate,
31+
texttemplate, add_hline with annotation)
32+
- Thoughtful visual hierarchy with subtle darker shade for top performer and minimal
33+
bar outlines
34+
- Dual output (PNG + interactive HTML) leverages Plotly interactive strengths
35+
weaknesses:
36+
- The Top seller annotation box overlaps/crowds the $45,200 value label on the Electronics
37+
bar, creating visual clutter at the most important data point
38+
- The color contrast between the highlighted top bar (#1A4971) and regular bars
39+
(#306998) is quite subtle — could be more visually distinct to reinforce the storytelling
40+
- The average line annotation is pushed to the far right margin — could be positioned
41+
more prominently
2542
improvements: []
2643
verdict: APPROVED
44+
image_description: 'The plot displays a vertical bar chart titled "bar-basic · plotly
45+
· pyplots.ai" centered at the top. Eight bars represent product sales by department,
46+
sorted in descending order from left to right: Electronics ($45,200), Clothing
47+
($38,700), Home & Garden ($31,500), Sports ($27,800), Books ($24,300), Toys ($21,600),
48+
Automotive ($18,900), and Health ($15,400). Dollar-formatted value labels appear
49+
above each bar. The top-performing Electronics bar is rendered in a slightly darker
50+
navy blue (#1A4971) while the remaining bars use a medium blue (#306998). A "Top
51+
seller / 17% ahead of #2" annotation with an arrow points to the Electronics bar.
52+
A dotted horizontal reference line marks the average at $27,925 with a label on
53+
the far right. The background is white with very subtle horizontal gridlines.
54+
The x-axis is labeled "Product Category" and the y-axis "Sales ($)" with dollar-formatted
55+
tick marks. Overall layout is clean and well-proportioned.'
56+
criteria_checklist:
57+
visual_quality:
58+
score: 28
59+
max: 30
60+
items:
61+
- id: VQ-01
62+
name: Text Legibility
63+
score: 8
64+
max: 8
65+
passed: true
66+
comment: 'All font sizes explicitly set: title 28pt, axis labels 22pt, tick
67+
labels 18pt, bar text 20pt. All perfectly readable at 4800x2700.'
68+
- id: VQ-02
69+
name: No Overlap
70+
score: 4
71+
max: 6
72+
passed: false
73+
comment: The Top seller annotation box and the $45,200 value label on the
74+
Electronics bar create visual clutter; the annotation arrow and value text
75+
compete for the same space.
76+
- id: VQ-03
77+
name: Element Visibility
78+
score: 6
79+
max: 6
80+
passed: true
81+
comment: Bars well-sized with appropriate bargap (0.3), all elements clearly
82+
visible.
83+
- id: VQ-04
84+
name: Color Accessibility
85+
score: 4
86+
max: 4
87+
passed: true
88+
comment: Single-hue blue palette is inherently colorblind-safe. No red-green
89+
differentiation.
90+
- id: VQ-05
91+
name: Layout Balance
92+
score: 4
93+
max: 4
94+
passed: true
95+
comment: Good canvas utilization with balanced margins. Plot fills appropriate
96+
portion of canvas.
97+
- id: VQ-06
98+
name: Axis Labels & Title
99+
score: 2
100+
max: 2
101+
passed: true
102+
comment: Product Category and Sales ($) are descriptive with units.
103+
design_excellence:
104+
score: 16
105+
max: 20
106+
items:
107+
- id: DE-01
108+
name: Aesthetic Sophistication
109+
score: 6
110+
max: 8
111+
passed: true
112+
comment: Custom color palette with intentional hierarchy, subtle bar outlines,
113+
clean plotly_white template. Clearly above defaults, strong design.
114+
- id: DE-02
115+
name: Visual Refinement
116+
score: 5
117+
max: 6
118+
passed: true
119+
comment: Subtle gridlines (rgba 0.07), clean template, generous whitespace,
120+
polished margins. Average line label pushed to far right edge.
121+
- id: DE-03
122+
name: Data Storytelling
123+
score: 5
124+
max: 6
125+
passed: true
126+
comment: 'Top seller annotation with contextual insight (17% ahead of #2),
127+
average reference line for context. Good narrative elements.'
128+
spec_compliance:
129+
score: 15
130+
max: 15
131+
items:
132+
- id: SC-01
133+
name: Plot Type
134+
score: 5
135+
max: 5
136+
passed: true
137+
comment: Correct vertical bar chart.
138+
- id: SC-02
139+
name: Required Features
140+
score: 4
141+
max: 4
142+
passed: true
143+
comment: Consistent bar widths, value labels above bars, single color with
144+
highlight, adequate spacing. All spec notes addressed.
145+
- id: SC-03
146+
name: Data Mapping
147+
score: 3
148+
max: 3
149+
passed: true
150+
comment: Categories on x-axis, values on y-axis, correct mapping.
151+
- id: SC-04
152+
name: Title & Legend
153+
score: 3
154+
max: 3
155+
passed: true
156+
comment: Title format bar-basic · plotly · pyplots.ai correct. No legend needed
157+
for single series.
158+
data_quality:
159+
score: 14
160+
max: 15
161+
items:
162+
- id: DQ-01
163+
name: Feature Coverage
164+
score: 5
165+
max: 6
166+
passed: true
167+
comment: 8 categories with clear variation, sorted descending. Good range
168+
($15K-$45K). Could show more extreme variation.
169+
- id: DQ-02
170+
name: Realistic Context
171+
score: 5
172+
max: 5
173+
passed: true
174+
comment: Product sales by department is a real, neutral business scenario.
175+
- id: DQ-03
176+
name: Appropriate Scale
177+
score: 4
178+
max: 4
179+
passed: true
180+
comment: Sales figures $15K-$45K are realistic for department-level retail
181+
sales.
182+
code_quality:
183+
score: 10
184+
max: 10
185+
items:
186+
- id: CQ-01
187+
name: KISS Structure
188+
score: 3
189+
max: 3
190+
passed: true
191+
comment: 'Clean flat structure: import, data, figure, annotation, layout,
192+
save.'
193+
- id: CQ-02
194+
name: Reproducibility
195+
score: 2
196+
max: 2
197+
passed: true
198+
comment: Deterministic hardcoded data, no randomness needed.
199+
- id: CQ-03
200+
name: Clean Imports
201+
score: 2
202+
max: 2
203+
passed: true
204+
comment: Only plotly.graph_objects imported and used.
205+
- id: CQ-04
206+
name: Code Elegance
207+
score: 2
208+
max: 2
209+
passed: true
210+
comment: Clean, well-organized, appropriate complexity.
211+
- id: CQ-05
212+
name: Output & API
213+
score: 1
214+
max: 1
215+
passed: true
216+
comment: Saves as plot.png (1600x900, scale=3) and plot.html. No deprecated
217+
APIs.
218+
library_mastery:
219+
score: 9
220+
max: 10
221+
items:
222+
- id: LM-01
223+
name: Idiomatic Usage
224+
score: 5
225+
max: 5
226+
passed: true
227+
comment: 'Expert use of graph_objects API: go.Bar, add_trace, update_layout,
228+
add_annotation, add_hline with annotation dict.'
229+
- id: LM-02
230+
name: Distinctive Features
231+
score: 4
232+
max: 5
233+
passed: true
234+
comment: 'Uses Plotly-specific features: hovertemplate, texttemplate, add_hline
235+
with embedded annotation, dual output (PNG + HTML).'

0 commit comments

Comments
 (0)