2b:null 2c:["$","title",null,{"children":"Municipales T1 | l'Humanité | Observable"}] 31:T405,villesFiltrees = { if (!recherche || recherche.trim() === '') { mutable villeRechercheSelectionnee = null; return []; } mutable villeRechercheSelectionnee = null; const normalizeString = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().replace(/[-\s]/g, ""); const search = normalizeString(recherche); const isCodePostal = /^\d+$/.test(recherche.trim()); // Dédoublonnage par code_circonscription const circosUniques = Array.from( new Map( resultatsTest.map(v => [v.code_circonscription, v]) ).values() ); return circosUniques .filter(v => { if (isCodePostal) { // Cherche les codes INSEE correspondant au code postal saisi const codesInsee = codesPostaux.get(recherche.trim()) || []; return codesInsee.includes(v.code_circonscription); } return normalizeString(v.nom_circonscription).startsWith(search); }) .sort((a, b) => Number(b.inscrits) - Number(a.inscrits)) .slice(0, 10); }32:T465,// LISTE DES SUGGESTIONS suggestionsList = { if (villeRechercheSelectionnee) return html``; if (villesFiltrees.length === 0) return html``; return html`

${villesFiltrees.map(ville => { const btn = html``; btn.onmouseenter = () => btn.style.background = '#f8f9fa'; btn.onmouseleave = () => btn.style.background = 'white'; btn.onclick = () => { mutable villeRechercheSelectionnee = ville; }; return btn; })}

`; }33:T483,nuancesCouleurs = ({ "LCOM": "#5a0000", // Communiste "LDIV": "#a8a8a8", // Divers "LDSV": "#adb5bd", // Divers sans étiquette "LDVC": "#add5f0", // Divers centre "LDVD": "#7faee5", // Divers droite "LDVG": "#f7bacf", // Divers gauche "LECO": "#2f8a57", // Ecologiste "LEXD": "#000000", // Extrême droite "LEXG": "#5a0000", // Extrême gauche "LFI": "#bf0000", // La France Insoumise "LHOR": "#5dace1", // Horizons "LLR": "#1e5aa7", // Les Républicains "LMDM": "#ff8b42", // MoDem "LREC": "#8b4513", // Reconquête "LREG": "#8d44ac", // Régionaliste "LREN": "#ffc200", // Renaissance "LRN": "#123a78", // Rassemblement National "LSOC": "#ef6291", // Socialiste "LUC": "#5dace1", // Union centre "LUD": "#3a78c1", // Union droite "LUDI": "#e57e22", // Union droite indépendants "LUDR": "#0a1f44", // Union droite républicaine "LUG": "#e43935", // Union gauche "LUXD": "#000000", // Union extrême droite "LVEC": "#06a551" // Verts/écologistes - vert })34:T192c,affichageResultatsT1 = { const commune = villeRechercheSelectionnee; if (!commune) return html`

`; const candidaturesCommune = resultatsTest.filter( c => c.code_circonscription === commune.code_circonscription ); // Grouper par liste const listesMap = new Map(); candidaturesCommune.forEach(c => { const key = c.num_liste; if (!listesMap.has(key)) { listesMap.set(key, { num_liste: c.num_liste, nom_liste: c.nom_liste, cod_nua: c.cod_nua, lib_nua: c.lib_nua, nb_voix: c.nb_voix, rapport_exprimes: c.rapport_exprimes, elu: c.elu, inscrits: c.inscrits, votants: c.votants, blancs: c.blancs, nuls: c.nuls, exprimes: c.exprimes, nom_circonscription: c.nom_circonscription, taux_depouillment: c.taux_depouillment, tour: c.tour, candidats: [] }); } listesMap.get(key).candidats.push(c); }); const listes = [...listesMap.values()].sort( (a, b) => Number(b.nb_voix) - Number(a.nb_voix) ); const stats = listes[0] || {}; const blancsNuls = (Number(stats.blancs) || 0) + (Number(stats.nuls) || 0); const taux = parseFloat((stats.taux_depouillment || "0").replace(',', '.')); const estDefinitif = taux >= 100; // Liste avec le plus de voix (pour la barre verte) const maxVoix = Math.max(...listes.map(l => Number(l.nb_voix) || 0)); const nomTour = stats.tour === "1" ? "Premier tour" : "Second tour"; const heureMAJ = new Date(now).toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" }); return html`

${stats.nom_circonscription}

${nomTour}

${estDefinitif ? '' : 'Dépouillement en cours'}

${ estDefinitif ? html`

Résultats définitifs

` : html`

${taux.toFixed(0)}%

des bureaux de vote
dépouillés à ${heureMAJ}

` }

${listes.map(liste => { const teteDeListe = liste.candidats[0]; const nomTete = teteDeListe ? `${teteDeListe.prenom_candidat} ${teteDeListe.nom_candidat}` : null; const couleur = nuancesCouleurs[liste.cod_nua] || '#ccc'; const pct = parseFloat((liste.rapport_exprimes || "0").replace(',', '.')); const voix = Number(liste.nb_voix) || 0; const estElu = liste.elu === "OUI" || liste.elu === true; const estPremier = voix === maxVoix; return html`

${nomTete ? html`

${nomTete}

` : ''}

${liste.nom_liste}

${liste.cod_nua ? html`

${liste.lib_nua || liste.cod_nua}

` : ''}

${pct.toFixed(2).replace('.', ',')} %

${voix.toLocaleString('fr-FR')} voix

`; })}

Inscrits

${Number(stats.inscrits).toLocaleString('fr-FR')}

Participation

${((Number(stats.votants) / Number(stats.inscrits)) * 100).toFixed(2).replace('.', ',')} %

Exprimés

${Number(stats.exprimes).toLocaleString('fr-FR')}

Votes blancs

${Number(stats.blancs).toLocaleString('fr-FR')}

Votes nuls

${Number(stats.nuls).toLocaleString('fr-FR')}

`; }35:Tc34,function buildPopupHTML(codeCirco) { const candidaturesCommune = resultatsT2.filter( c => c.code_circonscription === codeCirco ); if (!candidaturesCommune.length) return "

Aucune donnée

"; const listesMap = new Map(); candidaturesCommune.forEach(c => { if (!listesMap.has(c.num_liste)) { listesMap.set(c.num_liste, { num_liste: c.num_liste, nom_liste: c.nom_liste, cod_nua: c.cod_nua, lib_nua: c.lib_nua, nb_voix: c.nb_voix, rapport_exprimes: c.rapport_exprimes, elu: c.elu, nom_circonscription: c.nom_circonscription, taux_depouillment: c.taux_depouillment, tour: c.tour, candidats: [] }); } listesMap.get(c.num_liste).candidats.push(c); }); const listes = [...listesMap.values()].sort( (a, b) => Number(b.nb_voix) - Number(a.nb_voix) ); const stats = listes[0] || {}; const taux = parseFloat((stats.taux_depouillment || "0").replace(',', '.')); const estDefinitif = taux >= 100; return `

${stats.nom_circonscription || codeCirco}

${taux.toFixed(1).replace('.', ',')}% dépouillé ${estDefinitif ? '✅' : '⏳'}

${listes.map(liste => { const couleur = nuancesCouleurs[liste.cod_nua] || '#ccc'; const pct = parseFloat((liste.rapport_exprimes || "0").replace(',', '.')); const voix = Number(liste.nb_voix) || 0; const estElu = liste.elu === "OUI" || liste.elu === true; const tete = liste.candidats[0]; const nomTete = tete ? `${tete.prenom_candidat} ${tete.nom_candidat}` : ''; return `

${estElu ? `✓ Élu·e` : ''}

${nomTete}

${liste.nom_liste}

${liste.lib_nua || liste.cod_nua}

${pct.toFixed(2).replace('.', ',')} % ${voix.toLocaleString('fr-FR')} voix

`; }).join('')}

`; }36:T1b06,carteParisArrondissements = { const width = 928; const height = 800; const padding = 80; const container = d3.create("div") .style("position", "relative") .style("width", "100%") .style("height", "auto"); container.append("button").attr("class", "zoom-in-btn").text("+"); container.append("button").attr("class", "zoom-out-btn").text("−"); const fullscreenButton = container.append("button").attr("class", "fullscreen-btn"); const legendToggleButton = container.append("button").attr("class", "legend-toggle-btn"); legendToggleButton.append("span").text("Légende"); const buttonArrow = legendToggleButton.append("span") .style("transition", "transform 0.2s") .style("font-size", "12px") .text("▼"); const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .attr("style", "background: white;"); const popupPanel = container.append("div") .style("position", "absolute") .style("bottom", "60px") .style("right", "10px") .style("width", "320px") .style("max-height", "480px") .style("overflow-y", "auto") .style("background", "white") .style("border", "1px solid #ddd") .style("border-radius", "4px") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.15)") .style("z-index", "1000") .style("opacity", "0") .style("pointer-events", "none"); const projection = d3.geoMercator() .fitExtent([[padding, padding], [width - padding, height - padding]], arrondissementsParis); const path = d3.geoPath(projection); const mapGroup = svg.append("g"); mapGroup.selectAll("path") .data(arrondissementsParis.features) .join("path") .attr("d", path) .attr("fill", d => { const match = d.properties.commune.match(/(\d+)/); if (!match) return "#e8e8e8"; const codeCirco = "751" + String(match[1]).padStart(2, "0"); return couleurParArrondissementParis.get(codeCirco)?.couleur || "#e8e8e8"; }) .attr("stroke", "#2d2d2d") .attr("stroke-width", 1) .attr("opacity", 0.85) .style("cursor", "pointer") .on("click", function(event, d) { const match = d.properties.commune.match(/(\d+)/); if (!match) return; const newCode = "751" + String(match[1]).padStart(2, "0"); // Clic sur le même arrondissement = désépingler if (codeCircoSurvolMutable.value === newCode) { codeCircoSurvolMutable.value = null; popupPanel.style("opacity", "0").style("pointer-events", "none"); mapGroup.selectAll("path") .attr("opacity", 0.85) .attr("stroke", "#2d2d2d") .attr("stroke-width", 1); return; } // Réinitialise tous les paths mapGroup.selectAll("path") .attr("opacity", 0.85) .attr("stroke", "#2d2d2d") .attr("stroke-width", 1); // Surbrillance du path cliqué d3.select(this) .attr("opacity", 1) .attr("stroke", "#111") .attr("stroke-width", 2.5); codeCircoSurvolMutable.value = newCode; popupPanel .style("opacity", "1") .style("pointer-events", "auto") .html(buildPopupHTML(newCode)); // Bouton de fermeture document.getElementById("close-popup").addEventListener("click", () => { codeCircoSurvolMutable.value = null; popupPanel.style("opacity", "0").style("pointer-events", "none"); mapGroup.selectAll("path") .attr("opacity", 0.85) .attr("stroke", "#2d2d2d") .attr("stroke-width", 1); }); }); mapGroup.selectAll("text") .data(arrondissementsParis.features) .join("text") .attr("transform", d => `translate(${path.centroid(d)})`) .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "#2d2d2d") .attr("stroke", "white") .attr("stroke-width", 4) .attr("paint-order", "stroke") .attr("pointer-events", "none") .text(d => { const match = d.properties.commune.match(/(\d+)/); return match ? match[1] : '?'; }); const zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", (event) => { mapGroup.attr("transform", event.transform); mapGroup.selectAll("path").attr("stroke-width", 0.5 / event.transform.k); mapGroup.selectAll("text").attr("font-size", 16 / event.transform.k + "px"); }); svg.call(zoom); svg.call(zoom.transform, d3.zoomIdentity); container.select(".zoom-in-btn").on("click", function() { svg.transition().duration(300).call(zoom.scaleBy, 1.5); }); container.select(".zoom-out-btn").on("click", function() { svg.transition().duration(300).call(zoom.scaleBy, 1 / 1.5); }); fullscreenButton.on("click", function() { if (document.fullscreenElement) document.exitFullscreen(); else container.node().requestFullscreen(); }); container.node().addEventListener("fullscreenchange", function() { if (document.fullscreenElement) { svg.attr("width", "100vw").attr("height", "100vh") .attr("viewBox", [0, 0, width, height]).style("background", "white"); } else { svg.attr("width", "100%").attr("height", "auto") .attr("viewBox", [0, 0, width, height]).style("background", "white"); } }); let legendGroup = null; function toggleLegend() { if (legendGroup) { legendGroup.remove(); legendGroup = null; buttonArrow.style("transform", "rotate(0deg)"); } else { legendGroup = container.append("div") .attr("class", "legend-panel") .style("position", "absolute") .style("bottom", "40px") .style("left", "10px") .style("z-index", "9999") .style("max-height", "400px") .style("overflow-y", "auto") .style("background", "white") .style("border", "1px solid #ddd") .style("border-radius", "4px") .style("padding", "8px") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.15)"); const nuancesVisibles = new Map(); couleurParArrondissementParis.forEach(({ couleur, cod_nua, lib_nua }) => { if (cod_nua && !nuancesVisibles.has(cod_nua)) { nuancesVisibles.set(cod_nua, { couleur, lib_nua }); } }); nuancesVisibles.forEach(({ couleur, lib_nua }, code) => { const row = legendGroup.append("div").attr("class", "legend-item"); row.append("div").attr("class", "legend-swatch").style("background-color", couleur); row.append("span").attr("class", "legend-label").text(lib_nua || code); }); buttonArrow.style("transform", "rotate(180deg)"); } } legendToggleButton.on("click", toggleLegend); return container.node(); }37:T198d,carteLyonArrondissements = { const width = 928; const height = 800; const padding = 80; const container = d3.create("div") .style("position", "relative") .style("width", "100%") .style("height", "auto"); container.append("button").attr("class", "zoom-in-btn").text("+"); container.append("button").attr("class", "zoom-out-btn").text("−"); const fullscreenButton = container.append("button").attr("class", "fullscreen-btn"); const legendToggleButton = container.append("button").attr("class", "legend-toggle-btn"); legendToggleButton.append("span").text("Légende"); const buttonArrow = legendToggleButton.append("span") .style("transition", "transform 0.2s") .style("font-size", "12px") .text("▼"); const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .attr("style", "background: white;"); const popupPanel = container.append("div") .style("position", "absolute") .style("bottom", "60px") .style("right", "10px") .style("width", "320px") .style("max-height", "480px") .style("overflow-y", "auto") .style("background", "white") .style("border", "1px solid #ddd") .style("border-radius", "4px") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.15)") .style("z-index", "1000") .style("opacity", "0") .style("pointer-events", "none"); const projection = d3.geoMercator() .fitExtent([[padding, padding], [width - padding, height - padding]], arrondissementsLyon); const path = d3.geoPath(projection); const mapGroup = svg.append("g"); mapGroup.selectAll("path") .data(arrondissementsLyon.features) .join("path") .attr("d", path) .attr("fill", d => { const codeCirco = d.properties.code_insee; return couleurParArrondissementLyon.get(codeCirco)?.couleur || "#e8e8e8"; }) .attr("stroke", "#2d2d2d") .attr("stroke-width", 1) .attr("opacity", 0.85) .style("cursor", "pointer") .on("click", function(event, d) { const newCode = d.properties.code_insee; if (codeCircoSurvolMutableLyon.value === newCode) { codeCircoSurvolMutableLyon.value = null; popupPanel.style("opacity", "0").style("pointer-events", "none"); mapGroup.selectAll("path") .attr("opacity", 0.85) .attr("stroke", "#2d2d2d") .attr("stroke-width", 1); return; } mapGroup.selectAll("path") .attr("opacity", 0.85) .attr("stroke", "#2d2d2d") .attr("stroke-width", 1); d3.select(this) .attr("opacity", 1) .attr("stroke", "#111") .attr("stroke-width", 2.5); codeCircoSurvolMutableLyon.value = newCode; popupPanel .style("opacity", "1") .style("pointer-events", "auto") .html(buildPopupHTML(newCode)); const closeBtn = popupPanel.select("#close-popup").node(); if (closeBtn) { closeBtn.onclick = () => { codeCircoSurvolMutableLyon.value = null; popupPanel.style("opacity", "0").style("pointer-events", "none"); mapGroup.selectAll("path") .attr("opacity", 0.85) .attr("stroke", "#2d2d2d") .attr("stroke-width", 1); }; } }); mapGroup.selectAll("text") .data(arrondissementsLyon.features) .join("text") .attr("transform", d => `translate(${path.centroid(d)})`) .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "#2d2d2d") .attr("stroke", "white") .attr("stroke-width", 4) .attr("paint-order", "stroke") .attr("pointer-events", "none") .text(d => { const match = d.properties.commune.match(/(\d+)/); return match ? match[1] : '?'; }); const zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", (event) => { mapGroup.attr("transform", event.transform); mapGroup.selectAll("path").attr("stroke-width", 0.5 / event.transform.k); mapGroup.selectAll("text").attr("font-size", 16 / event.transform.k + "px"); }); svg.call(zoom); svg.call(zoom.transform, d3.zoomIdentity); container.select(".zoom-in-btn").on("click", function() { svg.transition().duration(300).call(zoom.scaleBy, 1.5); }); container.select(".zoom-out-btn").on("click", function() { svg.transition().duration(300).call(zoom.scaleBy, 1 / 1.5); }); fullscreenButton.on("click", function() { if (document.fullscreenElement) document.exitFullscreen(); else container.node().requestFullscreen(); }); container.node().addEventListener("fullscreenchange", function() { if (document.fullscreenElement) { svg.attr("width", "100vw").attr("height", "100vh") .attr("viewBox", [0, 0, width, height]).style("background", "white"); } else { svg.attr("width", "100%").attr("height", "auto") .attr("viewBox", [0, 0, width, height]).style("background", "white"); } }); let legendGroup = null; function toggleLegend() { if (legendGroup) { legendGroup.remove(); legendGroup = null; buttonArrow.style("transform", "rotate(0deg)"); } else { legendGroup = container.append("div") .attr("class", "legend-panel") .style("position", "absolute") .style("bottom", "40px") .style("left", "10px") .style("z-index", "9999") .style("max-height", "400px") .style("overflow-y", "auto") .style("background", "white") .style("border", "1px solid #ddd") .style("border-radius", "4px") .style("padding", "8px") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.15)"); const nuancesVisibles = new Map(); couleurParArrondissementLyon.forEach(({ couleur, cod_nua, lib_nua }) => { if (cod_nua && !nuancesVisibles.has(cod_nua)) { nuancesVisibles.set(cod_nua, { couleur, lib_nua }); } }); nuancesVisibles.forEach(({ couleur, lib_nua }, code) => { const row = legendGroup.append("div").attr("class", "legend-item"); row.append("div").attr("class", "legend-swatch").style("background-color", couleur); row.append("span").attr("class", "legend-label").text(lib_nua || code); }); buttonArrow.style("transform", "rotate(180deg)"); } } legendToggleButton.on("click", toggleLegend); return container.node(); }38:Tcb4,function buildPopupHTMLMarseille(codeSecteur) { console.log("codeSecteur reçu :", codeSecteur); const candidaturesCommune = resultatsT2.filter( c => c.code_circonscription === codeSecteur ); console.log("lignes trouvées :", candidaturesCommune.length); if (!candidaturesCommune.length) return "

Aucune donnée

${stats.nom_circonscription || codeSecteur}

${taux.toFixed(1).replace('.', ',')}% dépouillé ${estDefinitif ? '✅' : '⏳'}

${estElu ? `✓ Élu·e` : ''}

${nomTete}

${liste.nom_liste}

${liste.lib_nua || liste.cod_nua}

${pct.toFixed(2).replace('.', ',')} % ${voix.toLocaleString('fr-FR')} voix

`; }).join('')}

`; }39:T1ac4,carteMarseilleArrondissements = { const width = 928; const height = 800; const padding = 80; const container = d3.create("div") .style("position", "relative") .style("width", "100%") .style("height", "auto"); container.append("button").attr("class", "zoom-in-btn").text("+"); container.append("button").attr("class", "zoom-out-btn").text("−"); const fullscreenButton = container.append("button").attr("class", "fullscreen-btn"); const legendToggleButton = container.append("button").attr("class", "legend-toggle-btn"); legendToggleButton.append("span").text("Légende"); const buttonArrow = legendToggleButton.append("span") .style("transition", "transform 0.2s") .style("font-size", "12px") .text("▼"); const svg = container.append("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .attr("style", "background: white;"); const popupPanel = container.append("div") .style("position", "absolute") .style("bottom", "60px") .style("right", "10px") .style("width", "320px") .style("max-height", "480px") .style("overflow-y", "auto") .style("background", "white") .style("border", "1px solid #ddd") .style("border-radius", "4px") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.15)") .style("z-index", "1000") .style("opacity", "0") .style("pointer-events", "none"); const projection = d3.geoMercator() .fitExtent([[padding, padding], [width - padding, height - padding]], arrondissementsMarseille); const path = d3.geoPath(projection); const mapGroup = svg.append("g"); mapGroup.selectAll("path") .data(arrondissementsMarseille.features) .join("path") .attr("d", path) .attr("fill", d => { const secteur = d.properties.secteur; return couleurParSecteurMarseille.get(secteur)?.couleur || "#e8e8e8"; }) .attr("stroke", "#2d2d2d") .attr("stroke-width", 1) .attr("opacity", 0.85) .style("cursor", "pointer") .on("click", function(event, d) { const secteur = d.properties.secteur; const newCode = secteur; if (codeCircoSurvolMutableMarseille.value === newCode) { codeCircoSurvolMutableMarseille.value = null; popupPanel.style("opacity", "0").style("pointer-events", "none"); mapGroup.selectAll("path") .attr("opacity", 0.85) .attr("stroke", "#2d2d2d") .attr("stroke-width", 1); return; } // Réinitialise tous les paths du même secteur mapGroup.selectAll("path") .attr("opacity", 0.85) .attr("stroke", "#2d2d2d") .attr("stroke-width", 1); // Surbrillance des deux arrondissements du secteur cliqué mapGroup.selectAll("path") .filter(p => p.properties.secteur === secteur) .attr("opacity", 1) .attr("stroke", "#111") .attr("stroke-width", 2.5); codeCircoSurvolMutableMarseille.value = newCode; popupPanel .style("opacity", "1") .style("pointer-events", "auto") .html(buildPopupHTMLMarseille(newCode)); const closeBtn = popupPanel.select("#close-popup").node(); if (closeBtn) { closeBtn.onclick = () => { codeCircoSurvolMutableMarseille.value = null; popupPanel.style("opacity", "0").style("pointer-events", "none"); mapGroup.selectAll("path") .attr("opacity", 0.85) .attr("stroke", "#2d2d2d") .attr("stroke-width", 1); }; } }); mapGroup.selectAll("text") .data(arrondissementsMarseille.features) .join("text") .attr("transform", d => `translate(${path.centroid(d)})`) .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("fill", "#2d2d2d") .attr("stroke", "white") .attr("stroke-width", 4) .attr("paint-order", "stroke") .attr("pointer-events", "none") .text(d => { const match = d.properties.commune.match(/(\d+)/); return match ? match[1] : '?'; }); const zoom = d3.zoom() .scaleExtent([1, 8]) .on("zoom", (event) => { mapGroup.attr("transform", event.transform); mapGroup.selectAll("path").attr("stroke-width", 0.5 / event.transform.k); mapGroup.selectAll("text").attr("font-size", 16 / event.transform.k + "px"); }); svg.call(zoom); svg.call(zoom.transform, d3.zoomIdentity); container.select(".zoom-in-btn").on("click", function() { svg.transition().duration(300).call(zoom.scaleBy, 1.5); }); container.select(".zoom-out-btn").on("click", function() { svg.transition().duration(300).call(zoom.scaleBy, 1 / 1.5); }); fullscreenButton.on("click", function() { if (document.fullscreenElement) document.exitFullscreen(); else container.node().requestFullscreen(); }); container.node().addEventListener("fullscreenchange", function() { if (document.fullscreenElement) { svg.attr("width", "100vw").attr("height", "100vh") .attr("viewBox", [0, 0, width, height]).style("background", "white"); } else { svg.attr("width", "100%").attr("height", "auto") .attr("viewBox", [0, 0, width, height]).style("background", "white"); } }); let legendGroup = null; function toggleLegend() { if (legendGroup) { legendGroup.remove(); legendGroup = null; buttonArrow.style("transform", "rotate(0deg)"); } else { legendGroup = container.append("div") .attr("class", "legend-panel") .style("position", "absolute") .style("bottom", "40px") .style("left", "10px") .style("z-index", "9999") .style("max-height", "400px") .style("overflow-y", "auto") .style("background", "white") .style("border", "1px solid #ddd") .style("border-radius", "4px") .style("padding", "8px") .style("box-shadow", "0 2px 8px rgba(0,0,0,0.15)"); const nuancesVisibles = new Map(); couleurParSecteurMarseille.forEach(({ couleur, cod_nua, lib_nua }) => { if (cod_nua && !nuancesVisibles.has(cod_nua)) { nuancesVisibles.set(cod_nua, { couleur, lib_nua }); } }); nuancesVisibles.forEach(({ couleur, lib_nua }, code) => { const row = legendGroup.append("div").attr("class", "legend-item"); row.append("div").attr("class", "legend-swatch").style("background-color", couleur); row.append("span").attr("class", "legend-label").text(lib_nua || code); }); buttonArrow.style("transform", "rotate(180deg)"); } } legendToggleButton.on("click", toggleLegend); return container.node(); }3a:[{"id":"0c8fc27eb574e380c3c2d97847e0bc1af6b4ecdb97b91ee145193f57e0a9456134937761dc0967b47d8f8aa6d12732164db03c2ef6e01cbe6c6b68f687050a7a","href":"https://static.observableusercontent.com/files/0c8fc27eb574e380c3c2d97847e0bc1af6b4ecdb97b91ee145193f57e0a9456134937761dc0967b47d8f8aa6d12732164db03c2ef6e01cbe6c6b68f687050a7a","name":"arrondissements.geojson","type":"application/geo+json","lastModified":1773395885041.562,"size":122595}] 2f:{"id":"d8ee848bda8e67c5","slug":"municipales-t1","title":"Municipales T1","thumbnail":"21cccf019d3d7e13a2624aeac6b41428d7a82152605f0e01239f831690af3871","access_level":"public","create_time":"$D2026-03-11T13:25:06.186Z","update_time":"$D2026-03-23T16:10:03.065Z","view_time":null,"first_public_time":"$D2026-03-11T14:29:01.762Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ac9935df061cc752","login":"lhumanite","name":"l'Humanité","avatar_url":"https://avatars-next.observableusercontent.com/8549575f08e0cb2ce97bf4ffc82d08199b34b9720517fc8a6b5fc9fdf5376542","tier":"starter_2024"},"version":267,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"65f8f98a8a02f6cc","login":"arthur-dumas","name":"Arthur Dumas","avatar_url":"https://avatars-next.observableusercontent.com/56fceb7b580f217636caee7db8440b9a117ae9eaeaab43fcd060ec624386bb5c","tier":null}],"members":[{"type":"individual","id":"65f8f98a8a02f6cc","login":"arthur-dumas","name":"Arthur Dumas","avatar_url":"https://avatars-next.observableusercontent.com/56fceb7b580f217636caee7db8440b9a117ae9eaeaab43fcd060ec624386bb5c","tier":null,"role":"editor"},{"type":"team","id":"ac9935df061cc752","login":"lhumanite","name":"l'Humanité","avatar_url":"https://avatars-next.observableusercontent.com/8549575f08e0cb2ce97bf4ffc82d08199b34b9720517fc8a6b5fc9fdf5376542","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Municipales T1","cells":[{"id":0,"value":"# Municipales T1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"import {createMap,createChoroplethMap,viewof showLegend} from \"@lhumanite/cartes-huma\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"import {theme, visualizationLayout,popupStyle,popupFormat,createArticlePopup} from \"@lhumanite/design-huma\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"import {huma_web,huma_web_extent,huma_print} from \"@lhumanite/palettes-huma\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"resultatsTest = fetch(\"https://raw.githubusercontent.com/adumas1350/MUN26_t1/master/resultats_municipales_t1.csv\")\n .then(r => r.text())\n .then(text => d3.csvParse(text))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":259,"value":"resultatsT2 = fetch(`https://raw.githubusercontent.com/adumas1350/MuN26_t2/main/resultats_municipales_t2.csv?t=${Date.now()}`)\n .then(r => r.text())\n .then(text => d3.csvParse(text))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"communes = fetch(\"https://raw.githubusercontent.com/adumas1350/municipales_test/master/communes_2026.csv\")\n .then(r => r.text())\n .then(text => d3.csvParse(text))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"resultatsTest.filter(l => l.nom_circonscription?.includes(\"Paris\")).slice(0, 3)\n .map(l => ({ code_circonscription: l.code_circonscription, nom: l.nom_circonscription }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"resultatsTest.filter(l => l.nom_circonscription?.includes(\"Marseille\")).slice(0, 3)\n .map(l => ({ code_circonscription: l.code_circonscription, nom: l.nom_circonscription }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"communes","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"codesPostaux = fetch(\"https://raw.githubusercontent.com/adumas1350/municipales_test/master/codes_postaux.csv\")\n .then(r => r.text())\n .then(text => {\n const lines = text.split(\"\\n\").slice(1);\n const map = new Map();\n lines.forEach(line => {\n const cols = line.split(\";\");\n const codeInsee = cols[0]?.trim();\n const codePostal = cols[2]?.trim();\n if (codeInsee && codePostal) {\n if (!map.has(codePostal)) map.set(codePostal, []);\n map.get(codePostal).push(codeInsee);\n }\n });\n return map;\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"// BARRE DE RECHERCHE - inchangée par rapport aux archives 2020\nviewof recherche = {\n const container = html`

\n 🔍\n

`;\n \n const input = container.querySelector('input');\n container.value = '';\n \n input.addEventListener('input', () => {\n container.value = input.value;\n container.dispatchEvent(new Event('input', { bubbles: true }));\n });\n \n return container;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"mutable villeRechercheSelectionnee = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":57,"value":"carteArrondissements = FileAttachment(\"arrondissements.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"arrondissementsParis = {\n return {\n type: \"FeatureCollection\",\n features: carteArrondissements.features.filter(f => \n f.properties.commune?.startsWith(\"PARIS-\")\n )\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"arrondissementsLyon = {\n return {\n type: \"FeatureCollection\",\n features: carteArrondissements.features.filter(f => \n f.properties.commune?.startsWith(\"LYON-\")\n )\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"arrondissementsMarseille = {\n const secteurParArrondissement = {\n 201: \"13201\", 202: \"13202\", 203: \"13203\", 204: \"13204\",\n 205: \"13205\", 206: \"13206\", 207: \"13207\", 208: \"13208\",\n 209: \"13209\", 210: \"13210\", 211: \"13211\", 212: \"13212\",\n 213: \"13213\", 214: \"13214\", 215: \"13215\", 216: \"13216\"\n};\n\n\n const features = carteArrondissements.features\n .filter(f => f.properties.commune?.startsWith(\"MARSEILLE-\"))\n .map(f => {\n const secteur = secteurParArrondissement[f.properties.code_commune];\n return {\n ...f,\n properties: {\n ...f.properties,\n secteur: secteur\n }\n };\n });\n\n return { type: \"FeatureCollection\", features };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"couleurParArrondissementParis = {\n const listesParCirco = d3.group(resultatsT2, d => d.code_circonscription);\n const map = new Map();\n for (let arr = 1; arr <= 20; arr++) {\n const codeCirco = \"751\" + String(arr).padStart(2, \"0\");\n const listes = listesParCirco.get(codeCirco);\n if (!listes) { map.set(codeCirco, { couleur: \"#e8e8e8\", cod_nua: null }); continue; }\n const listesMap = new Map();\n listes.forEach(c => {\n if (!listesMap.has(c.num_liste)) listesMap.set(c.num_liste, c);\n });\n const enTete = [...listesMap.values()].sort((a, b) => Number(b.nb_voix) - Number(a.nb_voix))[0];\n map.set(codeCirco, {\n couleur: nuancesCouleurs[enTete?.cod_nua] || \"#e8e8e8\",\n cod_nua: enTete?.cod_nua || null,\n lib_nua: enTete?.lib_nua || null\n });\n }\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"codeCircoSurvolMutable = new Mutable(null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"codeCircoSurvol = codeCircoSurvolMutable.generator ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":185,"value":"couleurParArrondissementLyon = {\n const listesParCirco = d3.group(resultatsT2, d => d.code_circonscription);\n const map = new Map();\n for (let arr = 1; arr <= 9; arr++) {\n const codeCirco = \"6938\" + arr;\n const listes = listesParCirco.get(codeCirco);\n if (!listes) { map.set(codeCirco, { couleur: \"#e8e8e8\", cod_nua: null, lib_nua: null }); continue; }\n const listesMap = new Map();\n listes.forEach(c => { if (!listesMap.has(c.num_liste)) listesMap.set(c.num_liste, c); });\n const enTete = [...listesMap.values()].sort((a, b) => Number(b.nb_voix) - Number(a.nb_voix))[0];\n map.set(codeCirco, {\n couleur: nuancesCouleurs[enTete?.cod_nua] || \"#e8e8e8\",\n cod_nua: enTete?.cod_nua || null,\n lib_nua: enTete?.lib_nua || null\n });\n }\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"codeCircoSurvolMutableLyon = new Mutable(null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"codeCircoSurvolLyon = codeCircoSurvolMutableLyon.generator","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"arrondissementsLyon","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":193,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"couleurParSecteurMarseille = {\n const listesParCirco = d3.group(resultatsT2, d => d.code_circonscription);\n const map = new Map();\nfor (let s = 1; s <= 16; s++) {\n const codeCirco = \"132\" + String(s).padStart(2, \"0\");\n const listes = listesParCirco.get(codeCirco);\n if (!listes) { map.set(codeCirco, { couleur: \"#e8e8e8\", cod_nua: null, lib_nua: null }); continue; }\n const listesMap = new Map();\n listes.forEach(c => { if (!listesMap.has(c.num_liste)) listesMap.set(c.num_liste, c); });\n const enTete = [...listesMap.values()].sort((a, b) => Number(b.nb_voix) - Number(a.nb_voix))[0];\n map.set(codeCirco, {\n couleur: nuancesCouleurs[enTete?.cod_nua] || \"#e8e8e8\",\n cod_nua: enTete?.cod_nua || null,\n lib_nua: enTete?.lib_nua || null\n });\n }\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"codeCircoSurvolMutableMarseille = new Mutable(null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"codeCircoSurvolMarseille = codeCircoSurvolMutableMarseille.generator","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"couleurParSecteurMarseille","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":250,"value":"resultatsTest.filter(c => c.nom_circonscription === \"Lyon\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"resultatsTest.filter(c => c.nom_circonscription?.toLowerCase() === \"lyon\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"