I'm trying to add a tooltip with data on a choropleth map. It already appears on mouse over but I'm stuck trying to show the data that's in the csv file I used to create the map. I'd like to show the "name" + "pop" + "%".

Here's how I loaded the data:

d3.queue()
  .defer(d3.json, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
  .defer(d3.csv, "https://raw.githubusercontent.com/lcercos/geojson/main/eurostat_data-map.csv", function(d) { data.set(d.code, +d.pop); })
  .await(ready);

Here's the on mouse over function:

function ready(error, topo) {
  var div = d3.select("body").append("div") // calling tooltip
     .attr("class", "tooltip")
     .style("opacity", 0);

  let mouseOver = function(d) {
    d3.selectAll(".Country")
      .transition()
      .duration(100)
      .style("opacity", .5)

    d3.select(this)
      .transition()
      .duration(100)
      .style("opacity", 1)
      .style("stroke", "black");

      div.transition()
           .duration(50)
           .style("opacity", 1);
      div.html(d.name + d.value + "%") // html data <- Is here the problem?
           .style("left", (d3.event.pageX + 15) + "px")
           .style("top", (d3.event.pageY - 10) + "px");

  }

  let mouseLeave = function(d) {
    d3.selectAll(".Country")
      .transition()
      .duration(0)
      .style("opacity",)
    d3.select(this)
      .transition()
      .duration(0)
      .style("stroke", "transparent");
    div.transition()
           .duration("50")
           .style("opacity", 0);
  }