summaryrefslogtreecommitdiff
path: root/assets/js/map/tooltip.js
diff options
context:
space:
mode:
authorChristian Cleberg <[email protected]>2026-04-17 19:41:31 -0500
committerChristian Cleberg <[email protected]>2026-04-17 19:41:31 -0500
commit623ae07ebacb9d596b225179727dc87641ad1cca (patch)
treef1045282b3369bf3f4b0249cd649b47a5d010dad /assets/js/map/tooltip.js
parentfd412c5197286518ff9491a1b51e6319c9a22904 (diff)
downloadworld-incarceration-623ae07ebacb9d596b225179727dc87641ad1cca.tar.gz
world-incarceration-623ae07ebacb9d596b225179727dc87641ad1cca.tar.bz2
world-incarceration-623ae07ebacb9d596b225179727dc87641ad1cca.zip
phase 2-6: complete D3/TopoJSON migration
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.
Diffstat (limited to 'assets/js/map/tooltip.js')
-rw-r--r--assets/js/map/tooltip.js32
1 files changed, 29 insertions, 3 deletions
diff --git a/assets/js/map/tooltip.js b/assets/js/map/tooltip.js
index c8f112a..c74418b 100644
--- a/assets/js/map/tooltip.js
+++ b/assets/js/map/tooltip.js
@@ -1,3 +1,29 @@
-// Phase 3: hover tooltip
-export function initTooltip() {}
-export function attachTooltip(selection, getContent) {}
+import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
+
+let tooltip;
+
+export function initTooltip() {
+ tooltip = d3.select("body")
+ .append("div")
+ .attr("class", "map-tooltip");
+}
+
+export function attachTooltip(selection, getContent) {
+ selection
+ .on("mouseover", (event, d) => {
+ const content = getContent(event, d);
+ if (content) {
+ tooltip.style("opacity", 1).html(content);
+ } else {
+ tooltip.style("opacity", 0);
+ }
+ })
+ .on("mousemove", (event) => {
+ tooltip
+ .style("left", (event.pageX + 12) + "px")
+ .style("top", (event.pageY - 28) + "px");
+ })
+ .on("mouseout", () => {
+ tooltip.style("opacity", 0);
+ });
+}