${d.L.slice(1)} : ${d.VE}% Nb de voix : ${d.E}

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

Podium des élections européennes et présidentielles (1999 - 2024).

LFI ou PC Écologistes PS Centre Droite Ext droite

`33:T1966,graphEur = Plot.plot( (() => { const maxVE = d3.max(data_graph_eur, (d) => d.VE); const maxScale = 0.3; return { width: 1200, height: 500, 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: true, label: "Élection", domain: [1997, 2026], tickSize: 0, tickRotate: 0, tickFormat: (d) => { const labels = { 1997: " ", 1999: "E 1999", 2004: "E 2004", 2009: "E 2009", 2014: "E 2014", 2019: "E 2019", 2024: "E 2024", 2026: " " }; return labels[d] || d; }, ticks: [1997, 1999, 2004, 2009, 2014, 2019, 2024, 2026] }, y: { grid: true, ticks: 5, label: "Score en % →", domain: [0, 50] }, marks: [ // ------------------------------------------- titre ----------------------- Plot.text( [ { x: 2010, y: 50, label: "Podium des européennes à " + name.split(" -")[0] + population } ], { x: "x", y: "y", text: "label", textAnchor: "middle", dy: -20, fontSize: 30, fontWeight: "normal", fill: "#9c5903" } ), // ------------------------------------------- Ballons --------------------- Plot.ruleY([0]), Plot.ruleY([50]), Plot.ruleX([1997]), Plot.ruleX([2026]), data_graph_eur .sort((a, b) => a.VE - b.VE) .map((d) => Plot.dot([d], { x: "year", y: "VE", fill: "L", render: (index, scales, values, dimensions, context) => { const { x, y, color } = scales; // CALCUL PROPORTIONNEL À LA SURFACE : // On utilise Math.sqrt pour que l'aire soit proportionnelle à la valeur const s = Math.sqrt(d.VE / maxVE) * maxScale; const xPos = x(d.year + (d.R - range1) * range); const yPos = y(d.VE + 30 * s); const fillColor = color(d.L); return htl.svg` ${d.L.slice(1)} : ${d.VE}% Nb de voix : ${d.E} `; } }) ), data_graph_eur .sort((a, b) => a["VE"] - b["VE"]) .map((d) => Plot.dot([d], { x: "year", y: "VE", fill: "L", render: (index, scales) => { const { x, y, color } = scales; const xPos = x(d.year + (d.R - range1) * range); const yPos = y(d["VE"]); const s = Math.sqrt(d["VE"] / maxVE) * maxScale; //const fillColor = "white"; const fillColor = color(d.L); const size = 6 * Math.sqrt(d["VE"]); return htl.svg` ${d.L.slice(1)} : ${d["VE"]}% ${d.P} ${d.N} `; } }) ) ] }; })() )34:T19cc,graphPres = Plot.plot( (() => { const maxVE = d3.max(data_graph_pres, (d) => d.VE); const maxScale = 0.3; return { width: 1200, height: 500, 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: true, label: "Élection", domain: [1997, 2026], tickSize: 0, tickRotate: 0, tickFormat: (d) => { const labels = { 1997: " ", 2002: "P 2002", 2007: "P 2007", 2012: "P 2012", 2017: "P 2017", 2022: "P 2022", 2026: " " }; return labels[d] || d; }, // Adding ticks to ensure your specific years show up //ticks: data.map((d) => d.year), ticks: [1997, 2002, 2007, 2012, , 2017, 2022, 2026] }, y: { grid: true, ticks: 5, label: "Score en % →", domain: [0, 50] }, marks: [ // ------------------------------------------- titre ----------------------- Plot.text( [ { x: 2010, y: 50, label: "Podium des présidentielles à " + name.split(" -")[0] + population } ], { x: "x", y: "y", text: "label", textAnchor: "middle", dy: -20, fontSize: 30, fontWeight: "normal", fill: "#9c5903" } ), // ------------------------------------------- Ballons --------------------- Plot.ruleY([0]), Plot.ruleY([50]), Plot.ruleX([1997]), Plot.ruleX([2026]), data_graph_pres .sort((a, b) => a.VE - b.VE) .map((d) => Plot.dot([d], { x: "year", y: "VE", fill: "L", render: (index, scales, values, dimensions, context) => { const { x, y, color } = scales; // CALCUL PROPORTIONNEL À LA SURFACE : // On utilise Math.sqrt pour que l'aire soit proportionnelle à la valeur const s = Math.sqrt(d.VE / maxVE) * maxScale; const xPos = x(d.year + (d.R - range1) * range); const yPos = y(d.VE + 30 * s); const fillColor = color(d.L); return htl.svg` ${d.L} : ${d.VE}% Nb de voix : ${d.E} `; } }) ), data_graph_pres .sort((a, b) => a["VE"] - b["VE"]) .map((d) => Plot.dot([d], { x: "year", y: "VE", fill: "L", render: (index, scales) => { const { x, y, color } = scales; const xPos = x(d.year + (d.R - range1) * range); const yPos = y(d["VE"]); const s = Math.sqrt(d["VE"] / maxVE) * maxScale; //const fillColor = "white"; const fillColor = color(d.L); const size = 6 * Math.sqrt(d["VE"]); return htl.svg` ${d.L.slice(1)} : ${d["VE"]}% ${d.P} ${d.N} `; } }) ) ] }; })() )35: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"] ]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":"aa178711bdfabb4eae34cde1b37af258fd0a682a15f77bfbd8440dbb3a4c29aa3f8ff4277456af7ed132db9361ccd626279b91e2d1e3f29346c7d7905aec8cd6","href":"https://static.observableusercontent.com/files/aa178711bdfabb4eae34cde1b37af258fd0a682a15f77bfbd8440dbb3a4c29aa3f8ff4277456af7ed132db9361ccd626279b91e2d1e3f29346c7d7905aec8cd6","name":"merged_gdf_EP_R1_3_filter_1@2.parquet","type":"application/octet-stream","lastModified":1772641228856.042,"size":5156446}] 30:{"id":"29e894c1f2a5264a","slug":"trajectoires-electorales","title":" Trajectoires Électorales","thumbnail":"a9a8de5256a3f3606c72a31f7ce5772b58ea0cc1b9391a33788f13d84637ce44","access_level":"public","create_time":"$D2026-03-04T15:38:10.658Z","update_time":"$D2026-03-31T13:25:20.753Z","view_time":null,"first_public_time":"$D2026-03-05T11:26:03.985Z","has_unpublished_edits":null,"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":1083,"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":3,"collection":{"id":"635978eee692106d","slug":"projets","title":"1- Projets","owner":{"id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer"}},"type":"notebook","body":{"titling":"auto","title":" Trajectoires Électorales","cells":[{"id":0,"value":"# Trajectoires Électorales\n\n## 25 ans de podiums électoraux en France métropolitaine. \nAnalyse des votes des élections présidentielles et européennes (1999 -2024) au sein des ${nb_communes} communes de France metropolitaine","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"note","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":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":559,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"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(\"merged_gdf_EP_R1_3_filter_1@2.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.VE,\n E: Math.round(d.E),\n year: +d.year,\n nom_insee: d.NOM + \" - \" + d.INS.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 = (\n await election_db.query(\n `\n SELECT *\n FROM election\n WHERE NOM = ?\n`,\n [name.split(\" - \")[0]]\n )\n).map((d) => ({\n ...d\n}))","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, {\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 electionEurop = [1999, 2004, 2009, 2014, 2019, 2024];\n return data_graph.filter((d) => electionEurop.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.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, INS\n FROM election\n ORDER BY NOM\n `)\n).map((d) => ({\n NOM: d.NOM,\n nom_insee: `${d.NOM} - ${d.INS.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?.[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"