From 623ae07ebacb9d596b225179727dc87641ad1cca Mon Sep 17 00:00:00 2001
From: Christian Cleberg <hello@cleberg.net>
Date: Fri, 17 Apr 2026 19:41:31 -0500
Subject: phase 2-6: complete D3/TopoJSON migration
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace ZingChart + jQuery with D3 v7 + TopoJSON. Implements all
planned phases: choropleth map (NaturalEarth1 projection, YlOrRd
gradient), hover tooltip, zoom/pan/reset, country detail modal,
side-by-side compare, metric selector, label toggle, donut pie chart
with per-country drilldown bar chart. Upgrades Bootstrap JS bundle
from v4.5.3 (jQuery-dependent) to v5.0.0, fixes modal API calls
to use getInstance/constructor pattern compatible with BS 5.0.0+.
Removes jquery, zingchart ×3 library files.
---
 assets/js/ui/modal.js | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

(limited to 'assets/js/ui/modal.js')

diff --git a/assets/js/ui/modal.js b/assets/js/ui/modal.js
index e110764..2fd8491 100644
--- a/assets/js/ui/modal.js
+++ b/assets/js/ui/modal.js
@@ -1,2 +1,29 @@
-// Phase 5: country detail modal
-export function showCountryModal(countryData) {}
+export function showCountryModal(countryData) {
+	document.getElementById("country-modal-title").textContent = countryData.country;
+	document.getElementById("country-modal-body").innerHTML = `
+		<p><b>Prison Population:</b> ${_fmt(countryData.pop, "pop")}</p>
+		<p><b>Rate per 100,000 Citizens:</b> ${_fmt(countryData.rate, "rate")}</p>
+		<p><b>Females:</b> ${_fmt(countryData.females, "pct")}</p>
+		<p><b>Juveniles:</b> ${_fmt(countryData.juveniles, "pct")}</p>
+		<p><b>Occupancy:</b> ${_fmt(countryData.occupancy, "pct")}</p>
+		<p><b>Government:</b> ${_fmtGov(countryData.government)}</p>
+	`;
+	const el = document.getElementById("countryModal");
+	(bootstrap.Modal.getInstance(el) || new bootstrap.Modal(el)).show();
+}
+
+function _fmt(val, type) {
+	if (val === "--" || val === null || val === undefined || (typeof val === "number" && isNaN(val))) {
+		return "<span class='text-danger'>Information not available.</span>";
+	}
+	if (type === "pop") return Number(val).toLocaleString("en");
+	if (type === "rate") return String(val);
+	if (type === "pct") return (val * 100).toFixed(2) + " %";
+	return String(val);
+}
+
+function _fmtGov(val) {
+	return (!val || val === "--")
+		? "<span class='text-danger'>Information not available.</span>"
+		: val;
+}
-- 
cgit v1.2.3