- Observed arrests over time by CRDC wave
+ Arrests over time — observed vs. modeled
- {/* Footer note */}
+
+
- Raw observed arrest counts (left axis) with rate per 1,000 students labeled above each point.
- Data from CRDC waves 2015–16 through 2021–22.
+ Rate per 1,000 students labeled above each observed point. The modeled total sums each
+ selected group's median/interval independently, which approximates but is not exactly the
+ median of the combined total. Data from CRDC waves 2015–16 through 2021–22.
)
diff --git a/src/charts/DistrictVsNational.jsx b/src/charts/DistrictVsNational.jsx
index 8210e76..54f078d 100644
--- a/src/charts/DistrictVsNational.jsx
+++ b/src/charts/DistrictVsNational.jsx
@@ -1,6 +1,11 @@
+import ChartLegend from '../components/ChartLegend.jsx'
+import { raceColor, OBSERVED_MARK_COLOR, REFERENCE_GRAY } from '../utils/colors.js'
+
/**
- * Chart 3: Arrest rate for the student group with the most arrests compared to the national average.
- * Side-by-side bars or point-range comparison.
+ * Chart 3: The district's highest-rate student group vs. the national rate
+ * for that same group. District bar = modeled median (race-colored) with a
+ * 90% interval whisker; dark diamond = observed rate on the same bar.
+ * National bar is a neutral gray reference, not a race/model color.
*/
export default function DistrictVsNational({ topGroup, nationalRate, rateByGroup }) {
@@ -8,89 +13,85 @@ export default function DistrictVsNational({ topGroup, nationalRate, rateByGroup
const height = 300
const margin = { top: 45, right: 30, bottom: 80, left: 70 }
const innerWidth = width - margin.left - margin.right
+ const plotHeight = height - margin.top - margin.bottom
- // Compute max rate for scaling (district + national)
- const districtRate = topGroup.observedRate || 0
- const maxVal = Math.max(districtRate, nationalRate, 1) * 1.3
+ const districtObserved = topGroup.observedRate || 0
+ const districtModeled = topGroup.modeledMedian ?? districtObserved
+ const districtLower = topGroup.rateLower ?? districtModeled
+ const districtUpper = topGroup.rateUpper ?? districtModeled
+ const maxVal = Math.max(districtUpper, districtObserved, nationalRate, 1) * 1.3
+
+ const yFor = (val) => margin.top + plotHeight * (1 - val / maxVal)
+ const color = raceColor(topGroup.race)
+
+ const districtBarX = margin.left + innerWidth * 0.1
+ const districtBarW = innerWidth * 0.35
+ const nationalBarX = margin.left + innerWidth * 0.55
+ const nationalBarW = innerWidth * 0.35
return (
- {/* Chart title */}
District vs. national rate — highest group
- {/* Note */}
+
+
- {topGroup.label || 'Highest-rate group'} in this district has a rate of{' '}
- {districtRate.toFixed(2)} per 1,000 vs. the national average of{' '}
+ {topGroup.label || 'Highest-rate group'} in this district has an observed rate of{' '}
+ {districtObserved.toFixed(2)} per 1,000 vs. the national average of{' '}
{nationalRate.toFixed(2)}. This is{' '}
- {districtRate > nationalRate * 1.5 ? 'substantially higher' : districtRate > nationalRate
- ? 'slightly higher' : districtRate < nationalRate * 0.75
- ? 'much lower'
- : 'comparable'} to the national rate.
+ {districtObserved > nationalRate * 1.5 ? 'substantially higher than' : districtObserved > nationalRate
+ ? 'slightly higher than' : districtObserved < nationalRate * 0.75
+ ? 'much lower than'
+ : 'comparable to'} the national rate.
)
diff --git a/src/charts/ExceedanceProbability.jsx b/src/charts/ExceedanceProbability.jsx
index 779645e..6f35964 100644
--- a/src/charts/ExceedanceProbability.jsx
+++ b/src/charts/ExceedanceProbability.jsx
@@ -1,161 +1,127 @@
import { useState } from 'react'
+import { groupKey } from '../utils/groupKey.js'
+import { groupLabel } from '../utils/colors.js'
+import { fitSkewedInterval, probabilityExceeds } from '../utils/distributionApprox.js'
+import ApproxNote from '../components/ApproxNote.jsx'
/**
- * Chart 6: Probability the district exceeds the national rate for each student group.
- * Uses posterior draws (approximated via interval bounds + median) to compute
- * P(district_rate > national_rate) per race×sex group.
+ * Chart 6: Probability the district exceeds the national rate for each
+ * student group, under a chosen model. The model dropdown now actually
+ * drives the computation (it was previously decorative — computed always
+ * read from a single ChartPanel-precomputed default model).
*/
-export default function ExceedanceProbability({ rateByGroup, nationalRates }) {
+const MODEL_OPTIONS = [
+ { val: 'unified_m2_mod', label: 'Recommended (one-year + covariate)' },
+ { val: 'unified_m4_mod', label: 'Three-year + covariate' },
+]
+
+export default function ExceedanceProbability({ quadData, nationalRates }) {
const [selectedModel, setSelectedModel] = useState('unified_m2_mod')
- // 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.95})
- const computed = rateByGroup.map(d => {
- const natKey = `${d.race}_${d.sex}`
- const nationalRate = nationalRates[natKey] || 0
-
- // Use modeled median and interval from the estimate data if available
- // (rate_median is per student; multiply by 1000 for per-1k)
- const modeledMedianPerK = ((d.modeledRateMedian || d.observedRate * (d.enroll || 1) / 1000))
- // Actually: rate_median is already a probability (per-student). Convert to per-1k.
- const modeledRatePerK = ((d.rate_median || 0) * 1000) || d.observedRate
-
- // 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.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
- const probExceeds = normalCDF(z)
-
- return {
- ...d,
- natKey,
- nationalRate,
- modeledRate: modeledRatePerK,
- modeledSd,
- probExceeds: Math.max(0.01, Math.min(0.99, probExceeds)), // clamp to avoid extremes
- }
- }).sort((a, b) => b.probExceeds - a.probExceeds)
+ const rows = (quadData && quadData[selectedModel]) || []
+ const computed = rows
+ .map((row) => {
+ const natKey = groupKey(row.race, row.sex)
+ const nationalRate = nationalRates[natKey] || 0
+ const rateMedian = (row.rate_median || 0) * 1000
+ const rateLower = (row.rate_lower || 0) * 1000
+ const rateUpper = (row.rate_upper || 0) * 1000
+ const fit = fitSkewedInterval({ median: rateMedian, lower: rateLower, upper: rateUpper })
+ const probExceeds = Math.max(0.01, Math.min(0.99, probabilityExceeds(fit, nationalRate)))
+ return { race: row.race, sex: row.sex, label: groupLabel(row.race, row.sex), nationalRate, modeledRate: rateMedian, probExceeds }
+ })
+ .sort((a, b) => b.probExceeds - a.probExceeds)
const width = 400
const height = 320
- const margin = { top: 50, right: 100, bottom: 90, left: 70 }
+ const margin = { top: 50, right: 100, bottom: 60, left: 130 }
const innerWidth = width - margin.left - margin.right
+ const plotHeight = height - margin.top - margin.bottom
return (
- {/* Chart title */}
Probability district exceeds national rate — by student group
- Based on the {selectedModel === 'unified_m2_mod' ? 'one-year + covariate model (recommended)' : 'three-year + covariate model'}, which balances precision with current-year data. Green bars indicate groups where this district's rate is unlikely to exceed the national average; red indicates likely exceedance.
+ Based on the {selectedModel === 'unified_m2_mod' ? 'one-year + covariate model (recommended)' : 'three-year + covariate model'}.
+ Green bars indicate groups where this district's rate is unlikely to exceed the national average; red indicates likely exceedance.
)
}
-
-// Standard normal CDF approximation (Abramowitz & Stegun)
-function normalCDF(z) {
- const t = 1 / (1 + 0.2316419 * Math.abs(z))
- const d = 0.3989423 * Math.exp(-z * z / 2)
- let prob = d * t * (0.3193815 + t * (-0.3565638 + t * (1.781478 + t * (-1.821256 + t * 1.330274))))
- return z > 0 ? 1 - prob : prob
-}
-
-// Inject a CSS fix for the broken fill attribute in ExceedanceProbability and DistrictVsNational
-const style = document.createElement('style')
diff --git a/src/charts/ModelDrawsComparison.jsx b/src/charts/ModelDrawsComparison.jsx
index a5ccc16..106e5f8 100644
--- a/src/charts/ModelDrawsComparison.jsx
+++ b/src/charts/ModelDrawsComparison.jsx
@@ -1,364 +1,122 @@
-import { useMemo, useRef, useEffect } from 'react'
-import * as d3 from 'd3'
+import { MODEL_QUADRANTS } from '../hooks/useApi.js'
+import ChartLegend from '../components/ChartLegend.jsx'
+import { OBSERVED_MARK_COLOR, MODELED_AGGREGATE_COLOR } from '../utils/colors.js'
/**
- * Chart 4: Predicted draws by year vs. observed — with raw posterior draws from API.
- * Shows model's predicted distribution alongside the observed value,
- * faceted by four quadrants (1yr baseline / 1yr covariate / 3yr baseline / 3yr covariate).
+ * Chart 4: Modeled vs. observed arrests, faceted by the four model-quadrant
+ * specifications (one-year/three-year × baseline/+referral-rate covariate).
+ * Plain SVG (no D3) — the quadrant label already conveys 1yr/3yr, so all
+ * four panels share one ink-diamond/navy-point-range convention rather than
+ * doubling up with a redundant per-quadrant hue.
*/
-const QUADRANT_LABELS = [
- { key: 'unified_m1_mod', label: 'One-year, no covariate' },
- { key: 'unified_m2_mod', label: 'One-year + referral rate' },
- { key: 'unified_m3_mod', label: 'Three-year, no covariate' },
- { key: 'unified_m4_mod', label: 'Three-year + referral rate' },
-]
-
const WAVE_LABELS = { '15-16': '2015–16', '17-18': '2017–18', '21-22': '2021–22' }
+const ALL_WAVES = ['15-16', '17-18', '21-22']
-const COLORS = {
- observed: '#c92d0e', // Red for observed
- model1yr: '#0791b6', // Teal for one-year models
- model3yr: '#000a9b', // Navy for three-year models
-}
-
-export default function ModelDrawsComparison({ data, waves, districtName }) {
- // Derive per-wave observed arrest totals from the time series
- const waveData = useMemo(() => {
- return ['15-16', '17-18', '21-22'].map(year => {
- const rows = (data.waves && data.waves[year]) || []
- return {
- year, label: WAVE_LABELS[year],
- arrests: rows.reduce((sum, r) => sum + (r.observed_arrests || 0), 0),
- enroll: rows.reduce((sum, r) => sum + (r.stu_enroll || 0), 0),
- }
- })
- }, [data.waves])
-
- // Handle both cases: when quadData exists as object or is null/undefined
- const quadModels = (data && data.quadData) ? data.quadData : {}
- // modelDraws may be null if API unavailable, handle gracefully
- const modelDraws = (data && data.modelDraws) ? data.modelDraws : null
-
- // Compute max arrests for Y-axis scaling across all quadrants and years
- const allArrestValues = []
- waveData.forEach(d => allArrestValues.push(d.arrests))
-
- // Also include predicted values
- Object.entries(quadModels).forEach(([modelId, rows]) => {
- ['15-16', '17-18', '21-22'].forEach(year => {
- const yearRow = (rows || []).find(r => r.year === year)
- if (yearRow) {
- allArrestValues.push(yearRow.count_median || 0)
- allArrestValues.push(yearRow.count_upper || 0)
- }
- })
+export default function ModelDrawsComparison({ data, waves = ALL_WAVES, districtName }) {
+ const waveData = waves.map((year) => {
+ const rows = (data.waves && data.waves[year]) || []
+ return { year, arrests: rows.reduce((sum, r) => sum + (r.observed_arrests || 0), 0) }
})
- // Add draw values if available (when modelDraws is populated)
- const drawValues = modelDraws || {}
- Object.values(drawValues).forEach(groups => {
- Object.values(groups).forEach(draws => {
- if (draws && draws.length > 0) {
- allArrestValues.push(...draws)
- }
+ const quadModels = (data && data.quadData) || {}
+
+ const allValues = waveData.map((d) => d.arrests)
+ Object.values(quadModels).forEach((rows) => {
+ ;(rows || []).forEach((r) => {
+ allValues.push(r.count_median || 0, r.count_upper || 0)
})
})
-
- const maxArrests = Math.min(Math.max(...allArrestValues, 1), 50) // Cap at 50 for readability
+ const maxArrests = Math.min(Math.max(...allValues, 1), 50) // cap for readability
return (
- {/* Chart title */}
- Model predictions vs. observed — by wave & model type
+ Model predictions vs. observed — by wave & model specification
- Red circles = observed arrests. Points with error bars show Bayesian model median and 90% interval.
- Three-year models span multiple waves; one-year models only show most recent 2021–22.
+ Three-year models span all three CRDC waves; one-year models show 2021–22 only.{' '}
+ {districtName ? `District: ${districtName}.` : ''}
- Solid blue = observed rate per 1,000 students. Teal outline + median line shows each model's posterior distribution (90% interval). Dashed lines indicate the range of plausible values according to each Bayesian specification.
-
- Bars show observed arrests per 1,000 students. Dashed outlines show the Bayesian model's median estimate (unified_m2_mod).
+ Bar length is the Bayesian model's median estimate (unified_m2_mod); the dark marker is the
+ observed rate at that position.