From 1ed322013df128fc432af8978ae600119c153677 Mon Sep 17 00:00:00 2001
From: James Trimble <jtrim.ons@gmail.com>
Date: Wed, 5 Jul 2023 11:30:42 +0100
Subject: [PATCH 1/2] Highlight the closest line to the mouse (roughly)

---
 all-templates/bump-chart/index.html | 92 +++++++++++++++++++----------
 1 file changed, 61 insertions(+), 31 deletions(-)

diff --git a/all-templates/bump-chart/index.html b/all-templates/bump-chart/index.html
index 4c47d20..118dfec 100755
--- a/all-templates/bump-chart/index.html
+++ b/all-templates/bump-chart/index.html
@@ -17,8 +17,10 @@
   <link rel="stylesheet" href="../lib-sc/bootstrap-grid.css" />
 
   <style type="text/css">
-    .voronoi path {
-      fill: none;
+    svg#chart * {
+      pointer-events: none;
+    }
+    svg#chart {
       pointer-events: all;
     }
 
@@ -211,16 +213,18 @@ <h5 id="source"></h5>
         })
       })
       console.log(voronoiData)
-      var svg = d3.select('#graphic').append('svg')
+      var svgElement = d3.select('#graphic').append('svg')
         .attr("id", "chart")
         .style("background-color", "#fff")
         .attr("width", chart_width + margin.left + margin.right)
         .attr("height", height + margin.top + margin.bottom)
+
+      var svg = svgElement
         .append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
 
-      svg.append("rect")
+        svg.append("rect")
         .style("fill", "#fff")
         .attr("width", chart_width)
         .attr("height", height);
@@ -257,6 +261,25 @@ <h5 id="source"></h5>
        .html(dvc.essential.yAxisBreakText)
     }
 
+    var lineEntries = d3.entries(lines);
+    var lineSegmentData = [];
+    for (var i=0; i<lineEntries[0].value.length-1; i++) {
+      var group = {
+        xStart: x(lineEntries[0].value[i].date),
+        xEnd: x(lineEntries[0].value[i + 1].date),
+        lineSegments: []
+      };
+      for (var j=0; j<lineEntries.length; j++) {
+        var entry = lineEntries[j].value;
+        group.lineSegments.push({
+          yStart: y(lineEntries[j].value[i].rank),
+          yEnd: y(lineEntries[j].value[i + 1].rank),
+          key: lineEntries[j].key
+        })
+      }
+      lineSegmentData.push(group);
+    }
+
       //create lines
       svg.append('g').selectAll('path')
         .data(d3.entries(lines))
@@ -348,38 +371,45 @@ <h5 id="source"></h5>
         .text("Country")
 
 
-      //voronoi stuff
-  	  var voronoi = d3.voronoi()
-  	    .x(function(d) {
-  	      return x(d.date);
-  	    })
-  	    .y(function(d) {
-  	      return y(+d.rank);
-  	    })
-  	    .extent([
-  	      [-margin.left, -10],
-  	      [chart_width + margin.right, height + margin.bottom]
-  	    ]);
-
-        var voronoiGroup = svg.append("g")
-    	    .attr("class", "voronoi");
-
-        voronoiGroup.selectAll("path")
-    	    .data(voronoi.polygons(voronoiData))
-    	    .enter().append("path")
-    	    .attr("d", function(d) {
-    	      return d ? "M" + d.join("L") + "Z" : null;
-    	    })
-    	    .on("mouseover", mouseover)
+        svgElement
+          .on("mouseenter", mousemove)
+          .on("mousemove", mousemove)
     	    .on("mouseout", mouseout);
 
-        function mouseover(d, i) {
-          d3.selectAll(".fadeThis").attr('opacity',0.2)
-          d3.selectAll("."+d.data.name.replace(/\s/g, '')).attr('opacity',1)
+        var currentlyHighlighted = null;
+        function mousemove(d) {
+          var coords = d3.mouse( svg.node() );
+          if (coords[0] < lineSegmentData[0].xStart) {
+            coords[0] = lineSegmentData[0].xStart;
+          } else if (coords[0] > lineSegmentData[lineSegmentData.length-1].xEnd) {
+            coords[0] = lineSegmentData[lineSegmentData.length-1].xEnd;
+          }
+          var groupIndex = 0;
+          while(coords[0] > lineSegmentData[groupIndex].xEnd) {
+            ++groupIndex;
+          }
+          var group = lineSegmentData[groupIndex];
+          var bestKey = null;
+          var bestYDistance = Infinity;
+          for (var lineSegment of group.lineSegments) {
+            var yPos = lineSegment.yStart +
+              (lineSegment.yEnd - lineSegment.yStart) * (coords[0] - group.xStart) / (group.xEnd - group.xStart);
+            var yDistance = Math.abs(yPos - coords[1]);
+            if (yDistance < bestYDistance) {
+              bestYDistance = yDistance;
+              bestKey = lineSegment.key;
+            }
+          }
+          if (currentlyHighlighted !== bestKey) {
+            currentlyHighlighted = bestKey;
+            d3.selectAll(".fadeThis").attr('opacity',0.2)
+            d3.selectAll("."+bestKey.replace(/\s/g, '')).attr('opacity',1)
+          }
         }
 
-        function mouseout(d, i) {
+        function mouseout(d) {
           d3.selectAll(".fadeThis").attr('opacity',1)
+          currentlyHighlighted = null;
         }
 
       d3.select(".x.axis path.domain").remove()

From 9486d55f6cce199d24d6d54b87788933dc28fd03 Mon Sep 17 00:00:00 2001
From: James Trimble <jtrim.ons@gmail.com>
Date: Thu, 13 Jul 2023 11:45:44 +0100
Subject: [PATCH 2/2] Tidy up mousemove code a little

---
 all-templates/bump-chart/index.html | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/all-templates/bump-chart/index.html b/all-templates/bump-chart/index.html
index 118dfec..16543a1 100755
--- a/all-templates/bump-chart/index.html
+++ b/all-templates/bump-chart/index.html
@@ -372,9 +372,8 @@ <h5 id="source"></h5>
 
 
         svgElement
-          .on("mouseenter", mousemove)
           .on("mousemove", mousemove)
-    	    .on("mouseout", mouseout);
+          .on("mouseout", mouseout);
 
         var currentlyHighlighted = null;
         function mousemove(d) {
@@ -391,9 +390,12 @@ <h5 id="source"></h5>
           var group = lineSegmentData[groupIndex];
           var bestKey = null;
           var bestYDistance = Infinity;
+          // xProportion is the horizontal distance from the start of a segment to
+          // the mouse position, as a proportion of the width of a segment
+          var xProportion = (coords[0] - group.xStart) / (group.xEnd - group.xStart);
           for (var lineSegment of group.lineSegments) {
-            var yPos = lineSegment.yStart +
-              (lineSegment.yEnd - lineSegment.yStart) * (coords[0] - group.xStart) / (group.xEnd - group.xStart);
+            var segmentHeight = lineSegment.yEnd - lineSegment.yStart;
+            var yPos = lineSegment.yStart + segmentHeight * xProportion;
             var yDistance = Math.abs(yPos - coords[1]);
             if (yDistance < bestYDistance) {
               bestYDistance = yDistance;