chart2 = { // Initialisation des dimensions et chargement des données géographiques const width = 800; const height = 700; const regions = await d3.json("https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/regions.geojson"); // Variable d'état pour suivre la région sélectionnée par l'utilisateur let selectedRegionName = null; // Définition d'une palette de couleurs fixe pour les différentes essences de bois const essenceNames = ["Chêne", "Hêtre", "Peuplier", "Autres feuillus", "Sapin - épicéa", "Douglas", "Pin maritime", "Autres conifères"]; const essenceColorScale = d3.scaleOrdinal() .domain(essenceNames) .range(d3.schemeTableau10); // Création de la structure HTML principale avec un conteneur flexible const container = d3.create("div") .style("display", "flex") .style("position", "relative") .style("font-family", "sans-serif"); // Création de l'espace pour la carte à gauche const mapContainer = container.append("div") .style("flex", "1"); const svg = mapContainer.append("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%"); // Création du panneau coulissant pour les détails à droite const sidePanel = container.append("div") .style("width", "0px") .style("opacity", "0") .style("overflow-y", "auto") .style("background", "#fff") .style("border-left", "1px solid #ddd") .style("transition", "all 0.3s") .style("padding", "0px") .style("box-shadow", "-5px 0 15px rgba(0,0,0,0.05)"); const defs = svg.append("defs"); // Calcul des superficies réelles des régions en kilomètres carrés // On utilise le rayon moyen de la terre au carré pour la conversion const R2 = 6371 * 6371; const regionAreas = new Map(regions.features.map(f => [f.properties.nom, d3.geoArea(f) * R2])); // Calcul des valeurs extrêmes de densité pour normaliser les couleurs de la carte const maxDensity = d3.max(dataRegion, d => { const area = regionAreas.get(d.Regions); return (typeof d.Total === 'number' && area) ? (d.Total / area) : 0; }); const minDensity = d3.min(dataRegion, d => { const area = regionAreas.get(d.Regions); return (typeof d.Total === 'number' && area) ? (d.Total / area) : 0; }); // Échelle séquentielle pour représenter la densité d'établissements const colorScale = d3.scaleSequential(d3.interpolateBlues).domain([minDensity, maxDensity]); // Création d'un motif de hachures pour identifier les zones sans données ou secrètes const hatchPattern = defs.append("pattern") .attr("id", "hatch-pattern") .attr("width", 8).attr("height", 8) .attr("patternUnits", "userSpaceOnUse") .attr("patternTransform", "rotate(45)"); hatchPattern.append("rect").attr("width", 8).attr("height", 8).attr("fill", "#f5f5f5"); hatchPattern.append("line").attr("x2", 0).attr("y2", 8).attr("stroke", "#ccc").attr("stroke-width", 1.5); // Définition du dégradé linéaire utilisé pour la barre de légende const linearGradient = defs.append("linearGradient").attr("id", "map-gradient-blue"); linearGradient.selectAll("stop").data(d3.range(0, 1.1, 0.1)).join("stop") .attr("offset", d => `${d * 100}%`).attr("stop-color", d => d3.interpolateBlues(d)); // Construction de la légende visuelle en bas à gauche de la carte const legendWidth = 200; const legendGroup = svg.append("g").attr("transform", `translate(50, ${height - 60})`); legendGroup.append("rect").attr("width", legendWidth).attr("height", 10).style("fill", "url(#map-gradient-blue)"); legendGroup.append("text").attr("y", -5).style("font-size", "10px").style("font-weight", "bold").text("Établissements / km²"); legendGroup.append("text").attr("y", 22).style("font-size", "10px").text("0"); legendGroup.append("text").attr("x", legendWidth).attr("y", 22).attr("text-anchor", "end").style("font-size", "10px").text(d3.format(".3f")(maxDensity)); const hatchLegend = legendGroup.append("g").attr("transform", `translate(${legendWidth + 30}, 0)`); hatchLegend.append("rect").attr("width", 15).attr("height", 10).style("fill", "url(#hatch-pattern)").style("stroke", "#ccc"); hatchLegend.append("text").attr("x", 20).attr("y", 9).style("font-size", "10px").text("Données N.D. / Secret"); // Fonction pour générer le graphique circulaire de la production par essence const createSpeciesChart = (regionName) => { const prod = dataSciages.find(d => d.Production === regionName); const species = prod ? [ { name: "Chêne", val: cleanValue(prod["Chêne"]) }, { name: "Hêtre", val: cleanValue(prod["Hêtre"]) }, { name: "Peuplier", val: cleanValue(prod["Peuplier"]) }, { name: "Autres feuillus", val: cleanValue(prod["Autres feuillus"]) }, { name: "Sapin - épicéa", val: cleanValue(prod["Sapin - épicéa"]) }, { name: "Douglas", val: cleanValue(prod["Douglas"]) }, { name: "Pin maritime", val: cleanValue(prod["Pin maritime"]) }, { name: "Autres conifères", val: cleanValue(prod["Autres conifères"]) } ].filter(d => d.val > 0).sort((a,b) => b.val - a.val) : []; const totalProd = d3.sum(species, d => d.val); const w = 400, h = 220, radius = Math.min(w, h) / 2 - 10; // Gestion de l'affichage si aucune donnée de production n'est disponible if (!prod || totalProd === 0) { const sSvg = d3.create("svg").attr("viewBox", [0, 0, w, h]).attr("style", "width: 100%; height: auto;"); const g = sSvg.append("g").attr("transform", `translate(${h / 2}, ${h / 2})`); const arcEmpty = d3.arc().innerRadius(radius * 0.65).outerRadius(radius).startAngle(0).endAngle(2 * Math.PI); g.append("path").attr("d", arcEmpty).attr("fill", "#eee"); g.append("text").attr("text-anchor", "middle").attr("dy", "0.35em").style("font-weight", "bold").style("font-size", "13px").style("fill", "#999").text("Données secrètes"); return sSvg.node(); } const arc = d3.arc().innerRadius(radius * 0.65).outerRadius(radius); const pie = d3.pie().value(d => d.val).sort(null); const sSvg = d3.create("svg").attr("viewBox", [0, 0, w, h]).attr("style", "width: 100%; height: auto;"); const gDonut = sSvg.append("g").attr("transform", `translate(${h / 2}, ${h / 2})`); const slices = gDonut.selectAll("path").data(pie(species)).join("path") .attr("fill", d => essenceColorScale(d.data.name)).attr("d", arc).attr("stroke", "white").attr("stroke-width", 1.5).style("transition", "opacity 0.2s"); const center = gDonut.append("text").attr("text-anchor", "middle").attr("dy", "-0.2em"); const valText = center.append("tspan").attr("x", 0).attr("font-weight", "bold").attr("font-size", "16px").attr("fill", "#333"); const labelText = center.append("tspan").attr("x", 0).attr("dy", "1.4em").attr("font-size", "11px").attr("fill", "#666"); const resetCenter = () => { valText.text(`${d3.format(",.0f")(totalProd).replace(/,/g, ' ')}`); labelText.text("m³ sciés"); slices.style("opacity", 1); }; resetCenter(); const gLegend = sSvg.append("g").attr("transform", `translate(${h + 30}, 25)`); species.forEach((d, i) => { const legRow = gLegend.append("g") .attr("transform", `translate(0, ${i * 22})`) .style("cursor", "pointer") .on("mouseover", function() { const pct = ((d.val / totalProd) * 100).toFixed(1); valText.text(`${d3.format(",.0f")(d.val).replace(/,/g, ' ')} m³`); labelText.text(`${d.name} (${pct}%)`).style("fill", essenceColorScale(d.name)).style("font-weight", "bold"); slices.style("opacity", s => s.data.name === d.name ? 1 : 0.3); }) .on("mouseout", resetCenter); legRow.append("rect").attr("width", 16).attr("height", 16).attr("rx", 2).attr("fill", essenceColorScale(d.name)); legRow.append("text").attr("x", 25).attr("y", 12).style("font-size", "11px").style("fill", "#444").text(d.name); }); return sSvg.node(); }; // Fonction pour générer le graphique circulaire des types d'entreprises const createDonutChart = (data) => { const keys = ["Nombre d'exploitations forestières sans scierie", "Nombre de scieries sans exploitation forestière", "Nombre d'exploitations forestières avec scieries"]; const plotData = keys.map(k => ({ label: k, shortLabel: k.replace("Nombre d'", "").replace("forestières ", ""), value: typeof data[k] === 'number' ? data[k] : 0, color: k.includes("avec scieries") ? "#3fb6e8" : (k.includes("sans scierie") ? "#2e7d32" : "#6d4c41") })); const total = d3.sum(plotData, d => d.value); const size = 160, radius = size / 2 - 5; const donutSvg = d3.create("svg").attr("width", size).attr("height", size); const g = donutSvg.append("g").attr("transform", `translate(${size/2}, ${size/2})`); const arc = d3.arc().innerRadius(radius * 0.60).outerRadius(radius); const pie = d3.pie().value(d => d.value || 0.0001).sort(null); g.selectAll("path").data(pie(plotData)).join("path").attr("d", arc).attr("fill", d => d.data.value === 0 ? "#eee" : d.data.color).attr("stroke", "white").attr("stroke-width", 2); g.selectAll("text.pct").data(pie(plotData.filter(d => d.value > 0))).join("text").attr("transform", d => `translate(${arc.centroid(d)})`).attr("text-anchor", "middle").style("fill", "white").style("font-size", "10px").style("font-weight", "bold").text(d => (d.data.value/total*100) >= 8 ? `${(d.data.value/total*100).toFixed(0)}%` : ""); g.append("text").attr("text-anchor", "middle").attr("dy", "0.3em").style("font-weight", "bold").style("font-size", "10px").style("fill", "#555").text("ENTREPRISES"); return { node: donutSvg.node(), data: plotData }; }; // Mise en place de la projection cartographique et dessin des frontières régionales const projection = d3.geoConicConformal().center([2.45, 46.27]).scale(3000).translate([width / 2, height / 2]); const path = d3.geoPath().projection(projection); const mapPaths = svg.append("g").selectAll("path").data(regions.features).join("path").attr("d", path).attr("cursor", "pointer") .attr("fill", d => { const rData = dataRegion.find(r => r.Regions === d.properties.nom); const area = regionAreas.get(d.properties.nom); if (!rData || rData.Total === "s" || rData.Total === "nd" || !area) return "url(#hatch-pattern)"; return colorScale(rData.Total / area); }) .attr("stroke", d => d.properties.nom === selectedRegionName ? "#3fb6e8" : "#084594") .attr("stroke-width", d => d.properties.nom === selectedRegionName ? 4 : 1) .on("click", function(event, d) { const name = d.properties.nom; if (selectedRegionName === name) { selectedRegionName = null; sidePanel.style("width", "0px").style("opacity", "0"); } else { selectedRegionName = name; openSidebar(name, dataRegion.find(r => r.Regions === name)); } mapPaths.transition().duration(250).attr("stroke", d => d.properties.nom === selectedRegionName ? "#3fb6e8" : "#084594").attr("stroke-width", d => d.properties.nom === selectedRegionName ? 4 : 1); if (selectedRegionName) d3.select(this).raise(); }); // Fonction pour peupler et ouvrir le panneau latéral lors d'un clic sur une région function openSidebar(name, data) { sidePanel.style("width", "400px").style("opacity", "1").style("padding", "20px").style("border-left", "1px solid #ddd"); sidePanel.html(`

${name}

`); sidePanel.select("#close-side").on("click", () => { selectedRegionName = null; sidePanel.style("width", "0px").style("opacity", "0"); mapPaths.attr("stroke", "#084594").attr("stroke-width", 1); }); if (data) { sidePanel.append("h3").style("font-size", "14px").style("color", "#084594").text("STRUCTURE INDUSTRIELLE"); sidePanel.append("div").style("margin-bottom", "10px").html(`Établissements : ${data.Total === 's' ? 'Secret' : data.Total}`); const dRes = createDonutChart(data); sidePanel.append("div").style("display", "flex").style("justify-content", "center").node().appendChild(dRes.node); const legIndus = sidePanel.append("div").style("font-size", "11px").style("margin", "15px 0").style("background", "#f9f9f9").style("padding", "12px").style("border-radius", "6px"); dRes.data.forEach(item => { const row = legIndus.append("div").style("display", "flex").style("align-items", "center").style("margin-bottom", "10px"); row.append("div").style("width", "18px").style("height", "18px").style("background-color", item.color).style("border-radius", "3px").style("margin-right", "12px").style("flex-shrink", "0"); row.append("span").style("font-size", "13px").style("color", "#444").html(`${item.label} : ${item.value}`); }); sidePanel.append("hr").style("margin", "20px 0").style("border", "0").style("border-top", "1px solid #eee"); sidePanel.append("h3").style("font-size", "14px").style("color", "#084594").text("PRODUCTION PAR ESSENCE"); sidePanel.node().appendChild(createSpeciesChart(name)); } } return container.node(); }