score:1

Since you're using a set...

metrics.set(d.county_fips, +d.actual_margin);

... you have to retrieve the value with a get:

.html("The value is " + metrics.get(d.id));

Also, notice that you have to pass the datum d to the mouseover event:

.on('mouseover', function(d) { 
//datum here -------------^

Here is your code with those changes:

<style>
  .counties {
    fill: white;
    stroke: #7887AB;
    stroke-width: .5px;
  }
  
  .county-borders {
    fill: none;
    stroke: #F0F8FF;
    stroke-width: .2px;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
  }
  
  .state-borders {
    fill: none;
    stroke: #162955;
    opacity: .8;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
  }
  
  .toolTip {
    position: absolute;
    min-width: 80px;
    height: auto;
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #6F257F;
    padding: 14px;
    text-align: center;
  }

</style>

<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
  var svg = d3.select("svg");
  var path = d3.geoPath();
  var tooltip = d3.select("body").append("div").attr("class", "toolTip");
  var metrics = d3.map();

  d3.queue()
    .defer(d3.json, "https://d3js.org/us-10m.v1.json")
    .defer(d3.csv, "https://raw.githubusercontent.com/MatthewSnellOKC/mapping/master/merge/countymetrics_json.csv", function(d) {
      metrics.set(d.county_fips, +d.actual_margin);
    })
    .await(ready);

  function ready(error, us) {
    if (error) throw error;

    svg.append("g")
      .attr("class", "counties")
      .selectAll("path")
      .data(topojson.feature(us, us.objects.counties).features)
      .enter()
      .append("path")
      .attr("d", path);

    svg.append("g")
      .attr("class", "state-borders")
      .selectAll("path")
      .data(topojson.feature(us, us.objects.nation).features)
      .enter()
      .append("path")
      .attr("d", path);
    svg.append("path")
      .attr("class", "state-borders")
      .attr("d", path(topojson.mesh(us, us.objects.nation, function(a, b) {
        return a !== b;
      })));
    svg.append("path")
      .attr("class", "state-borders")
      .attr("d", path(topojson.mesh(us, us.objects.states, function(a, b) {
        return a !== b;
      })));
    svg.append("path")
      .attr("class", "county-borders")
      .attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) {
        return a !== b;
      })));


    svg.selectAll('path')
      .on('mouseover', function(d) {
        tooltip
          .style("left", d3.event.pageX + 20 + "px")
          .style("top", d3.event.pageY + "px")
          .style("display", "inline-block")
          .html("The value is " + metrics.get(d.id)); 
      })
      .on('mouseout', function(d) {
        tooltip.style("display", "none");
      });
  }

</script>


Related Query

More Query from same tag