2b:null 2c:["$","title",null,{"children":"Politoscope_2026 | Alain Ottenheimer | Observable"}] 31:T1abd,viewof map = { // 1. Échelles et formateurs const circle_scale = d3.scaleLinear().domain([1, 1600]).range([0.5, 25]); const dotFormat = (n) => d3.format(",d")(n).replace(/,/g, "\u00a0"); // 2. Préparation des données logPOP const mapData = { ...resElection, features: resElection.features.map((f) => ({ ...f, properties: { ...f.properties, logPOP: circle_scale(Math.sqrt(+f.properties.POP || 0)) } })) }; // 3. Conteneur de la carte var container = html`

`; // 4. Template HTML avec Style intégré et structure de la Console var content = html`

${container}

`; yield content; // 5. Configuration Mapbox let map = new mapboxgl.Map({ container, maxZoom: 12, minZoom: 4.7, center: [IHM.long, IHM.lat], zoom: IHM.zoomValue, style: blankStyle }); // Fonction de création de calques function layer(y) { return { id: y.toString(), type: "circle", source: { type: "geojson", data: mapData }, paint: { "circle-color": { property: "L" + y.toString().slice(2, 4), type: "categorical", stops: color }, "circle-radius": [ "interpolate", ["linear"], ["zoom"], 4.7, ["*", 1, ["get", "logPOP"]], 12, ["*", 15, ["get", "logPOP"]] ], "circle-opacity": 0 } }; } var xlabel = d3 .scaleOrdinal() .domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) .range([ "E99", "P02", "E04", "P07", "E09", "P12", "E14", "P17", "E19", "P22", "E24" ]); map.on("load", () => { container.value = map; container.dispatchEvent(new CustomEvent("input")); years.forEach((y) => map.addLayer(layer(y))); map.setPaintProperty(IHM.year.toString(), "circle-opacity", 0.9); map.loadImage( "https://raw.githubusercontent.com/ToulouseDataViz/toulousedataviz.github.io/master/center_marker.png", (error, image) => { if (!error) map.addImage("cross", image); } ); // 6. Interaction MouseMove map.on("mousemove", function (e) { const features = map.queryRenderedFeatures(e.point, { layers: years }); const d = features.length ? features[0].properties : undefined; const yearSuffix = IHM.year.toString().slice(2, 4); d3.select("#tooltip-nom").html( `• Commune : ${ d ? d.NOM + " (" + d.INSEE.slice(0, 2) + ")" : "" }` ); d3.select("#tooltip-liste").text( `• Candidat / Liste : ${d ? d["L" + yearSuffix] : ""}` ); d3.select("#tooltip-voix").text( `• Voix : ${d ? d["VE" + yearSuffix] + "%" : ""}` ); d3.select("#tooltip-pop").text( `• Population : ${d ? dotFormat(d.POP) : ""}` ); d3.select("#tooltip-exprimes").text( `• Votes exprimés : ${d ? dotFormat(d["E" + yearSuffix]) : ""}` ); const svgBar = d3.select("#tooltip-bar"); svgBar.selectAll("*").remove(); if (d) { years.forEach((y, i) => { const suffix = y.slice(2, 4); const score = +d["VE" + suffix] || 0; const xPos = 10 + i * 20; svgBar .append("rect") .attr("x", xPos) .attr("y", 85 - score) .attr("width", 15) .attr("height", score) .style("fill", colorListe(d["L" + suffix])) .style("stroke", suffix === yearSuffix ? "#fff" : "none") .style("stroke-width", "1.5px"); svgBar .append("text") .attr("x", xPos + 7.5) .attr("y", 100) .attr("text-anchor", "middle") .style("font-size", "7px") .style("font-weight", suffix === yearSuffix ? "bold" : "normal") .text(xlabel(i)); }); } }); // 7. Gestion du dispatch var active_layer = ""; dispatch.on("input", () => { const y = IHM.year.toString(); years.forEach((yearId) => map.setPaintProperty(yearId, "circle-opacity", 0) ); map.setPaintProperty(y, "circle-opacity", 0.9); if (active_layer !== "" && map.getLayer(active_layer)) { map.removeLayer(active_layer); map.removeSource(active_layer); } active_layer = "selection-" + Math.floor(Math.random() * 1000); if (IHM.as !== "") { map.addLayer({ id: active_layer, type: "symbol", source: { type: "geojson", data: { type: "Feature", geometry: { type: "Point", coordinates: [IHM.long, IHM.lat] } } }, layout: { "icon-image": "cross", "icon-size": 0.25 } }); } if (IHM.fly === 1 || IHM.reset === 1) { map.flyTo({ center: [IHM.long, IHM.lat], zoom: IHM.zoomValue, speed: 0.5 }); IHM.reset = 0; } }); }); }32:T626,viewof nodes = { let add = html`

`; add.onclick = (e) => { if (e.target.tagName !== "BUTTON") return; // 1. Reset de l'objet de contrôle IHM.fly = 1; IHM.cross = 0; IHM.reset = 1; IHM.zoomValue = 4.7; IHM.lat = 47; IHM.long = 0.5; // 2. Reset de l'autoSelect (L'astuce est d'utiliser l'élément DOM de viewof as) // On accède au conteneur du formulaire de l'autoSelect const asForm = viewof as; if (asForm) { // On vide la valeur interne asForm.value = ""; // On vide visuellement l'input (le champ 'i' dans notre fonction autoSelect) if (asForm.elements && asForm.elements.i) { asForm.elements.i.value = ""; } // On force Observable à mettre à jour toutes les cellules dépendant de 'as' asForm.dispatchEvent(new CustomEvent("input", { bubbles: true })); } // 3. Notification pour le bouton lui-même add.dispatchEvent(new CustomEvent("input", { bubbles: true })); if (typeof dispatch !== "undefined") dispatch.call("input"); }; return add; }33:Tae7,chart = { const svg = d3.select(DOM.svg(width_bar, height_bar)).attr("class", "shadow"); svg .append("text") .text("" + `${label(year.slice(2, 4))}`) .style("font", "12px sans-serif ") .attr("y", height_bar) .attr("x", width_bar / 2) .style("fill", "#000") .attr("dy", "-0.5em") .style("text-anchor", "middle"); var format = d3.format(".2n"); var x = d3 .scaleLinear() .domain([0, 100]) .range([margin_bar.left, width_bar - margin_bar.right - 10]); var y = d3 .scaleBand() .domain(processedData.map((d) => d.ComType.slice(2))) .range([margin_bar.top, height_bar - margin_bar.bottom]) .padding(0.1); var xAxis = (g) => g .attr("transform", `translate(0,${margin_bar.top})`) .attr("class", "axis") .style("font", "10px sans-serif ") .call(d3.axisTop(x).ticks(width_bar / 200)) .call((g) => g.select(".domain").remove()); var yAxis = (g) => g .attr("class", "axis") .style("font", "10px sans-serif ") .attr("transform", `translate(${margin_bar.left},0)`) .call(d3.axisLeft(y).tickSizeOuter(0)); var format_pourcent1f = d3.format(".1f"); var format_pourcent0f = d3.format(".0f"); var format_pourcentSep = d3.format(",.2r"); var z = d3 .scaleOrdinal() .domain(color.flat(1).filter((t) => t.charAt(0) != "#")) .range(color.flat(1).filter((t) => t.charAt(0) == "#")); svg .append("g") .selectAll("rect") .data(processedData) .join("rect") .attr("x", x(0)) .attr("y", (d) => y(d.ComType.slice(2))) .attr("fill", function (d) { return z(d.liste); }) .attr("width", (d) => x((d.nbComliste / d.ComSum) * 100) - x(0)) .attr("height", y.bandwidth()); svg .append("g") .append("text") .attr("class", "xlabel") .attr("y", 0) .attr("x", x(36)) .attr("dy", "10px") .style("font", "12px sans-serif ") .style("fill", "#000") .style("text-anchor", "end") .text("% de communes"); svg .append("g") .attr("fill", "white") .attr("text-anchor", "end") .style("font", "9px sans-serif ") .selectAll("text") .data(processedData) .join("text") .attr("x", (d) => x((d.nbComliste / d.ComSum) * 100) - 4) .attr("y", (d) => y(d.ComType.slice(2)) + y.bandwidth() / 2) .attr("dy", "0.35em") .text((d) => { const ratio = format_pourcent1f((d.nbComliste / d.ComSum) * 100); const communesTete = d.nbComliste.toLocaleString("fr-FR"); const totalCommunes = d.ComSum.toLocaleString("fr-FR"); return `${d.liste} - En tête dans ${communesTete} des ${totalCommunes} communes (${ratio}%) `; }); svg.append("g").call(xAxis); svg.append("g").style("fill", "red").call(yAxis); return svg.node(); }34:T8b2,function input(config) { let { form, type = "text", attributes = {}, action, getValue, title, description, format, display, submit, options } = config; const wrapper = html`

`; if (!form) form = html``; Object.keys(attributes).forEach((key) => { const val = attributes[key]; }); if (submit) form.append( html`` ); form.append( html`` ); if (title) form.prepend( html`

${title}

` ); if (description) form.append( html`

${description}

` ); if (format) format = typeof format === "function" ? format : d3.format.format(format); if (action) { action(form); } else { const verb = submit ? "onsubmit" : type == "button" ? "onclick" : type == "checkbox" || type == "radio" ? "onchange" : "oninput"; form[verb] = (e) => { e && e.preventDefault(); const value = getValue ? getValue(form.input) : form.input.value; if (form.output) { const out = display ? display(value) : format ? format(value) : value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } form.value = value; if (verb !== "oninput") form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; if (verb !== "oninput") wrapper.oninput = (e) => e && e.stopPropagation() && e.preventDefault(); if (verb !== "onsubmit") form.onsubmit = (e) => e && e.preventDefault(); form[verb](); } while (form.childNodes.length) { wrapper.appendChild(form.childNodes[0]); } form.append(wrapper); return form; }35:T56e,function autoSelect(options, config = {}) { const { value = "", label = "", placeholder = "", description = "", fontSize = "1.1rem", color = "#2c3e50", id = "list-" + Math.random().toString(36).substr(2, 9) // ID unique pour lier input et datalist } = config; // On crée le wrapper avec un datalist natif const wrapper = html`

${ label ? html`${label}` : "" } ${options.map((o) => html``)} ${ description ? html`

${description}

` : "" }

`; const input = wrapper.querySelector("input"); // On expose la valeur pour rester compatible avec ton code Object.defineProperty(wrapper, "value", { get: () => input.value, set: (v) => (input.value = v) }); return wrapper; }36:T907,color = [ // EXTREME LEFT / LEFT (Red) ["LAGUILLER", "#ef3b2c"], ["BESANCENOT", "#ef3b2c"], ["ARTHAUD", "#ef3b2c"], ["POUTOU", "#ef3b2c"], ["HUE", "#ef3b2c"], ["BUFFET", "#ef3b2c"], ["ROUSSEL", "#ef3b2c"], ["MELENCHON", "#ef3b2c"], ["MÉLENCHON", "#ef3b2c"], ["BOVE", "#ef3b2c"], ["LFG", "#ef3b2c"], ["LPC", "#ef3b2c"], ["LFI", "#ef3b2c"], ["LXG", "#ef3b2c"], ["LEXG", "#ef3b2c"], ["LLO", "#ef3b2c"], ["LO-LCR", "#ef3b2c"], ["LCOP", "#ef3b2c"], // SOCIALIST / LEFT-WING (Pink) ["JOSPIN", "#fa9fb5"], ["ROYAL", "#fa9fb5"], ["HOLLANDE", "#fa9fb5"], ["HAMON", "#fa9fb5"], ["TAUBIRA", "#fa9fb5"], ["CHEVENEMENT", "#fa9fb5"], ["SCHIVARDI", "#fa9fb5"], ["LPS", "#fa9fb5"], ["LSOC", "#fa9fb5"], ["LUG", "#fa9fb5"], ["LDVG", "#fa9fb5"], ["LDG", "#fa9fb5"], ["LCY", "#fa9fb5"], // ECOLOGY / GREENS (Green) ["MAMERE", "#6DE070"], ["VOYNET", "#6DE070"], ["JOLY", "#6DE070"], ["LVEC", "#6DE070"], ["LVEC ", "#6DE070"], ["LVE", "#6DE070"], ["LEC", "#6DE070"], ["LDVV", "#6DE070"], // CENTER / RENAISSANCE (Orange) ["BAYROU", "#F99317"], ["MACRON", "#F99317"], ["LCMD", "#F99317"], ["LUC", "#F99317"], ["LUDF", "#F99317"], ["LREM", "#F99317"], ["LENS", "#F99317"], // RIGHT / CONSERVATIVE (Blue) ["CHIRAC", "#3690c0"], ["SARKOZY", "#3690c0"], ["FILLON", "#3690c0"], ["PÉCRESSE", "#3690c0"], ["LEPAGE", "#3690c0"], ["SAINT-JOSSE", "#3690c0"], ["BOUTIN", "#3690c0"], ["MADELIN", "#3690c0"], ["de VILLIERS", "#3690c0"], ["NIHOUS", "#3690c0"], ["DUPONT-AIGNAN", "#3690c0"], ["ASSELINEAU", "#3690c0"], ["LDVD", "#3690c0"], ["LLR", "#3690c0"], ["LRPR", "#3690c0"], ["LUMP", "#3690c0"], ["LCPT", "#3690c0"], ["LMAJ", "#3690c0"], ["LDD", "#3690c0"], // FAR RIGHT (Black) ["MEGRET", "#0A0A0A"], ["LE PEN", "#0A0A0A"], ["ZEMMOUR", "#0A0A0A"], ["LXD", "#0A0A0A"], ["LEXD", "#0A0A0A"], ["LRN", "#0A0A0A"], ["LFN", "#0A0A0A"], // INDEPENDENT / OTHER (Grey) ["LASSALLE", "#888888"], ["LCP", "#888888"], ["LDIV", "#888888"], [" LDIV", "#888888"], ["LDIV ", "#888888"], ["LDV", "#888888"], ["LGJ", "#888888"], ["LREG", "#888888"], ["LAUT", "#888888"], ["LRG", "#888888"], ["LC", "#888888"], ["", "#888888"], // NULL / EMPTY (White) ["-", "#fff"] ]37:T4df,processedData = d3 .groups(data_series, (d) => d.type) .map(([type, entries]) => { // 1. Group the sub-entries by 'l' and sum their values const subGroups = d3.rollups( entries, (v) => ({ nbCom: v.length, sumPop: d3.sum(v, (d) => d.pop), sumVx: d3.sum(v, (d) => d.nb_vx), sumE: d3.sum(v, (d) => d.e) }), (d) => d.l ); // 2. Find the sub-group with the maximum nbCom const [topL, topVal] = d3.greatest(subGroups, ([, v]) => v.nbCom); // 3. Return the flattened object with totals return { ComType: type, // catégorie de communes ComSum: d3.sum(subGroups, ([, v]) => v.nbCom), // Nb de communes dans la catégorie liste: topL, // Nom du candidat ou la liste arrivée en tête nbComliste: topVal.nbCom, //Nb de communes ou la liste est arrivée en tête sumVx: topVal.sumVx, // nb de voix obtenu par la liste dans les communes ou la liste est arrivée en tête sumE: topVal.sumE, // nb de votants dans les communes ou le candidat ou la liste est arrivée en tête totalPop: d3.sum(subGroups, ([, v]) => v.sumPop) // population de l'ensemble de commune }; }) .sort((a, b) => d3.ascending(a.ComType, b.ComType))38:T626,/*style = html``*/39:[{"id":"d37f675aec62b0794d5673eeb5525164cc58af69a41194c6a9025a3bfaf08900ea58f31edf579040944600d757f39d3b8919ba49224b542fd55cbbca128b3e50","href":"https://static.observableusercontent.com/files/d37f675aec62b0794d5673eeb5525164cc58af69a41194c6a9025a3bfaf08900ea58f31edf579040944600d757f39d3b8919ba49224b542fd55cbbca128b3e50","name":"merged_elections_P_E_R1@1.geojson","type":"application/geo+json","lastModified":1770644015516.487,"size":24032190}] 2f:{"id":"0bfc99293a5f07aa","slug":"politoscope_2026","title":"Politoscope_2026","thumbnail":"5b509bb17a388d249cd14ed3e11273ddae746f54563d01c6d07aca5af2d8613f","access_level":"public","create_time":"$D2026-02-09T10:46:15.589Z","update_time":"$D2026-03-05T11:55:01.409Z","view_time":null,"first_public_time":"$D2026-02-12T20:29:39.800Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":"starter_2024"},"version":8795,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null}],"members":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null,"role":"editor"},{"type":"team","id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"635978eee692106d","slug":"projets","title":"1- Projets","owner":{"id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer"}},"type":"notebook","body":{"title":"Politoscope_2026","cells":[{"id":504,"value":"md`# Politoscope_2026 \n## update 9 février 2026`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8759,"value":"title = md`\n## Candidats ou listes arrivés en tête aux élections présidentielles et européennes de 1999 à 2024 pour toutes les communes de France métropolitaine.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8763,"value":"md`\n## L'interface mapboxgl permet une navigation fluide et rapide pour explorer finement les données. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":497,"value":"viewof year = Inputs.radio(\n [\n \"1999\",\n \"2002\",\n \"2004\",\n \"2007\",\n \"2009\",\n \"2012\",\n \"2014\",\n \"2017\",\n \"2019\",\n \"2022\",\n \"2024\"\n ],\n {\n label: \"Année de l'élection\",\n value: IHM.year.toString(),\n format: (x) => x // Garde l'affichage sous forme de texte\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8427,"value":"viewof as = autoSelect(Allcommunes, {\n label: \"\",\n placeholder: \"Sélectionnez un nom de commune\",\n value: \"\",\n fontSize: \"1rem\", // Encore plus grand si nécessaire\n color: \"black\", // Orange foncé par exemple\n description:\n \"Saisir les premières lettres de la commune et sélectionner dans la liste\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2228,"value":"legend = md`

\n Front-de-Gauche / PC / EXT-Gauche / FI\t \n PS / Union-de-la-Gauche / Divers-Gauche \n Europe-Ecologie-les-Verts \n Union-du-Centre / LREM / MoDem \n RPR / UMP / LR / Div-Droite / CPT\n Front-National / Rassemblement-National / Ext-Droite \n Autres listes\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5514,"value":"viewof titre = {\n var container = html`

`\n var content = html`\n ${container}`\n yield content\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8771,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2070,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2463,"value":"titre_chart = md`## Liste en tête dans le plus grand nombre de communes par catégorie de commune`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8448,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2470,"value":"md`

Fonctions

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5216,"value":"dotFormat = function (num) {\n return d3.format(\",\")(num).replace(/,/g, \" \");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5329,"value":"label = d3\n .scaleOrdinal()\n .domain([\"99\", \"02\", \"04\", \"07\", \"09\", \"12\", \"14\", \"17\", \"19\", \"22\"])\n .range([\n \"EUROPEENNES 1999\",\n \"PRESIDENTIELLE 2002 (1er Tour)\",\n \"EUROPEENNES 2004\",\n \"PRESIDENTIELLE 2007 (1er Tour)\",\n \"EUROPEENNES 2009\",\n \"PRESIDENTIELLE 2012 (1er Tour)\",\n \"EUROPEENNES 2014\",\n \"PRESIDENTIELLE 2017 (1er Tour)\",\n \"EUROPEENNES 2019\",\n \"PRESIDENTIELLE 2022 (1er Tour)\",\n \"EUROPEENNES 2024\"\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2347,"value":"colorListe = d3\n .scaleOrdinal()\n .domain(color.map((d) => d[0]))\n .range(color.map((d) => d[1]))\n .unknown(\"#888888\") // Couleur par défaut si le nom n'est pas trouvé","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2373,"value":"hex2rgba = (hex, alpha = 1) => {\n const [r, g, b] = hex.match(/\\w\\w/g).map(x => parseInt(x, 16));\n return `rgba(${r},${g},${b},${alpha})`;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2371,"value":"stroke_scale = d3.scaleThreshold()\n .domain([0,3000, 10000, 80000, 2000000])\n .range([.5,.75,1.5,2,3,4]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2375,"value":"radiusScale =d3.scaleLinear()\n\t\t\t.domain([1, 3000000])\n\t\t\t.range([.1,300])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2335,"value":"type_com_bar = d3.scaleThreshold()\n .domain([0,500,1500, 5000, 10000,30000,100000, 2500000])\n .range([\"0\",\"G: < 500 hab\",\"F: 500-1500 hab\",\"E: 1500-5000 hab\",\"D: 5000 - 10k hab\",\"C: 10k-30k hab\",\"B: 30k-100k hab\", \"A: >100k hab\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2359,"value":"x = d3.scaleLog()\n\t\t\t.domain([1, 10000000])\n\t\t\t.range([margin_scatter.left, width - margin_scatter.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2360,"value":"y = d3.scaleLinear()\n\t\t\t.domain([0, 100])\n\t\t\t.range([height - margin_scatter.bottom, margin_scatter.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2341,"value":"md`## Auto Selection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1025,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1003,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2475,"value":"md`

Paramétrage graphiques

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2367,"value":"height=800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2352,"value":"margin = ({top: 12, right: 10, bottom: 26, left: 26})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2364,"value":"margin_scatter = ({top: 20, right: 20, bottom: 30, left: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2388,"value":"margin_bar = ({ top: 40, right: 0, bottom: 25, left: 90 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2390,"value":"height_bar = processedData.length * 25 + margin.top + margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2393,"value":"width_bar = 1000 // default 975 !","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1300,"value":"md`

Gestion de l'interface

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3222,"value":"blankStyle = {\n return {\"version\":8,\"name\":\"Blank\",\"center\":[0,0],\"zoom\":0,\"sources\":{},\"sprite\":\"file://roblabs.com/sprite\",\"glyphs\":\"file://roblabs.com/fonts/mapbox/{fontstack}/{range}.pbf\",\"layers\":[{\"id\":\"background\",\"type\":\"background\",\"paint\":{\"background-color\":\"rgba(255,255,255,1)\"}}],\"id\":\"blank\"} \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6127,"value":"IHM = ({\n year: +years.at(-1),\n zoomValue: 4.7,\n long: 0.5,\n lat: 47,\n as: \"\",\n pop_com: 0,\n VE_com: 0,\n fly: 0,\n cross: 0,\n reset: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6135,"value":"{if (as !== IHM.as) {\n const ville = Mapcommunes.get(as)\n if (ville === undefined) {\n IHM.fly=1\n IHM.year = year\n IHM.zoomValue = 4.7\n IHM.long = 0.5\n IHM.lat = 47\n IHM.as = as\n IHM.pop_com = 0\n IHM.VE_com = 0\n \n }\n else {\n IHM.fly=1\n IHM.cross=1\n IHM.reset=0\n IHM.year = year\n IHM.zoomValue = 11\n IHM.long = ville.coord[0]\n IHM.lat = ville.coord[1]\n IHM.as = as\n IHM.pop_com = ville.pop_com\n IHM.VE_com = ville.VE_com\n \n }\n dispatch.call('input')\n return IHM\n}\n\nelse if (year !== IHM.year) {\n IHM.year = year\n IHM.fly=0\n dispatch.call('input')\n return IHM\n}\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3030,"value":"dispatch = d3.dispatch('input')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1473,"value":"year_select= year.toString().slice(2,4) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":515,"value":"md`

Data

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2976,"value":"years = [\n \"1999\",\n \"2002\",\n \"2004\",\n \"2007\",\n \"2009\",\n \"2012\",\n \"2014\",\n \"2017\",\n \"2019\",\n \"2022\",\n \"2024\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2346,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8377,"value":"data = FileAttachment(\"merged_elections_P_E_R1@1.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":518,"value":"// remove arrondissement for which no election data available\nfilterData = data.features\n .filter((feature) => {\n const { NOM, POP } = feature.properties;\n // .includes() est plus lisible que lastIndexOf() == -1\n return !NOM.includes(\"ARRONDISSEMENT\");\n // Si vous voulez réactiver la population : return !NOM.includes(\"ARRONDISSEMENT\") && POP > 3500;\n })\n .sort((a, b) => b.properties.POP - a.properties.POP)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2337,"value":"data_series = filterData.map(function(e) {\n return { \n nb_vx : Math.round((e.properties[\"VE\"+year_select]/100)*(e.properties[\"E\"+year_select])), // Nb of vote in the commune for first place candidate or list \n e : e.properties[\"E\"+year_select],\n l : e.properties[\"L\"+year_select],\n pop : e.properties.POP,\n type : type_com_bar(e.properties.POP) //required to create topology of communes \n }}).sort(function (b, a) {\n if (a.type > b.type) return -1;\n else if (a.type < b.type) return 1;\n return 0; // sort by list type\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8590,"value":"Allcommunes = communes\n .map((c) => c.nom_insee)\n .sort((a, b) => a.localeCompare(b))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6123,"value":"Mapcommunes = new Map(communes.map(c => [c.nom_insee, c]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":613,"value":"communes = filterData\n .map(function (e) {\n return {\n nom_insee: e.properties.NOM + \" - \" + e.properties.INSEE.slice(0, 2),\n pop_com: e.properties.POP,\n VE_com: e.properties[\"VE22\"],\n coord: [e.geometry.coordinates[0], e.geometry.coordinates[1]]\n };\n })\n .sort(function (a, b) {\n if (a.nom_insee < b.nom_insee) return -1;\n else if (a.nom_insee > b.nom_insee) return 1;\n return 0;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":521,"value":"resElection=[{type: \"FeatureCollection\", crs : {type : \"name\", properties : {name: \"urn:ogc:def:crs:OGC:1.3:CRS84\" }},features :filterData }][0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8692,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"md`

Librairies

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"mapboxgl = {\n const gl = await require(\"maplibre-gl@1.14.0\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoidGV0ZW4zMSIsImEiOiJjamhnZmdyYTUxYjhmMnpwZWM5djRlNnlxIn0.TUYseK-FpxGX407XgInmcw\";\n const href = await require.resolve(\n \"maplibre-gl@1.14.0/dist/maplibre-gl.css\"\n );\n document.head.appendChild(html``);\n }\n return gl;\n}\n/*\nmaplibregl = {\n // 1. Importation du module et du CSS en parallèle\n const [gl] = await Promise.all([\n import(\"https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js?module\"),\n html``\n .onload\n ]);\n\n // MapLibre n'a pas besoin de gl.accessToken.\n // Si vous utilisez un service comme MapTiler ou Stadia,\n // la clé se mettra dans l'URL du style, pas ici.\n\n return gl.default; // On retourne l'export par défaut\n}*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"md`

Style

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8522,"value":"# Notes : \n## Si le jeu de données est mis à jour, les cellules suivantes sont à modifier : \n## - years : qui doit contenir toutes les dates d'élection présentent dans le jeu de données [\"1999\", \"2002\"..\n## - var xlabel : ajuster le nombre d'élections présent dans le jeu de données et le type d'élection associé (E: Européenne , P présidentielle)\n## - color : s'assurer qu'aux nouveaux candidats ou listes, il existe bien une couleur politique associée. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body"