Fix chart sizing, model predictions, 90% intervals, and deep link district name
Deploy to git-pages / deploy (push) Successful in 17s

- Increase SVG dimensions in all 6 charts to prevent label truncation
- Fix ModelDrawsComparison: pass quadData so predictions render for three-year models
- Change error bars from 95% to 90% (legend text + SD calculation)
- Widen chart viewport: max-width 70rem vs default 60rem text width
- Fix deep link: fetch district name from API instead of showing 'Loading...'
This commit is contained in:
2026-08-10 12:50:19 -04:00
parent eb396abce7
commit b135f480c0
8 changed files with 49 additions and 32 deletions
+5 -5
View File
@@ -58,7 +58,7 @@ export default function ModelDrawsComparison({ data, waves, districtName }) {
{/* Note */}
<p style={{ fontSize: '0.72rem', color: 'var(--cv-ink-3)', marginTop: 'var(--space-1)' }}>
Red circles = observed arrests. Teal points + error bars (three-year models only) show Bayesian model median and 95% interval. One-year models can only compare against the most recent wave.
Red circles = observed arrests. Teal points + error bars (three-year models only) show Bayesian model median and 90% interval. One-year models can only compare against the most recent wave.
</p>
</div>
)
@@ -66,9 +66,9 @@ export default function ModelDrawsComparison({ data, waves, districtName }) {
/** Single quadrant chart: predicted vs observed for one model specification */
function QuadrantChart({ q, waveData, quadModels, maxArrests }) {
const width = 280
const height = 240
const margin = { top: 35, right: 20, bottom: 60, left: 45 }
const width = 360
const height = 280
const margin = { top: 45, right: 25, bottom: 70, left: 55 }
// For three-year models show all 3 waves; for one-year only the most recent
const showYears = (q.key.includes('m3') || q.key.includes('m4')) ? ['15-16', '17-18', '21-22'] : ['21-22']
@@ -165,7 +165,7 @@ function QuadrantChart({ q, waveData, quadModels, maxArrests }) {
<>
<line x1={70} y1={7} x2={86} y2={7} stroke="var(--teal-600)" strokeWidth={1.5} />
<circle cx={78} cy={7} r={3} fill="var(--teal-600)" />
<text x={92} y={11} fontSize="0.6rem" fill="var(--cv-ink)">Model (median + 95%)</text>
<text x={92} y={11} fontSize="0.6rem" fill="var(--cv-ink)">Model (median + 90%)</text>
</>
)}
</g>