update(box-basic): pygal — comprehensive quality review and improvement (#4238)

## Summary

Updated **pygal** implementation for **box-basic**.

**Changes:** Comprehensive quality review — improved data quality,
visual design, code style, and library feature usage.

## 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>

Author: MarkusNeusinger

plots/box-basic/implementations/pygal.py

@@ -1,9 +1,12 @@
 """ pyplots.ai
 box-basic: Basic Box Plot
-Library: pygal 3.1.0 | Python 3.13.11
-Quality: 91/100 | Created: 2025-12-23
+Library: pygal 3.1.0 | Python 3.14
+Quality: 90/100 | Created: 2025-12-23
 """
 
+import re
+
+import cairosvg
 import numpy as np
 import pygal
 from pygal.style import Style
@@ -20,26 +23,33 @@
     "HR": np.random.normal(58000, 8000, 100),
 }
 
-# Add some outliers to demonstrate box plot features
+# Add outliers to demonstrate box plot features
 data["Engineering"] = np.append(data["Engineering"], [130000, 135000, 40000])
 data["Sales"] = np.append(data["Sales"], [120000, 25000])
 
-# Custom style using PyPlots colors
+# Compute medians for annotation storytelling
+medians = {cat: float(np.median(data[cat])) for cat in categories}
+highest_dept = max(medians, key=medians.get)
+lowest_dept = min(medians, key=medians.get)
+
+# Custom style for 4800x2700 canvas — strong, vivid colors
 custom_style = Style(
     background="white",
-    plot_background="white",
+    plot_background="#FAFAFA",
     foreground="#333333",
-    foreground_strong="#333333",
-    foreground_subtle="#666666",
-    colors=("#306998", "#FFD43B", "#4CAF50", "#FF5722", "#9C27B0"),
-    title_font_size=60,
-    label_font_size=40,
-    major_label_font_size=36,
-    legend_font_size=36,
-    value_font_size=32,
+    foreground_strong="#222222",
+    foreground_subtle="#E0E0E0",
+    colors=("#306998", "#E69F00", "#009E73", "#D55E00", "#7B68EE"),
+    title_font_size=72,
+    label_font_size=48,
+    major_label_font_size=44,
+    legend_font_size=44,
+    value_font_size=36,
+    opacity=1.0,
+    opacity_hover=1.0,
 )
 
-# Create box chart
+# Create box chart — set y range to focus on actual data, not starting at 0
 chart = pygal.Box(
     width=4800,
     height=2700,
@@ -49,17 +59,45 @@
     y_title="Salary ($)",
     show_legend=True,
     legend_at_bottom=True,
-    legend_box_size=24,
+    legend_at_bottom_columns=5,
+    legend_box_size=36,
+    truncate_legend=-1,
+    truncate_label=-1,
     show_y_guides=True,
     show_x_guides=False,
-    margin=50,
+    margin=80,
+    spacing=40,
     box_mode="tukey",
+    range=(5000, 145000),
+    y_labels=[20000, 40000, 60000, 80000, 100000, 120000, 140000],
 )
 
 # Add data for each category
 for category in categories:
     chart.add(category, data[category].tolist())
 
+# Render SVG, then post-process for visual improvements
+svg_string = chart.render().decode("utf-8")
+
+# Fix 1: Increase box fill opacity from 0.2 to 0.7 (pygal hardcodes subtle-fill)
+svg_string = svg_string.replace(".subtle-fill{fill-opacity:.2}", ".subtle-fill{fill-opacity:.7}")
+
+# Fix 2: Enlarge outlier dots (pygal hardcodes r=3 for box outliers)
+svg_string = re.sub(r'(<circle[^>]*) r="3" (class="subtle-fill)', r'\1 r="10" \2', svg_string)
+
+# Fix 3: Add storytelling annotation as subtitle
+annotation_svg = (
+    f'<text x="2400" y="200" text-anchor="middle" '
+    f'font-size="38" fill="#555555" font-family="sans-serif" font-style="italic">'
+    f"Highest median: {highest_dept} (${medians[highest_dept]:,.0f})"
+    f"  \u00b7  Lowest median: {lowest_dept} (${medians[lowest_dept]:,.0f})"
+    f"  \u00b7  Gap: ${medians[highest_dept] - medians[lowest_dept]:,.0f}"
+    f"</text>"
+)
+svg_string = svg_string.replace("</svg>", f"{annotation_svg}</svg>")
+
 # Save outputs
-chart.render_to_file("plot.html")
-chart.render_to_png("plot.png")
+with open("plot.html", "w") as f:
+    f.write(svg_string)
+
+cairosvg.svg2png(bytestring=svg_string.encode("utf-8"), write_to="plot.png")