Estoy tratando de agregar una información sobre herramientas con datos en un mapa de coropletas. Ya aparece al pasar el mouse por encima, pero estoy atascado tratando de mostrar los datos que están en el archivo csv que usé para crear el mapa. Me gustaría mostrar el "nombre" + "pop" + "%".

Así es como cargué los datos:

 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);

Aquí está la función al pasar el mouse:

 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); }