${d.L.slice(1)} : ${d["V/E"]}% ${d.P} ${d.N}

2c:null 2d:["$","title",null,{"children":"Trajectoires Électorales Municipales | Alain Ottenheimer | Observable"}] 32:T89f,titre = html`

Podium des élections municipales (2001 - 2026).

LFI ou PC Écologistes PS Centre Droite Ext droite divers

`33:T1cdd,graphMunT1 = Plot.plot( (() => { const maxVE = d3.max(data_graph_T1, (d) => d["V/E"]); const maxScale = 0.3; return { width: 1200, height: 600, marginLeft: 80, marginBottom: 60, marginTop: 60, style: { background: "#F5F5F5", color: "#000", fontSize: "23px" }, color: { domain: color.map((d) => d[0]), range: color.map((d) => d[1]), unknown: "#888888" }, x: { grid: false, label: "Élection", domain: [1997, 2028], tickSize: 0, tickRotate: 0, tickFormat: (d) => { const labels = { 1998: " ", 2001: "M 2001", 2008: "M 2008", 2014: "M 2014", 2020: "M 2020", 2026: "M 2026", 2024: " " }; return labels[d] || d; }, ticks: [1998, 2001, 2008, 2014, 2020, 2026] }, y: { grid: true, ticks: 5, label: "Score en % →", domain: [-20, 150], ticks: [0, 20, 40, 60, 80, 100] }, marks: [ // ------------------------------------------- titre ----------------------- Plot.text( [ { x: 2010, y: 150, label: "Podium des municipales au 1ᵉʳ tour à " + name.split(" -")[0] + population } ], { x: "x", y: "y", text: "label", textAnchor: "left", dy: -20, fontSize: 30, fontWeight: "normal", fill: "#9c5903" } ), // ------------------------------------------- svg --------------------- Plot.ruleY([-20, 150]), Plot.ruleX([2001, 2008, 2014, 2020, 2026], { y1: -20, y2: -10 }), Plot.ruleX([1997, 2028]), data_graph_T1 .sort((a, b) => a["V/E"] - b["V/E"]) .map((d) => Plot.dot([d], { x: "year", y: "V/E", fill: "L", render: (index, scales, values, dimensions, context) => { const { x, y, color } = scales; const xPos = x(d.year + (d.R - range1) * range); const yPos = y(d["V/E"]); // CALCUL PROPORTIONNEL À LA SURFACE : // On utilise Math.sqrt pour que l'aire soit proportionnelle à la valeur const s = (Math.sqrt(d["V/E"] / maxVE) * maxScale) / 30; //const s = 0.01; const fillColor = color(d.L); return htl.svg` ${d.L.slice(1)} : ${d["V/E"]}% ${d.P} ${d.N} `; } }) ), data_graph_T1 .sort((a, b) => a["V/E"] - b["V/E"]) .map((d) => Plot.dot([d], { x: "year", y: "V/E", fill: "L", render: (index, scales) => { const { x, y, color } = scales; const xPos = x(d.year + (d.R - range1) * range) + 20; const yPos = y(d["V/E"]); const s = Math.sqrt(d["V/E"] / maxVE) * maxScale; const fillColor = color(d.L); const size = 6 * Math.sqrt(d["V/E"]); return htl.svg` ${d.L.slice(1)} : ${d["V/E"]}% ${d.P} ${d.N} `; } }) ), data_graph_T1 .sort((a, b) => a["V/E"] - b["V/E"]) .map((d) => Plot.dot([d], { x: "year", y: "V/E", fill: "L", render: (index, scales) => { const { x, y, color } = scales; const xPos = x(d.year + (d.R - range1) * range); const yPos = y(d["V/E"]); const s = 0.5; const fillColor = color(d.L); return htl.svg` ${d.L.slice(1)} : ${d["V/E"]}% ${d.P} ${d.N} ${d.P} ${d.N} `; } }) ) ] }; })() )34:T1cb2,graphMunT = Plot.plot( (() => { const maxVE = d3.max(data_graph_T2, (d) => d["V/E"]); const maxScale = 0.3; return { width: 1200, height: 600, marginLeft: 80, marginBottom: 60, marginTop: 60, style: { background: "#F5F5F5", color: "#000", fontSize: "23px" }, color: { domain: color.map((d) => d[0]), range: color.map((d) => d[1]), unknown: "#888888" }, x: { grid: false, label: "Élection", domain: [1997, 2028], tickSize: 0, tickRotate: 0, tickFormat: (d) => { const labels = { 1998: " ", 2001: "M 2001", 2008: "M 2008", 2014: "M 2014", 2020: "M 2020", 2026: "M 2026", 2028: " " }; return labels[d] || d; }, ticks: [1998, 2001, 2008, 2014, 2020, 2026] }, y: { grid: true, ticks: 5, label: "Score en % →", domain: [-20, 150], ticks: [0, 20, 40, 60, 80, 100] }, marks: [ // ------------------------------------------- titre ----------------------- Plot.text( [ { x: 2010, y: 150, label: "Podium des municipales au 2ᵉ tour à " + name.split(" -")[0] + population } ], { x: "x", y: "y", text: "label", textAnchor: "left", dy: -20, fontSize: 30, fontWeight: "normal", fill: "#9c5903" } ), // ------------------------------------------- svg --------------------- Plot.ruleY([-20, 150]), Plot.ruleX([2001, 2008, 2014, 2026], { y1: -20, y2: -10 }), Plot.ruleX([1997, 2028]), data_graph_T2 .sort((a, b) => a["V/E"] - b["V/E"]) .map((d) => Plot.dot([d], { x: "year", y: "V/E", fill: "L", render: (index, scales, values, dimensions, context) => { const { x, y, color } = scales; const xPos = x(d.year + (d.R - range1) * range); const yPos = y(d["V/E"]); // CALCUL PROPORTIONNEL À LA SURFACE : // On utilise Math.sqrt pour que l'aire soit proportionnelle à la valeur const s = (Math.sqrt(d["V/E"] / maxVE) * maxScale) / 30; const fillColor = color(d.L); return htl.svg` ${d.L.slice(1)} : ${d["V/E"]}% ${d.P} ${d.N} `; } }) ), data_graph_T2 .sort((a, b) => a["V/E"] - b["V/E"]) .map((d) => Plot.dot([d], { x: "year", y: "V/E", fill: "L", render: (index, scales) => { const { x, y, color } = scales; const xPos = x(d.year + (d.R - range1) * range) + 20; const yPos = y(d["V/E"]); const s = Math.sqrt(d["V/E"] / maxVE) * maxScale; const fillColor = color(d.L); const size = 6 * Math.sqrt(d["V/E"]); return htl.svg` ${d.L.slice(1)} : ${d["V/E"]}% ${d.P} ${d.N} `; } }) ), data_graph_T2 .sort((a, b) => a["V/E"] - b["V/E"]) .map((d) => Plot.dot([d], { x: "year", y: "V/E", fill: "L", render: (index, scales) => { const { x, y, color } = scales; const xPos = x(d.year + (d.R - range1) * range); const yPos = y(d["V/E"]); const s = 0.5; const fillColor = color(d.L); return htl.svg` ${d.L.slice(1)} : ${d["V/E"]}% ${d.P} ${d.N} ${d.P} ${d.N} `; } }) ) ] }; })() )35:T50a,color = [ ["LAUT", "#888888"], ["LC", "#888888"], ["LCMD", "#F99317"], ["LCOM", "#F99317"], ["LCOP", "#ef3b2c"], ["LCP", "#888888"], ["LCPT", "#3690c0"], ["LCY", "#fa9fb5"], ["LDD", "#3690c0"], ["LDG", "#fa9fb5"], ["LDIV", "#888888"], ["LDLF", "#888888"], ["LDR", "#3690c0"], ["LDV", "#888888"], ["LDVC", "#3690c0"], ["LDVD", "#3690c0"], ["LDVG", "#fa9fb5"], ["LDVV", "#6DE070"], ["LEC", "#6DE070"], ["LECO", "#6DE070"], ["LENS", "#F99317"], ["LEXD", "#0A0A0A"], ["LEXG", "#ef3b2c"], ["LFG", "#ef3b2c"], ["LFI", "#ef3b2c"], ["LFN", "#0A0A0A"], ["LGA", "#fa9fb5"], ["LGC", "#ef3b2c"], ["LGJ", "#888888"], ["LLO", "#ef3b2c"], ["LLR", "#3690c0"], ["LMAJ", "#3690c0"], ["LMC", "#3690c0"], ["LMDM", "#888888"], ["LNC", "#888888"], ["LO-LCR", "#ef3b2c"], ["LPC", "#ef3b2c"], ["LPG", "#fa9fb5"], ["LPS", "#fa9fb5"], ["LRDG", "#888888"], ["LREG", "#888888"], ["LREM", "#F99317"], ["LRG", "#888888"], ["LRN", "#0A0A0A"], ["LRPR", "#3690c0"], ["LSOC", "#fa9fb5"], ["LUC", "#F99317"], ["LUD", "#3690c0"], ["LUDF", "#F99317"], ["LUDI", "#F99317"], ["LUG", "#fa9fb5"], ["LUMP", "#3690c0"], ["LVE", "#6DE070"], ["LVEC", "#6DE070"], ["LXD", "#0A0A0A"], ["LXG", "#ef3b2c"], ["-", "#888888"] ]36: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; }37:[{"id":"5c33425c8773612774b5c423670c80354fcec413a56f2a1249fb841449f0831644fe94e5cfdee2b97e4dcd5e7d49fe9a837153c7f9e4369c9e907cf7f32fe737","href":"https://static.observableusercontent.com/files/5c33425c8773612774b5c423670c80354fcec413a56f2a1249fb841449f0831644fe94e5cfdee2b97e4dcd5e7d49fe9a837153c7f9e4369c9e907cf7f32fe737","name":"agregation_elect_municipale@12.parquet","type":"application/octet-stream","lastModified":1774434778582.579,"size":819507}] 30:{"id":"ffdcc0a486fd1e99","slug":"trajectoires-electorales-municipales","title":"Trajectoires Électorales Municipales","thumbnail":"356b1eb1e77294d523ea4c39a076014be9ab765e50514d988fe2c705636fac3a","access_level":"public","create_time":"$D2026-03-07T21:39:01.340Z","update_time":"$D2026-04-29T16:34:16.446Z","view_time":null,"first_public_time":"$D2026-03-09T16:44:37.104Z","has_unpublished_edits":null,"fork":{"id":"29e894c1f2a5264a","slug":"trajectoires-electorales","title":" Trajectoires Électorales","owner":{"id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer"}},"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":1392,"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,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"635978eee692106d","slug":"projets","title":"1- Projets","owner":{"id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer"}},"type":"notebook","body":{"titling":"auto","title":"Trajectoires Électorales Municipales","cells":[{"id":1284,"value":"title = md`# Trajectoires Électorales Municipales\n### 25 ans de podiums électoraux en France métropolitaine\n\n---\n\n**Analyse des scrutins municipaux (2001, 2008, 2014, 2020 et 2026)** Portant sur les **${nb_communes}** communes de plus de 3 500 habitants en France métropolitaine.\n\n> ### 📝 Notes\n> * **Seuil démographique :** Les données exhaustives concernent exclusivement les communes dont la population excède **3 500 habitants**.\n> * **Scrutin de 2001 :** Le jeu de données disponible ne mentionne pas l'identité nominative des candidats.\n> * **Nuances politiques :** L'attribution des couleurs politiques revêt un caractère subjectif, les candidats représentant fréquemment des **listes d'union** dès le premier tour.\n\n---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"viewof name = 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: `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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"Titre","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"viewof range = Inputs.range([0, 2], {\n label: \"réglage_latéral ballons\",\n step: 0.1,\n value: 0.8\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"viewof range1 = Inputs.range([0, 5], {\n label: \"Réglage latéral echelle\",\n step: 0.5,\n value: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"_______________________________________________________________________","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":948,"value":"election_db = DuckDBClient.of({\n election: FileAttachment(\"agregation_elect_municipale@12.parquet\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"data = {\n const data = await election_db.query(`SELECT * FROM election `);\n const temp = data\n .map(function (d) {\n return {\n ...d,\n POP: +d.POP,\n VE: +d[\"V/E\"],\n E: Math.round(d.E),\n year: +d.year,\n nom_insee: d.NOM + \" - \" + d.INSEE.slice(0, 2)\n //date: new Date(+d.year, 5, 30) // Month is 0-based → 5 = June\n };\n })\n .sort(function (a, b) {\n if (a.NOM < b.NOM) return -1;\n if (a.NOM > b.NOM) return 1;\n return 0;\n });\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"data_graph_T1 = (\n await election_db.query(\n `\n SELECT *\n FROM election\n WHERE NOM = ? AND tour = 1\n `,\n [name.split(\" - \")[0]]\n )\n)\n .map((d) => ({\n ...d,\n P: d.P == 0 ? \"\" : d.P,\n N: d.N == 0 ? \"\" : d.N,\n S: d.S == 0 ? \"\" : d.S\n }))\n // filtrage supplémentaire sur les 2 premiers chiffres d'INSEE\n .filter((d) => String(d.INSEE).slice(0, 2) === name.split(\" - \")[1].trim())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"viewof extrait = {\n const data = await election_db.query(`SELECT * FROM election`);\n return Inputs.table(data_graph_T1, {\n height: 200,\n layout: \"auto\",\n maxWidth: 500\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1258,"value":"data_graph_T2 = (\n await election_db.query(\n `\n SELECT *\n FROM election\n WHERE NOM = ? and tour == 2\n`,\n [name.split(\" - \")[0]]\n )\n)\n .map((d) => ({\n ...d,\n P: d.P == 0 ? \"\" : d.P,\n N: d.N == 0 ? \"\" : d.N,\n S: d.S == 0 ? \"\" : d.S\n }))\n .filter((d) => String(d.INSEE).slice(0, 2) === name.split(\" - \")[1].trim())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1260,"value":"viewof extrait1 = {\n const data = await election_db.query(`SELECT * FROM election`);\n return Inputs.table(data_graph_T2, {\n height: 200,\n layout: \"auto\",\n maxWidth: 500\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"_______________________________________________________________________","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":566,"value":"data_graph_eur = {\n const election = [2001, 2008, 2014, 2020];\n return data_graph_T1.filter((d) => election.includes(Number(d.year)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"data_graph_pres = {\n const electionPres = [2002, 2007, 2012, 2017, 2022];\n return data_graph_T1.filter((d) => electionPres.includes(Number(d.year)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"communes = (\n await election_db.query(`\n SELECT DISTINCT NOM, INSEE\n FROM election\n ORDER BY NOM\n `)\n).map((d) => ({\n NOM: d.NOM,\n nom_insee: `${d.NOM} - ${d.INSEE.slice(0, 2)}`\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"nb_communes = Allcommunes.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"Allcommunes = [\n ...new Set(\n communes.map((c) => c.nom_insee).sort((a, b) => a.localeCompare(b))\n )\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"population = {\n const popValue = data_graph_T1?.[0]?.POP;\n return popValue\n ? ` (${new Intl.NumberFormat(\"fr-FR\").format(popValue)} h)`\n : \"\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"_______________________________________________________________________","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":62,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"