{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("max-width", "100%");
const countries = world.features;
svg.append("g")
.selectAll("path")
.data(countries)
.join("path")
.attr("d", path)
.attr("fill", d => {
const datos = byName.get(d.properties.name)
return datos ? color(datos.neto) : "#ddd"
})
.attr("stroke", "#999")
.attr("stroke-width", 0.3)
.on("mousemove", (event, d) => {
const nombre = d.properties.name
const datos = byName.get(nombre);
if(!datos) return;
const idx = idxByName.get(nombre);
console.log(vecinosIdx)
const vecinosNom = vecinosIdx[idx].map(j => world.features[j].properties.name);
const vecinosContraste = vecinosNom
.map(n => ({nombre: n, info: byName.get(n)}))
.filter(v => v.info && Math.sign(v.info.neto) != Math.sign(datos?.neto))
const fila = v => `
<tr>
<td>${v.nombre}</td>
<td style="text-align:right">${format(v.info.donated)}</td>
<td style="text-align:right">${format(v.info.received)}</td>
<td style="text-align:center">${v.info.neto>0?"Donante":"Receptor"}</td>
</tr>`; // Esta es una variable que guarda una etiqueta HTML para la tabla
tooltip2
.style("left", (event.pageX + 10) + "px")
.style("top", (event.pageY + 10) + "px")
.style("display", "block")
.html(`
<b>${nombre}</b><br/>
Donado: ${datos ? format(datos.donated) : "n/a"}<br/>
Recibido: ${datos ? format(datos.received) : "n/a"}<br/>
Neto: ${datos ? format(datos.neto) : "n/a"}<br/>
<b>Vecinos con signo opuesto</b><br/>
<table style="border-collapse:collapse;font-size:11px;">
<thead>
<tr>
<th>País</th>
<th>Donado</th>
<th>Recibido</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
${vecinosContraste.length
? vecinosContraste.map(fila).join("")
: "<tr><td colspan='4'>(ninguno)</td></tr>"}
</tbody>
</table>
`);
d3.selectAll("path")
.attr("stroke-width", p =>
vecinosContraste.some(v => v.nombre === p.properties.name) ? 1.2 : 0.3)
.attr("stroke", p =>
vecinosContraste.some(v => v.nombre === p.properties.name) ? "#000" : "#999");
}).on("mouseout", () => {
tooltip2.style("display", "none")
d3.selectAll("path")
.attr("stroke-width", 0.3)
.attr("stroke", "#999")
})
return svg.node()
}