carte = { var depts = [ {code: "77", nom: "Seine-et-Marne"}, {code: "63", nom: "Puy-de-Dôme"}, {code: "69", nom: "Rhône"}, {code: "43", nom: "Haute-Loire"} ]; var cols = 2, cellW = 450, cellH = 420; var width = cols * cellW; var height = Math.ceil(depts.length / cols) * cellH + 80; var svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "#fafafa"); var values = data.map(function(d) { return d[indicateur]; }).filter(function(d) { return d != null && !isNaN(d); }); var vMin = d3.min(values); var vMax = d3.max(values); var palette = indicateur === "pct_cereales" ? d3.interpolateRdYlGn : d3.interpolateYlGn; var colorScale = d3.scaleSequential(palette) .domain(indicateur === "pct_cereales" ? [vMax, vMin] : [vMin, vMax]); var titres = { "indice_shannon": "Indice de diversité de Shannon", "pct_cereales": "Part des céréales (%)", "surface_moy_parcelle_ha": "Surface moyenne des parcelles (ha)", "nb_cultures": "Nombre de cultures distinctes" }; svg.append("text") .attr("x", width / 2).attr("y", 28) .attr("text-anchor", "middle") .style("font-size", "17px").style("font-weight", "bold") .text(titres[indicateur]); var tooltip = d3.select("body").append("div") .style("position", "absolute") .style("background", "white") .style("border", "1px solid #aaa") .style("border-radius", "6px") .style("padding", "10px 14px") .style("font-size", "13px") .style("line-height", "1.5") .style("pointer-events", "none") .style("opacity", 0) .style("box-shadow", "0 4px 12px rgba(0,0,0,0.15)"); depts.forEach(function(dept, i) { var col = i % cols; var row = Math.floor(i / cols); var ox = col * cellW; var oy = row * cellH + 50; var features = communes.features.filter(function(f) { return f.properties.code && f.properties.code.startsWith(dept.code); }); if (features.length === 0) return; var deptGeo = {type: "FeatureCollection", features: features}; // La carte commence 35px plus bas pour laisser la place au nom var mapTop = 35; var projection = d3.geoMercator().fitSize([cellW - 40, cellH - mapTop - 20], deptGeo); var path = d3.geoPath().projection(projection); var g = svg.append("g").attr("transform", "translate(" + ox + "," + oy + ")"); // D'abord les communes (en dessous) g.selectAll("path") .data(features) .join("path") .attr("transform", "translate(0," + mapTop + ")") .attr("d", path) .attr("fill", function(d) { var code = String(d.properties.code).padStart(5, "0"); var info = dataMap.get(code); return info && info[indicateur] != null ? colorScale(info[indicateur]) : "#ddd"; }) .attr("stroke", "#fff") .attr("stroke-width", 0.4) .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this).attr("stroke", "#333").attr("stroke-width", 2).raise(); var code = String(d.properties.code).padStart(5, "0"); var info = dataMap.get(code); tooltip.transition().duration(150).style("opacity", 1); tooltip.html( "" + d.properties.nom + "
" + "Shannon : " + (info ? info.indice_shannon : "—") + "
" + "Céréales : " + (info ? info.pct_cereales + "%" : "—") + "
" + "Cultures : " + (info ? info.nb_cultures : "—") + "
" + "Parcelle moy. : " + (info ? info.surface_moy_parcelle_ha + " ha" : "—") + "
" + "Groupe dom. : " + (info ? info.groupe_dominant : "—") ) .style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 40) + "px"); }) .on("mousemove", function(event) { tooltip.style("left", (event.pageX + 15) + "px") .style("top", (event.pageY - 40) + "px"); }) .on("mouseout", function() { d3.select(this).attr("stroke", "#fff").attr("stroke-width", 0.4); tooltip.transition().duration(200).style("opacity", 0); }) .on("click", function(event, d) { svg.selectAll("path") .attr("stroke", "#fff").attr("stroke-width", 0.4); d3.select(this).attr("stroke", "red").attr("stroke-width", 3); mutable selectedCommune = String(d.properties.code).padStart(5, "0"); }); // Contour du département (par-dessus les communes) g.append("path") .datum(deptGeo) .attr("transform", "translate(0," + mapTop + ")") .attr("d", d3.geoPath().projection(projection)) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 1.5); // Nom du département EN DERNIER (toujours visible, fond blanc) g.append("rect") .attr("x", cellW / 2 - 80).attr("y", 0) .attr("width", 160).attr("height", 22) .attr("rx", 4) .attr("fill", "white") .attr("opacity", 0.9); g.append("text") .attr("x", cellW / 2).attr("y", 16) .attr("text-anchor", "middle") .style("font-size", "14px").style("font-weight", "700") .style("fill", "#333") .text(dept.nom + " (" + dept.code + ")"); }); // Légende var lw = 200, lh = 14; var lx = width - lw - 30, ly = height - 35; var defs = svg.append("defs"); var grad = defs.append("linearGradient").attr("id", "leg-grad"); for (var j = 0; j <= 10; j++) { var t = j / 10; grad.append("stop") .attr("offset", (t * 100) + "%") .attr("stop-color", colorScale(vMin + t * (vMax - vMin))); } svg.append("rect").attr("x", lx).attr("y", ly) .attr("width", lw).attr("height", lh).attr("rx", 3) .style("fill", "url(#leg-grad)"); svg.append("text").attr("x", lx).attr("y", ly - 6) .style("font-size", "11px").text(vMin.toFixed(1)); svg.append("text").attr("x", lx + lw).attr("y", ly - 6) .attr("text-anchor", "end").style("font-size", "11px") .text(vMax.toFixed(1)); return svg.node(); }