Add Baltimore/Richmond MSAs and employment level chart
- Added Baltimore-Columbia-Towson MSA (CBSA 12580) and Richmond MSA (CBSA 40060) - Now covers 6 geographies: DC, MD, VA states + DC/Baltimore/Richmond MSAs - Added second Chart.js line chart showing employment levels over 24 months - Cards grid updated to 3-column layout (2 rows of 3) - Y-axis auto-formats to K/M for employment chart Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@ -45,7 +45,7 @@
|
||||
.header .subtitle { opacity: 0.7; font-size: 0.875rem; }
|
||||
.cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@ -68,23 +68,26 @@
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.panel h2 { margin: 0 0 20px; font-size: 1rem; color: #333; }
|
||||
.chart-wrap { position: relative; height: 320px; }
|
||||
.chart-wrap { position: relative; height: 340px; }
|
||||
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; }
|
||||
font-size: 0.75rem; 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; }
|
||||
.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) {
|
||||
.note { font-size: 0.75rem; color: #999; margin-top: 10px; }
|
||||
@media (max-width: 960px) {
|
||||
.cards { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.cards { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -139,6 +142,26 @@
|
||||
<div><span class="chg-label">YoY</span> <span class="up">▲ +0.6</span> pp</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="border-top: 4px solid #d68910">
|
||||
<div class="card-geo">Baltimore MSA</div>
|
||||
<div class="card-rate" style="color:#d68910">4.3%</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">▲ +0.9</span> pp</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="border-top: 4px solid #117a65">
|
||||
<div class="card-geo">Richmond MSA</div>
|
||||
<div class="card-rate" style="color:#117a65">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.3</span> pp</div>
|
||||
<div><span class="chg-label">YoY</span> <span class="up">▲ +0.4</span> pp</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
@ -146,14 +169,22 @@
|
||||
<div class="chart-wrap">
|
||||
<canvas id="rateChart"></canvas>
|
||||
</div>
|
||||
<p class="note">▲ Red = rate rising (more unemployment). ▼ Green = rate falling.</p>
|
||||
<p class="note">▲ Red = rate rising | ▼ Green = rate falling | Not seasonally adjusted</p>
|
||||
</div>
|
||||
|
||||
<div class="panel">
|
||||
<h2>Employment Level Trend — Last 24 Months</h2>
|
||||
<div class="chart-wrap">
|
||||
<canvas id="emplChart"></canvas>
|
||||
</div>
|
||||
<p class="note">State totals (DC/MD/VA) are significantly larger than MSA figures. Hover to compare values.</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>
|
||||
<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><th style="color:#d68910">Baltimore MSA</th><th style="color:#117a65">Richmond 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>
|
||||
@ -170,6 +201,14 @@
|
||||
<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><td>
|
||||
<div class="tval">4.3%</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">▲ +0.9</span> pp</div>
|
||||
</td><td>
|
||||
<div class="tval">3.4%</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -0.3</span> pp</div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +0.4</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>
|
||||
@ -186,6 +225,14 @@
|
||||
<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><td>
|
||||
<div class="tval">64,081</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -44.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +13358.0</span></div>
|
||||
</td><td>
|
||||
<div class="tval">24,315</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -2538.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="up">▲ +2734.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>
|
||||
@ -202,6 +249,14 @@
|
||||
<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><td>
|
||||
<div class="tval">1,436,841</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -3081.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="down">▼ -6069.0</span></div>
|
||||
</td><td>
|
||||
<div class="tval">691,512</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="up">▲ +1189.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="down">▼ -9943.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>
|
||||
@ -218,20 +273,26 @@
|
||||
<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><td>
|
||||
<div class="tval">1,500,922</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -3125.0</span></div>
|
||||
<div class="tchg"><span class="chg-label">YoY</span> <span class="neutral">—</span></div>
|
||||
</td><td>
|
||||
<div class="tval">715,827</div>
|
||||
<div class="tchg"><span class="chg-label">MoM</span> <span class="down">▼ -1349.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}]};
|
||||
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}, {"label": "Baltimore MSA", "data": [2.7, 2.8, 3.5, 3.7, 3.7, 3.1, 3.3, 3.4, 3.0, 3.6, 3.9, 3.7, 3.4, 3.7, 4.1, 4.4, 4.6, 4.3, 4.1, 3.6, 4.5, 4.8, 4.3, 4.3], "borderColor": "#d68910", "backgroundColor": "#d6891022", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Richmond MSA", "data": [2.6, 2.9, 3.2, 3.3, 3.5, 3.1, 3.1, 3.2, 2.8, 3.3, 3.3, 3.3, 3.0, 3.2, 3.4, 3.4, 3.5, 3.3, 3.8, 3.4, 3.8, 3.8, 3.7, 3.4], "borderColor": "#117a65", "backgroundColor": "#117a6522", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}]};
|
||||
const emplData = {"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": [393443.0, 388487.0, 391286.0, 395848.0, 386519.0, 389157.0, 390915.0, 391918.0, 391619.0, 390797.0, 393994.0, 391957.0, 389067.0, 384898.0, 389619.0, 389692.0, 378170.0, 378669.0, 381416.0, 382881.0, 377509.0, 380928.0, 379767.0, 379272.0], "borderColor": "#c0392b", "backgroundColor": "#c0392b22", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Maryland", "data": [3143318.0, 3131519.0, 3155007.0, 3178734.0, 3140716.0, 3137737.0, 3142415.0, 3123311.0, 3127985.0, 3103018.0, 3095182.0, 3122412.0, 3119327.0, 3099783.0, 3120745.0, 3132308.0, 3095791.0, 3089859.0, 3063947.0, 3067773.0, 3021249.0, 3044373.0, 3071190.0, 3066322.0], "borderColor": "#2471a3", "backgroundColor": "#2471a322", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Virginia", "data": [4445795.0, 4427688.0, 4448018.0, 4457130.0, 4405504.0, 4410793.0, 4418560.0, 4382390.0, 4389991.0, 4378048.0, 4375837.0, 4402832.0, 4416983.0, 4389680.0, 4403882.0, 4404038.0, 4359467.0, 4357817.0, 4319110.0, 4320551.0, 4304247.0, 4299374.0, 4318506.0, 4333772.0], "borderColor": "#1e8449", "backgroundColor": "#1e844922", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "DC Metro MSA", "data": [3436946.0, 3424474.0, 3448813.0, 3474714.0, 3420626.0, 3418818.0, 3425602.0, 3407429.0, 3412353.0, 3402547.0, 3398633.0, 3410007.0, 3415051.0, 3390834.0, 3412149.0, 3424411.0, 3364937.0, 3354485.0, 3320220.0, 3322050.0, 3286604.0, 3294226.0, 3309107.0, 3314544.0], "borderColor": "#7d3c98", "backgroundColor": "#7d3c9822", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Baltimore MSA", "data": [1451831.0, 1446924.0, 1456421.0, 1467013.0, 1453733.0, 1449952.0, 1454088.0, 1448342.0, 1451430.0, 1438845.0, 1434143.0, 1445000.0, 1442910.0, 1434397.0, 1441441.0, 1445193.0, 1437482.0, 1435013.0, 1429844.0, 1433070.0, 1416307.0, 1428911.0, 1439922.0, 1436841.0], "borderColor": "#d68910", "backgroundColor": "#d6891022", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}, {"label": "Richmond MSA", "data": [701863.0, 702240.0, 706580.0, 710358.0, 699383.0, 696886.0, 699164.0, 694222.0, 696686.0, 698143.0, 695270.0, 698984.0, 701455.0, 699723.0, 704918.0, 708022.0, 699445.0, 697769.0, 691306.0, 692163.0, 690372.0, 687296.0, 690323.0, 691512.0], "borderColor": "#117a65", "backgroundColor": "#117a6522", "borderWidth": 2, "pointRadius": 2, "tension": 0.3, "fill": false}]};
|
||||
|
||||
new Chart(document.getElementById("rateChart"), {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: rateData.labels,
|
||||
datasets: rateData.datasets,
|
||||
},
|
||||
data: { labels: rateData.labels, datasets: rateData.datasets },
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
@ -250,10 +311,33 @@ new Chart(document.getElementById("rateChart"), {
|
||||
ticks: { callback: v => v + "%" },
|
||||
grid: { color: "#f0f0f0" },
|
||||
},
|
||||
x: {
|
||||
grid: { display: false },
|
||||
ticks: { maxTicksLimit: 12 },
|
||||
x: { grid: { display: false }, ticks: { maxTicksLimit: 12 } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
new Chart(document.getElementById("emplChart"), {
|
||||
type: "line",
|
||||
data: { labels: emplData.labels, datasets: emplData.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.toLocaleString() : "N/A"}`
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
title: { display: true, text: "Employed Persons" },
|
||||
ticks: { callback: v => (v >= 1000000 ? (v/1000000).toFixed(1)+"M" : (v/1000).toFixed(0)+"K") },
|
||||
grid: { color: "#f0f0f0" },
|
||||
},
|
||||
x: { grid: { display: false }, ticks: { maxTicksLimit: 12 } }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user