2f:Ta94,chart = { // conteneur const container = d3.create("div") .style("position", "relative") .style("width", `${width}px`) .style("height", `${height}px`); const svg = container.append("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); const g = svg.append("g"); // tooltip HTML const tooltip = container.append("div") .style("background-color", "#fff") .style("padding", ".5em") .style("opacity", "0.9") .style("position", "absolute") .style("display", "none") .style("pointer-events", "none") .style("box-shadow", "0 2px 4px rgba(0,0,0,0.2)"); // On dessine les départements const paths = g.selectAll("path") .data(enrichedDepartements.features) .join("path") .attr("d", path) .attr("fill", d => { const value = d.properties.hosp; return value >= 0 ? colorScale(value) : "#e0e0e0"; // Couleur donnée à un département en fonction de hosp }) .attr("stroke", "white") .attr("stroke-width", 1) .style("cursor", "pointer") // Fonction lorsque l'on passe la souris sur un département .on("mousemove", function(event, d) { d3.select(this) .attr("stroke", "#333") .attr("stroke-width", 2); const nom = d.properties.nom || "Inconnu"; const code = d.properties.code || "??"; const hosp = d.properties.hosp || 0; const rea = d.properties.rea || 0; const dc = d.properties.dc || 0; const rad = d.properties.rad || 0; // Affichage du tooltip HTML tooltip .style("display", "block") .style("left", (event.offsetX + 15) + "px") .style("top", (event.offsetY - 35) + "px") .html(` ${nom} (${code})
Hospitalisations: ${hosp}
Réanimation: ${rea}
Décès cumulés: ${dc}
Retours cumulés: ${rad} `); }) .on("mouseout", function() { d3.select(this) .attr("stroke", "white") .attr("stroke-width", 1); // Cacher le tooltip lorsque le souris sors de la carte tooltip.style("display", "none"); }); // On ajoute les numéros des départements g.selectAll("text") .data(enrichedDepartements.features) .join("text") .attr("transform", d => { const centroid = path.centroid(d); return `translate(${centroid[0]}, ${centroid[1]})`; }) .attr("text-anchor", "middle") .attr("font-size", "9px") .attr("font-weight", "bold") .attr("fill", "#333") .attr("pointer-events", "none") .text(d => d.properties.code); return container.node(); }30:T5b5,legend = { const legendWidth = 300; const legendHeight = 50; const svg = d3.create("svg") .attr("width", legendWidth + 100) .attr("height", legendHeight + 40) .style("display", "block") .style("margin", "20px auto"); // Titre svg.append("text") .attr("x", (legendWidth + 100) / 2) .attr("y", 15) .attr("text-anchor", "middle") .attr("font-weight", "bold") .attr("font-size", "14px") .text("Nombre d'hospitalisations"); // Gradient const defs = svg.append("defs"); const gradient = defs.append("linearGradient") .attr("id", "legend-gradient-dynamic"); const numStops = 10; for (let i = 0; i <= numStops; i++) { const t = i / numStops; gradient.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", colorScale(colorDomain[0] + t * (colorDomain[1] - colorDomain[0]))); } svg.append("rect") .attr("x", 50) .attr("y", 25) .attr("width", legendWidth) .attr("height", 20) .style("fill", "url(#legend-gradient-dynamic)") .attr("stroke", "#ccc") .attr("stroke-width", 1); svg.append("text") .attr("x", 50) .attr("y", 60) .attr("text-anchor", "start") .attr("font-size", "12px") .text(Math.round(colorDomain[0])); svg.append("text") .attr("x", 350) .attr("y", 60) .attr("text-anchor", "end") .attr("font-size", "12px") .text(Math.round(colorDomain[1])); return svg.node(); }31:[{"id":"1dece9866001398baa4b80cbc1a2d090e83bb2c578c0f2bfb8781e741fd99c9dbb64e94409b2a05d19471c696e55c9d226e9f88fc40ec8de8af0e855a8348f9c","href":"https://static.observableusercontent.com/files/1dece9866001398baa4b80cbc1a2d090e83bb2c578c0f2bfb8781e741fd99c9dbb64e94409b2a05d19471c696e55c9d226e9f88fc40ec8de8af0e855a8348f9c","name":"covid-06-11-2021.csv","type":"text/csv","lastModified":1770025961494.283,"size":2934101},{"id":"8d7e045d3af310f34c00c38b0826876c4ae8ca5b3425d90497be23101a6b8c95cdc414b535c9ccf3dcf5766bd6f0f562991f4be6c7057c19221061e9d2e9b6c2","href":"https://static.observableusercontent.com/files/8d7e045d3af310f34c00c38b0826876c4ae8ca5b3425d90497be23101a6b8c95cdc414b535c9ccf3dcf5766bd6f0f562991f4be6c7057c19221061e9d2e9b6c2","name":"departements-version-simplifiee.geojson","type":"application/geo+json","lastModified":1770024509045.023,"size":569299}] 2d:{"title":"TP4","cells":[{"id":0,"value":"# TP4 ","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"\n\n \n \n \n\n\n\n