Drag Event

<!DOCTYPE html>
<meta charset='utf-8'>
<title>US Counties</title>
<svg width="1200" height="2000" fill="none" stroke="#000" stroke-linejoin="round" stroke-linecap="round"></svg>
<style>

.tooltip {
  position: absolute;
  visibility: visible;
  background-color: #aaa;
  padding: 5px;
}

/* This style is used when dragging the dot */
.active {
  stroke: #000;
  stroke-width: 2px;
}  
 
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/topojson-client@3"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script>

d3.queue()
    .defer(d3.json,"https://unpkg.com/us-atlas@1/us/10m.json")
    .defer(d3.csv, filename)
    .await(ready);
function ready(error, us, csv) {
  if (error) throw error;
 
  console.log('here is one of the csv data rows:', csv[0]);
  // Get the data for one year -- reformat the string value into a number
  var data = d3.map();
  csv.forEach(function(d) { data.set(d.id, +d.rate2016.replace(',','')); });
  console.log('here is how the data map works', data.get(27069));
  var counties = topojson.feature(us, us.objects.counties).features;
  // Inspect one of the county features in the developer console.
  // The "id" attribute is a 5-digit GEOID (state + county).
  // See: https://www.census.gov/geo/reference/geoidentifiers.html
  console.log('here is a county:', counties[0]);
  layer1.selectAll('path.county')
      .data( counties )
    .enter().append("path")
      .attr("d", path)
      .attr("stroke", "#aaa")
      .attr("stroke-width", 0.5)
      .attr("fill", function(d) { return color(data.get(d.id)); });
 
  layer1.append("path")
      .attr("stroke", "#aaa")
      .attr("stroke-width", 0.5)
      .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })));
  layer1.append("path")
      .attr("d", path(topojson.feature(us, us.objects.nation)));
 
}
  
  // NEW: The following 3 functions define what happens during drag events
// See https://bl.ocks.org/mbostock/22994cc97fefaeede0d861e6815a847e for a simpler d3-drag demo
function dragstarted(d) {
  // Highlight the circle that's being dragged
  d3.select(this).classed("active", true);
  // Make the tooltip visible during drag events
  tooltip.style("visibility", "visible");
}

function dragged(d) {
  // Reposition the circle to follow the mouse during drag
  d3.select(this).attr("cx", d3.event.x).attr("cy", d3.event.y);

// Reposition the tooltip too
  tooltip.style("left", (d3.event.x - 30) + "px").style("top", (d3.event.y - 50) + "px");

// Add the name of the state to the tooltip
  layer2.selectAll('path')
      .filter(function(d) { return d3.geoContains(d, projection.invert([d3.event.x, d3.event.y])) })
      .each(function(d) { tooltip.html(d.properties.name); })
}

function dragended(d) {
  // Eliminate the highlight when dragging ends
  d3.select(this).classed("active", false);
  // Hide the tooltip
  tooltip.style("visibility", "hidden");
}
</script>

https://d3js.org/d3.v4.min.js

https://unpkg.com/topojson-client@3

https://d3js.org/d3-scale-chromatic.v1.min.js