diff options
| author | Christian Cleberg <[email protected]> | 2026-04-17 19:41:31 -0500 |
|---|---|---|
| committer | Christian Cleberg <[email protected]> | 2026-04-17 19:41:31 -0500 |
| commit | 623ae07ebacb9d596b225179727dc87641ad1cca (patch) | |
| tree | f1045282b3369bf3f4b0249cd649b47a5d010dad /assets/js/map/tooltip.js | |
| parent | fd412c5197286518ff9491a1b51e6319c9a22904 (diff) | |
| download | world-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.js | 32 |
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); + }); +} |
