carteBonusMetrique = { const svg = d3.create("svg") .attr("width", 960) .attr("height", 600) .attr("viewBox", [0, 0, 960, 600]) .attr("style", "max-width: 100%; height: auto;"); const g = svg.append("g"); const paths = g.selectAll("path") .data(geoDataBonus.features) .join("path") .attr("d", pathGenerator) .style("fill", d => { const value = d.properties.value; return value > 0 ? colorScaleMetric(value) : "#f5f5f5"; }) .attr("stroke", "#fff") .attr("stroke-width", 0.7) .style("cursor", "pointer"); const tooltip = d3.select("body") .selectAll(".tooltip-bonus") .data([null]) .join("div") .attr("class", "tooltip-bonus") .style("position", "absolute") .style("padding", "12px") .style("background", "rgba(0, 0, 0, 0.9)") .style("color", "#fff") .style("border-radius", "6px") .style("pointer-events", "none") .style("opacity", 0) .style("font-size", "12px") .style("font-family", "sans-serif") .style("line-height", "1.6") .style("z-index", "1000"); const metricNames = { hosp: "Hospitalisations", rea: "Réanimation", dc: "Décès", rad: "Retours à domicile" }; paths .on("mouseover", function(event, d) { d3.select(this) .attr("stroke", "#000") .attr("stroke-width", 2.5) .raise(); tooltip .style("opacity", 1) .html(`

${d.properties.nom}

${metricNames[selectedMetric]}: ${(d.properties.value || 0).toLocaleString('fr-FR')}

Hospitalisations: ${(d.properties.hosp || 0).toLocaleString('fr-FR')}
Réanimation: ${(d.properties.rea || 0).toLocaleString('fr-FR')}
Décès: ${(d.properties.dc || 0).toLocaleString('fr-FR')}
Retours domicile: ${(d.properties.rad || 0).toLocaleString('fr-FR')}

`); }) .on("mousemove", function(event) { tooltip .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function() { d3.select(this) .attr("stroke", "#fff") .attr("stroke-width", 0.7); tooltip.style("opacity", 0); }); return svg.node(); }