Clean up the hero chart: remove watermark, fix label collisions, round axis ticks

The district-name watermark inside the arrests-over-time chart was
redundant with the page's own heading and was the direct cause of a label
collision (a high point's rate label rendered on top of it). Removes it.

Two more collisions, both edge cases the screenshot happened to hit: the
first wave's label sat close enough to the plot's top that it could
overlap the topmost gridline text, and a point sitting flush on the plot's
left edge had its center-anchored label bleed into the y-axis tick labels.
Fixes both with more vertical clearance and edge-aware text anchoring
(first point anchors right, last point anchors left, matching the same
fix already applied to chart 4's wave ticks before that chart was cut).

Adds a shared niceTicks() utility (Heckbert's nice-numbers algorithm) so
axis ticks read as round numbers (0/100/200) instead of arbitrary
fractions of the data max (0/113/226/339) — applied to all three charts
for consistency. Also fixes a legend/mark mismatch in the arrests-over-time
chart (the modeled series legend showed a diamond; the actual mark is a
dot) by adding a proper 'dot' shape to ChartLegend.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/components/ChartLegend.jsx

@@ -3,7 +3,7 @@
  * Both of the app's stray-`}` CSS bugs lived inside hand-written SVG legend
  * `fill="..."` strings; keeping legends out of SVG removes that bug class.
  *
- * items: [{ color, label, shape: 'swatch' | 'diamond' | 'line' }]
+ * items: [{ color, label, shape: 'swatch' | 'diamond' | 'line' | 'dot' }]
  */
 export default function ChartLegend({ items }) {
   return (
@@ -36,5 +36,8 @@ function LegendMark({ shape, color }) {
   if (shape === 'line') {
     return <span style={{ display: 'inline-block', width: '16px', height: '3px', background: color, borderRadius: '2px', flexShrink: 0 }} />
   }
+  if (shape === 'dot') {
+    return <span style={{ display: 'inline-block', width: '10px', height: '10px', background: color, borderRadius: '50%', flexShrink: 0 }} />
+  }
   return <span style={{ display: 'inline-block', width: '11px', height: '11px', background: color, borderRadius: '3px', flexShrink: 0 }} />
 }