Dave Boyd
fd9491f869
Generates dc_md_va_unemployment_report.html: 4 stat cards (DC/MD/VA/DC MSA), 24-month unemployment rate trend line chart, and current-month summary table. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
244 lines
12 KiB
HTML
244 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DC / MD / VA Unemployment Report — June 16, 2026</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
|
<style>
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
background: #f4f6f9;
|
|
color: #222;
|
|
margin: 0;
|
|
padding: 24px;
|
|
}
|
|
.header {
|
|
background: #1a2744;
|
|
color: #fff;
|
|
padding: 24px 32px;
|
|
border-radius: 8px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.header h1 { margin: 0 0 4px; font-size: 1.5rem; }
|
|
.header .subtitle { opacity: 0.7; font-size: 0.875rem; }
|
|
.cards {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.card {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,.08);
|
|
}
|
|
.card-geo { font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
|
|
letter-spacing: .05em; color: #666; margin-bottom: 6px; }
|
|
.card-rate { font-size: 2.2rem; font-weight: 700; line-height: 1; margin-bottom: 4px; }
|
|
.card-period { font-size: 0.75rem; color: #888; margin-bottom: 12px; }
|
|
.card-changes { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; }
|
|
.panel {
|
|
background: #fff;
|
|
border-radius: 8px;
|
|
padding: 24px;
|
|
box-shadow: 0 1px 4px rgba(0,0,0,.08);
|
|
margin-bottom: 24px;
|
|
}
|
|
.panel h2 { margin: 0 0 20px; font-size: 1rem; color: #333; }
|
|
.chart-wrap { position: relative; height: 320px; }
|
|
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
|
|
th { text-align: left; padding: 10px 12px; border-bottom: 2px solid #e5e7eb;
|
|
font-size: 0.8rem; text-transform: uppercase; letter-spacing: .04em; }
|
|
td { padding: 12px; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
|
|
tr:last-child td { border-bottom: none; }
|
|
.tval { font-weight: 600; font-size: 1rem; }
|
|
.tchg { font-size: 0.75rem; color: #555; margin-top: 2px; }
|
|
.up { color: #c0392b; font-weight: 600; }
|
|
.down { color: #1e8449; font-weight: 600; }
|
|
.neutral { color: #888; }
|
|
.chg-label { background: #eef0f3; border-radius: 3px; padding: 1px 4px;
|
|
font-size: 0.7rem; font-weight: 600; color: #555; margin-right: 2px; }
|
|
.note { font-size: 0.75rem; color: #999; margin-top: 8px; }
|
|
@media (max-width: 900px) {
|
|
.cards { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="header">
|
|
<h1>DC / MD / VA Unemployment Report</h1>
|
|
<div class="subtitle">
|
|
Source: BLS Local Area Unemployment Statistics (LAUS) |
|
|
Not seasonally adjusted |
|
|
Generated June 16, 2026
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cards">
|
|
|
|
<div class="card" style="border-top: 4px solid #c0392b">
|
|
<div class="card-geo">District of Columbia</div>
|
|
<div class="card-rate" style="color:#c0392b">5.5%</div>
|
|
<div class="card-period">April 2026</div>
|
|
<div class="card-changes">
|
|
<div><span class="chg-label">MoM</span> <span class="down">▼ -0.2</span> pp</div>
|
|
<div><span class="chg-label">YoY</span> <span class="neutral">— 0.0</span> pp</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="border-top: 4px solid #2471a3">
|
|
<div class="card-geo">Maryland</div>
|
|
<div class="card-rate" style="color:#2471a3">4.4%</div>
|
|
<div class="card-period">April 2026</div>
|
|
<div class="card-changes">
|
|
<div><span class="chg-label">MoM</span> <span class="neutral">— 0.0</span> pp</div>
|
|
<div><span class="chg-label">YoY</span> <span class="up">▲ +1.0</span> pp</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="border-top: 4px solid #1e8449">
|
|
<div class="card-geo">Virginia</div>
|
|
<div class="card-rate" style="color:#1e8449">3.4%</div>
|
|
<div class="card-period">April 2026</div>
|
|
<div class="card-changes">
|
|
<div><span class="chg-label">MoM</span> <span class="down">▼ -0.4</span> pp</div>
|
|
<div><span class="chg-label">YoY</span> <span class="up">▲ +0.4</span> pp</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" style="border-top: 4px solid #7d3c98">
|
|
<div class="card-geo">DC Metro MSA</div>
|
|
<div class="card-rate" style="color:#7d3c98">3.9%</div>
|
|
<div class="card-period">April 2026</div>
|
|
<div class="card-changes">
|
|
<div><span class="chg-label">MoM</span> <span class="down">▼ -0.2</span> pp</div>
|
|
<div><span class="chg-label">YoY</span> <span class="up">▲ +0.6</span> pp</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Unemployment Rate Trend — Last 24 Months</h2>
|
|
<div class="chart-wrap">
|
|
<canvas id="rateChart"></canvas>
|
|
</div>
|
|
<p class="note">▲ Red = rate rising (more unemployment). ▼ Green = rate falling.</p>
|
|
</div>
|
|
|
|
<div class="panel">
|
|
<h2>Current Month Summary</h2>
|
|
|
|
<table>
|
|
<thead><tr><th>Measure</th><th style="color:#c0392b">District of Columbia</th><th style="color:#2471a3">Maryland</th><th style="color:#1e8449">Virginia</th><th style="color:#7d3c98">DC Metro MSA</th></tr></thead>
|
|
<tbody><tr><td><strong>Unemp Rate</strong></td><td>
|
|
<div class="tval">5.5%</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -0.2</span> pp</div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="neutral">— 0.0</span> pp</div>
|
|
</td><td>
|
|
<div class="tval">4.4%</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="neutral">— 0.0</span> pp</div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +1.0</span> pp</div>
|
|
</td><td>
|
|
<div class="tval">3.4%</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -0.4</span> pp</div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +0.4</span> pp</div>
|
|
</td><td>
|
|
<div class="tval">3.9%</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -0.2</span> pp</div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +0.6</span> pp</div>
|
|
</td></tr><tr><td><strong>Unemployed</strong></td><td>
|
|
<div class="tval">22,184</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -694.0</span></div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="down">▼ -676.0</span></div>
|
|
</td><td>
|
|
<div class="tval">139,946</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -646.0</span></div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +28851.0</span></div>
|
|
</td><td>
|
|
<div class="tval">151,108</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -19833.0</span></div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +16516.0</span></div>
|
|
</td><td>
|
|
<div class="tval">134,887</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -7625.0</span></div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +17530.0</span></div>
|
|
</td></tr><tr><td><strong>Employed</strong></td><td>
|
|
<div class="tval">379,272</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -495.0</span></div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="down">▼ -9795.0</span></div>
|
|
</td><td>
|
|
<div class="tval">3,066,322</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -4868.0</span></div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="down">▼ -53005.0</span></div>
|
|
</td><td>
|
|
<div class="tval">4,333,772</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="up">▲ +15266.0</span></div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="down">▼ -83211.0</span></div>
|
|
</td><td>
|
|
<div class="tval">3,314,544</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="up">▲ +5437.0</span></div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="down">▼ -100507.0</span></div>
|
|
</td></tr><tr><td><strong>Labor Force</strong></td><td>
|
|
<div class="tval">401,456</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -1189.0</span></div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="neutral">—</span></div>
|
|
</td><td>
|
|
<div class="tval">3,206,268</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -5514.0</span></div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="neutral">—</span></div>
|
|
</td><td>
|
|
<div class="tval">4,484,880</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -4567.0</span></div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="neutral">—</span></div>
|
|
</td><td>
|
|
<div class="tval">3,449,431</div>
|
|
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -2188.0</span></div>
|
|
<div class="tchg"><span class="chg-label">YoY</span> <span class="neutral">—</span></div>
|
|
</td></tr></tbody>
|
|
</table>
|
|
<p class="note">MoM = month-over-month net change | YoY = year-over-year net change | pp = percentage points</p>
|
|
</div>
|
|
|
|
<script>
|
|
const rateData = {"labels": ["Apr 2024", "May 2024", "Jun 2024", "Jul 2024", "Aug 2024", "Sep 2024", "Oct 2024", "Nov 2024", "Dec 2024", "Jan 2025", "Feb 2025", "Mar 2025", "Apr 2025", "May 2025", "Jun 2025", "Jul 2025", "Aug 2025", "Sep 2025", "Nov 2025", "Dec 2025", "Jan 2026", "Feb 2026", "Mar 2026", "Apr 2026"], "datasets": [{"label": "District of Columbia", "data": [4.5, 5.0, 5.7, 6.0, 6.1, 5.3, 5.2, 5.2, 5.1, 5.8, 6.0, 6.1, 5.5, 5.8, 6.4, 6.8, 7.1, 6.8, 6.8, 6.4, 6.2, 6.1, 5.7, 5.5], "borderColor": "#c0392b", "backgroundColor": "#c0392b22", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Maryland", "data": [2.6, 2.7, 3.5, 3.6, 3.6, 3.1, 3.3, 3.4, 3.0, 3.6, 3.9, 3.8, 3.4, 3.7, 4.2, 4.4, 4.6, 4.3, 4.2, 3.7, 4.6, 4.9, 4.4, 4.4], "borderColor": "#2471a3", "backgroundColor": "#2471a322", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Virginia", "data": [2.5, 2.8, 3.1, 3.2, 3.4, 2.9, 2.9, 3.1, 2.7, 3.2, 3.3, 3.3, 3.0, 3.3, 3.5, 3.5, 3.6, 3.4, 3.9, 3.5, 3.9, 3.9, 3.8, 3.4], "borderColor": "#1e8449", "backgroundColor": "#1e844922", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "DC Metro MSA", "data": [2.6, 2.8, 3.3, 3.4, 3.5, 3.1, 3.2, 3.2, 2.9, 3.4, 3.6, 3.6, 3.3, 3.6, 3.9, 4.1, 4.2, 4.1, 4.3, 3.8, 4.3, 4.5, 4.1, 3.9], "borderColor": "#7d3c98", "backgroundColor": "#7d3c9822", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}]};
|
|
|
|
new Chart(document.getElementById("rateChart"), {
|
|
type: "line",
|
|
data: {
|
|
labels: rateData.labels,
|
|
datasets: rateData.datasets,
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: { mode: "index", intersect: false },
|
|
plugins: {
|
|
legend: { position: "top", labels: { usePointStyle: true, padding: 16 } },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: ctx => ` ${ctx.dataset.label}: ${ctx.parsed.y !== null ? ctx.parsed.y.toFixed(1) + "%" : "N/A"}`
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: {
|
|
title: { display: true, text: "Unemployment Rate (%)" },
|
|
ticks: { callback: v => v + "%" },
|
|
grid: { color: "#f0f0f0" },
|
|
},
|
|
x: {
|
|
grid: { display: false },
|
|
ticks: { maxTicksLimit: 12 },
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|