feat(makie): implement dumbbell-basic

[github-actions]

Implementation: dumbbell-basic - julia/makie

Implements the julia/makie version of dumbbell-basic.

File: plots/dumbbell-basic/implementations/julia/makie.jl

Parent Issue: #945

---

🤖 impl-generate workflow

[claude]

AI Review - Attempt 1/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1). Title "Employee Satisfaction · dumbbell-basic · julia · makie · anyplot.ai" in bold dark ink, spanning ~72% of plot width at titlesize=20 (40pt effective) — well-proportioned. Ten department categories on the Y-axis (Finance through Sales) in INK_SOFT (#4A4A44), all fully visible and well-spaced. X-axis label "Satisfaction Score (1–10)" in dark ink with correct units. X-tick labels (6, 8, 10) clearly readable. Pre-Program dots in brand green (#009E73) and Post-Program dots in lavender (#C475FD) — both prominent at markersize=18. Connecting lines in INK_MUTED (#6B6A63) are thin and subtle (linewidth=2.0), not overpowering the dots. Legend top-right in elevated off-white frame (#FFFDF6) with INK_SOFT labels. Top and right spines removed; only subtle vertical x-grid lines. All text readable against the light background.

Dark render (plot-dark.png): Warm near-black background (#1A1A17). Title, department names, tick labels, and axis label all rendered in light chrome tokens (INK=#F0EFE8, INK_SOFT=#B8B7B0) — fully readable, no dark-on-dark failures. Legend box in elevated dark background (#242420) with INK_SOFT text, readable. Data colors identical to the light render: brand green (#009E73) and lavender (#C475FD) unchanged. Connecting lines appear as light gray (#A8A79F, INK_MUTED dark) — subtle but visible on dark surface. Brand green #009E73 clearly visible. Both renders pass theme-readability check.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 88/100

Category	Score	Max
Visual Quality	29	30
Design Excellence	12	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	7	10
Total	88	100

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — Title (40pt effective), axis labels (28pt effective), tick labels (24pt effective) all readable in both themes. Title spans ~72% of width — proportional and expected for this length.
• VQ-02: No Overlap (6/6) — 10 categories well-spaced, legend avoids data, no text collisions.
• VQ-03: Element Visibility (6/6) — markersize=18 (36pt effective) makes both dot series prominent; connecting lines visible but appropriately subtle.
• VQ-04: Color Accessibility (2/2) — Green and lavender are perceptually distinct; no red-green-only signaling.
• VQ-05: Layout & Canvas (4/4) — Canvas gate passed (3200×1800). Clean horizontal layout, generous whitespace, no overflow.
• VQ-06: Axis Labels & Title (2/2) — X-axis label descriptive with units. Title in correct format with descriptive prefix. Y-axis uses categorical tick labels (no explicit label needed).
• VQ-07: Palette Compliance (2/2) — First series #009E73, second #C475FD (Imprint pos 2). Backgrounds #FAF8F1 / #1A1A17 correct. All chrome tokens theme-adaptive.

Design Excellence (12/20)

• DE-01: Aesthetic Sophistication (5/8) — Intentional two-color scheme from Imprint palette, sorted data adds design intelligence, subtle connecting lines. One point above default — no bold innovative choices.
• DE-02: Visual Refinement (4/6) — Top/right spines removed, x-grid only (no y-grid), y-tick marks suppressed (ytickwidth=0), themed legend with elevated background frame.
• DE-03: Data Storytelling (3/6) — Ascending sort by improvement reveals the gap pattern. However, no annotation highlights the standout (Customer Success has the largest gain), and the ascending sort places the most notable category at the bottom where readers look last.

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct horizontal dumbbell chart with two dots connected by a line per category.
• SC-02: Required Features (4/4) — Horizontal orientation, categories on Y-axis, distinct colors for start/end, sorted by difference, thin subtle connecting line.
• SC-03: Data Mapping (3/3) — X-axis shows satisfaction score, Y-axis shows departments, before/after correctly mapped to Pre/Post-Program.
• SC-04: Title & Legend (3/3) — Title "Employee Satisfaction · dumbbell-basic · julia · makie · anyplot.ai" matches required format. Legend labels "Pre-Program" / "Post-Program" are clear.

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All dumbbell features shown: start dots, end dots, connecting lines, sorted categories. 10 departments within spec's 5–20 range.
• DQ-02: Realistic Context (5/5) — Employee satisfaction before/after a wellness program is a canonical, neutral, real-world dumbbell use case.
• DQ-03: Appropriate Scale (4/4) — Scores 5.1–8.8 on a 1–10 scale. xlims 4.2–10.0 provides sensible padding.

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — No functions or classes; clean linear top-to-bottom script.
• CQ-02: Reproducibility (2/2) — Random.seed!(42) present.
• CQ-03: Clean Imports (2/2) — CairoMakie, Colors, Random — all three used.
• CQ-04: Code Elegance (2/2) — reduce(vcat, ...) for segment construction, sortperm for sorting, RGBAf for grid alpha — all idiomatic Julia.
• CQ-05: Output & API (1/1) — Saves as plot-$(THEME).png with px_per_unit=2. No bare plot.png.

Library Mastery (7/10)

• LM-01: Idiomatic Usage (4/5) — linesegments!, scatter!, axislegend, colorant"", RGBAf, sortperm — idiomatic Makie/Julia throughout. Axis attributes set in constructor.
• LM-02: Distinctive Features (3/5) — linesegments! is the correct Makie primitive for segment pairs (avoids iterating with lines!). axislegend is a Makie-specific convenience not found in matplotlib/plotly.

Score Caps Applied

• None

Strengths

• Complete Imprint palette and full theme-adaptive chrome — both renders correct and clean
• linesegments! is the idiomatic Makie choice for dumbbell connectors (correct over a loop of lines!)
• Realistic, neutral dataset with sensible before/after spread and proper 1–10 scale
• Data sorted by improvement, revealing the direction and magnitude of change effectively
• All spec requirements met: horizontal orientation, two-color dots, thin connecting lines, 10 categories

Weaknesses

• Data storytelling is minimal — no annotation or highlight draws the reader to the most notable category (Customer Success, largest gain). Adding even a brief label on the gap for one standout row would elevate the narrative from "compare all" to "here's the insight."
• Ascending sort (lowest improvement at top) is unconventional — most readers scan top-to-bottom and expect the most notable item first. Reversing to descending sort (largest improvement at top) would improve scannability.
• No Y-axis label — while the department tick labels are self-explanatory, a brief "Department" label would complete the axis pair for catalog completeness.

Issues Found

1. DE-03 MODERATE: No annotations or focal point to guide the reader to the key insight.
   • Fix: Annotate the department with the largest improvement (Customer Success: +1.8 pts) with a small text label on the gap, or use a bolder connecting line for the top-N categories.
2. DE-03 MINOR: Ascending sort puts the most notable item at the bottom.
   • Fix: Reverse the sort order (sortperm(after_raw .- before_raw, rev=true)) so the largest improvement appears at the top.

AI Feedback for Next Attempt

The implementation is technically strong with correct palette, chrome, and idiomatic Makie code. To improve Design Excellence: (1) Reverse the sort order so the most improved department appears at the top of the chart. (2) Add a text annotation on the largest-gap category (e.g., label the gap "↑1.8 pts" or annotate the department name in a slightly bolder style) to create a clear focal point. These two changes turn a comparison tool into a story.

Verdict: APPROVED

[github-actions]

🔧 Repair Attempt 1/4

Applied fixes based on AI review feedback.

Status: Repair completed, re-triggering review...

---

🤖 impl-repair

[claude]

AI Review - Attempt 2/3

Image Description

Light render (plot-light.png): Warm off-white background (#FAF8F1) — correct theme surface. Title "Employee Satisfaction · dumbbell-basic · julia · makie · anyplot.ai" is bold dark (#1A1A17), clearly readable at ~75% plot width. Y-axis department category labels and x-axis tick labels are in INK_SOFT (#4A4A44), crisp and legible. 10 horizontal dumbbell rows display brand green (#009E73) dots for Pre-Program and lavender (#C475FD) dots for Post-Program, connected by subtle INK_MUTED lines. Delta labels (+1.3 to +2.1) are positioned above each segment, with Finance and Engineering (+2.1 gains) appearing slightly larger/darker as standout highlights. Chart is sorted ascending by improvement (largest gain Finance at top). Legend in top-right is clearly readable. All text is readable against the light background — no light-on-light issues.

Dark render (plot-dark.png): Warm near-black background (#1A1A17) — correct dark surface. Title renders in light (#F0EFE8) ink, clearly readable. Y-axis labels, x-axis labels, tick labels, and legend text are all in light INK_SOFT (#B8B7B0) — fully readable against the dark background. The data colors are identical to the light render: same brand green (#009E73) Pre-Program dots and same lavender (#C475FD) Post-Program dots — only the chrome flipped. Delta labels in INK_SOFT/INK_MUTED remain visible. Legend box has the elevated dark fill (#242420). No dark-on-dark failures observed — all text is light-colored on the near-black surface.

Both paragraphs are required. A review that only describes one render is invalid.

Score: 88/100

Category	Score	Max
Visual Quality	29	30
Design Excellence	13	20
Spec Compliance	15	15
Data Quality	15	15
Code Quality	10	10
Library Mastery	6	10
Total	88	100

Visual Quality (29/30)

• VQ-01: Text Legibility (7/8) — All chrome text explicitly sized and readable in both themes; delta annotation labels at fontsize 9 (18px effective at px_per_unit=2) are borderline at mobile thumbnail scale (~400px)
• VQ-02: No Overlap (6/6) — No text or element overlaps; categories well-spaced vertically; delta labels clear of dots
• VQ-03: Element Visibility (6/6) — markersize=18 appropriate for 10 data points; connecting lines subtle but visible; both dot colors clearly distinguishable
• VQ-04: Color Accessibility (2/2) — Imprint positions 1 and 2 (green/lavender) are CVD-safe; good contrast on both backgrounds
• VQ-05: Layout & Canvas (4/4) — 3200×1800 canvas confirmed (gate passed); good proportions; generous margins
• VQ-06: Axis Labels & Title (2/2) — "Satisfaction Score (1–10)" descriptive with units; title format correct with descriptive prefix
• VQ-07: Palette Compliance (2/2) — Pre-Program = #009E73 (brand green, first series); Post-Program = #C475FD (Imprint position 2); both theme backgrounds correct (#FAF8F1 / #1A1A17)

Design Excellence (13/20)

• DE-01: Aesthetic Sophistication (5/8) — Above default (4): Imprint palette correctly applied, sorted by improvement, standout gain highlighting (≥2.0 pts) — professional and intentional but not exceptional
• DE-02: Visual Refinement (4/6) — Above default (2): top/right spines removed, x-only grid, ytickwidth=0 for clean y-axis, spine colors use INK_SOFT token
• DE-03: Data Storytelling (4/6) — Above default (2): sorted by improvement tells a clear before/after narrative, delta labels quantify change, standout highlighting creates a focal point on largest gains

Spec Compliance (15/15)

• SC-01: Plot Type (5/5) — Correct dumbbell/connected dot chart; horizontal orientation; two dots per category connected by line
• SC-02: Required Features (4/4) — Distinct colors for start/end dots; thin subtle connecting line; horizontal orientation; sorted by difference
• SC-03: Data Mapping (3/3) — X-axis = satisfaction score; Y-axis = department; all 10 categories shown
• SC-04: Title & Legend (3/3) — Title "Employee Satisfaction · dumbbell-basic · julia · makie · anyplot.ai" correct; legend "Pre-Program" / "Post-Program" correct

Data Quality (15/15)

• DQ-01: Feature Coverage (6/6) — All dumbbell features present: two values per category, connecting lines, distinct series colors, delta annotations, meaningful sort
• DQ-02: Realistic Context (5/5) — Employee satisfaction before/after wellness program — neutral, realistic, relatable HR scenario with plausible departments and scores
• DQ-03: Appropriate Scale (4/4) — 1–10 scale; pre-program 5.1–7.2, post-program 7.1–8.8; improvements of 1.3–2.1 pts realistic; 10 categories optimal

Code Quality (10/10)

• CQ-01: KISS Structure (3/3) — Linear script, no functions or classes
• CQ-02: Reproducibility (2/2) — Random.seed!(42)
• CQ-03: Clean Imports (2/2) — CairoMakie, Colors, Random — all used
• CQ-04: Code Elegance (2/2) — reduce(vcat, ...) for segment construction is idiomatic; no fake UI elements
• CQ-05: Output & API (1/1) — save("plot-$(THEME).png", fig; px_per_unit=2) correct

Library Mastery (6/10)

• LM-01: Idiomatic Usage (4/5) — Above default (3): linesegments! is the correct idiomatic Makie primitive for paired segments; axislegend, xlims!, ylims!, text! all idiomatic
• LM-02: Distinctive Features (2/5) — Above default (1): linesegments! is Makie-specific with no direct matplotlib equivalent; RGBAf for alpha-aware grid colors; axislegend — but no deeper Makie recipe or theme features

Score Caps Applied

• None

Strengths

• Perfect spec compliance: correct horizontal dumbbell chart, sorted by improvement, with distinct Imprint palette colors and subtle connecting lines
• Correct Imprint palette usage in canonical order — brand green #009E73 for Pre-Program (first series), lavender #C475FD for Post-Program
• Full theme adaptation: all chrome tokens (background, title, axis labels, ticks, spines, grid, legend) correctly flip between light (#FAF8F1) and dark (#1A1A17)
• Effective data storytelling: delta labels above each segment plus standout-gain highlighting (fontsize and color emphasis for ≥2.0 pt gains) guide the viewer
• Idiomatic CairoMakie: linesegments! for segment pairs, axislegend, RGBAf for grid alpha, ytickwidth=0 for a clean y-axis

Weaknesses

• Delta annotation labels use fontsize 9 (18px effective at px_per_unit=2) — borderline at mobile thumbnail sizes (~400px width); bump minimum annotation fontsize to 11–12 for better mobile scalability
• LM-02 Distinctive Features at 2/5 — no deeper Makie-specific recipe features (e.g., custom tick formatters, inset axes, or theme recipes) that would more fully showcase library depth
• DE-01 slightly below ceiling: standout-gain highlighting is a nice touch but a subtle alternating row background (zebra bands) or per-dot marker stroke would further elevate aesthetic polish

Issues Found

1. VQ-01 MINOR: Delta labels at fontsize 9 (18px effective) are borderline at mobile thumbnail scale (~2px after scaling to 400px)
   • Fix: Increase minimum annotation fontsize from 9 to 12 (24px effective) for improved mobile readability
2. LM-02 MODERATE: Chart uses linesegments! and axislegend correctly but doesn't leverage deeper CairoMakie features
   • Fix: Consider adding a custom tick formatter for the x-axis, or use Makie's theme/recipe system more explicitly

AI Feedback for Next Attempt

The implementation is solid and scores 88/100. If regenerating: (1) increase delta annotation fontsize minimum from 9 to 12; (2) consider adding a subtle zebra row background (alternating alpha bands) using hspan! to elevate aesthetic polish; (3) explore a custom x-axis tick formatter using Makie's xtickformat for more distinctive library usage. These are refinements — the core dumbbell chart, palette, and theme adaptation are all correct.

Verdict: APPROVED