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
+6 -6
View File
@@ -11,7 +11,7 @@ export default function ExceedanceProbability({ rateByGroup, nationalRates }) {
// Compute exceedance probability for each group using normal approximation:
// P(district_rate > national) ≈ Φ((modeled_median - national) / modeled_sd)
// where sd is derived from the interval width (upper - lower) / (2 * z_{0.975})
// where sd is derived from the interval width (upper - lower) / (2 * z_{0.95})
const computed = rateByGroup.map(d => {
const natKey = `${d.race}_${d.sex}`
const nationalRate = nationalRates[natKey] || 0
@@ -25,8 +25,8 @@ export default function ExceedanceProbability({ rateByGroup, nationalRates }) {
// Derive SD from interval width if available, else use observed as proxy
const lowerPerK = ((d.rate_lower || 0) * 1000) || (modeledRatePerK * 0.7)
const upperPerK = ((d.rate_upper || 0) * 1000) || (modeledRatePerK * 1.3)
// sd ≈ (upper - lower) / (2 * 1.96) for a 95% interval under normality
const modeledSd = Math.max((upperPerK - lowerPerK) / 3.92, 0.05)
// sd ≈ (upper - lower) / (2 * 1.645) for a 90% interval under normality
const modeledSd = Math.max((upperPerK - lowerPerK) / 3.29, 0.05)
// P(district > national) using normal CDF approximation
const z = (modeledRatePerK - nationalRate) / modeledSd
@@ -42,9 +42,9 @@ export default function ExceedanceProbability({ rateByGroup, nationalRates }) {
}
}).sort((a, b) => b.probExceeds - a.probExceeds)
const width = 300
const height = 260
const margin = { top: 40, right: 80, bottom: 70, left: 55 }
const width = 400
const height = 320
const margin = { top: 50, right: 100, bottom: 90, left: 70 }
const innerWidth = width - margin.left - margin.right
return (