En cartes : les résultats des européennes projetés dans les 577 circonscriptions législatives en France (2024)

En cartes: les résultats des européennes projetés dans les 577circonscriptions législatives en France (1)
  • Les Décodeurs
  • Élections européennes 2024

ParAdrien Sénécat, Manon Romain, Raphaëlle Aubert et Pierre Breteau

Publié le 12 juin 2024 à 18h51, modifié le 13 juin 2024 à 14h27

Temps de Lecture 2 min.

  • Partager
    • Partager sur Facebook
    • Envoyer par e-mail
    • Partager sur Linkedin

En cartesVisualisez les résultats du scrutin du 9juin dans les circonscriptions législatives françaises. Un état des lieux qui ne préjuge en rien du visage de la future Assemblée nationale.

C’est un découpage qui n’a pas de sens électoral, mais qui sera tout de même scruté attentivement entre les deux élections, européennes et législatives, séparées par à peine trois semaines. Le ministère de l’intérieur a publié, mardi 11juin, les résultats des élections européennes en France à l’échelon des 577circonscriptions législatives, c’est-à-dire les unités territoriales correspondant à l’élection des députés.

Cette présentation du vote du dimanche 9juin est à première vue très encourageante pour le Rassemblement national (RN) de Jordan Bardella, dont la liste est arrivée en tête dans 457circonscriptions.

La carte ci-dessous présente, à l’échelle de chaque circonscription, la nuance politique arrivée en tête et les résultats des principaux partis lors des européennes.

${isMobile ? `${text.zm}` : `${text.z}`}

${text.d}

`; } fillHtml(); // Fetch topojson d3.json("https://assets-decodeurs.lemonde.fr/decodeurs/assets/legislatives2022/circos.json").then((topoCircos) => { // Detect dark mode let isDark = document.querySelector('html').hasAttribute("data-color-mode") && (document.querySelector('html').getAttribute("data-color-mode") == "dark"); const groupedColors = isDark ? couleurs_dark : couleurs; const daltColors = couleurs_d; // Tooltip and url data const deptDict = { "001": { "d": "Ain", "l": "de l\'", "url": "auvergne-rhone-alpes/ain/" }, "002": { "d": "Aisne", "l": "de l\'", "url": "hauts-de-france/aisne/" }, "003": { "d": "Allier", "l": "de l\'", "url": "auvergne-rhone-alpes/allier/" }, "004": { "d": "Alpes-de-Haute-Provence", "l": "des ", "url": "provence-alpes-cote-d-azur/alpes-de-haute-provence/" }, "005": { "d": "Hautes-Alpes", "l": "des ", "url": "provence-alpes-cote-d-azur/hautes-alpes/" }, "006": { "d": "Alpes-Maritimes", "l": "des ", "url": "provence-alpes-cote-d-azur/alpes-maritimes/" }, "007": { "d": "Ardèche", "l": "d\'", "url": "auvergne-rhone-alpes/ardeche/" }, "008": { "d": "Ardennes", "l": "des ", "url": "grand-est/ardennes/" }, "009": { "d": "Ariège", "l": "d\'", "url": "occitanie/ariege/" }, "010": { "d": "Aube", "l": "de l\'", "url": "grand-est/aube/" }, "011": { "d": "Aude", "l": "de l\'", "url": "occitanie/aude/" }, "012": { "d": "Aveyron", "l": "de l\'", "url": "occitanie/aveyron/" }, "013": { "d": "Bouches-du-Rhône", "l": "des ", "url": "provence-alpes-cote-d-azur/bouches-du-rhone/" }, "014": { "d": "Calvados", "l": "du ", "url": "normandie/calvados/" }, "015": { "d": "Cantal", "l": "du ", "url": "auvergne-rhone-alpes/cantal/" }, "016": { "d": "Charente", "l": "de la ", "url": "nouvelle-aquitaine/charente/" }, "017": { "d": "Charente-Maritime", "l": "de la ", "url": "nouvelle-aquitaine/charente-maritime/" }, "018": { "d": "Cher", "l": "du ", "url": "centre-val-de-loire/cher/" }, "019": { "d": "Corrèze", "l": "de la ", "url": "nouvelle-aquitaine/correze/" }, "021": { "d": "Côte-d'Or", "l": "de la ", "url": "bourgogne-franche-comte/cote-d-or/" }, "022": { "d": "Côtes-d'Armor", "l": "des ", "url": "bretagne/cotes-d-armor/" }, "023": { "d": "Creuse", "l": "de la ", "url": "nouvelle-aquitaine/creuse/" }, "024": { "d": "Dordogne", "l": "de la ", "url": "nouvelle-aquitaine/dordogne/" }, "025": { "d": "Doubs", "l": "du ", "url": "bourgogne-franche-comte/doubs/" }, "026": { "d": "Drôme", "l": "de la ", "url": "auvergne-rhone-alpes/drome/" }, "027": { "d": "Eure", "l": "de l\'", "url": "normandie/eure/" }, "028": { "d": "Eure-et-Loir", "l": "de l\'", "url": "centre-val-de-loire/eure-et-loir/" }, "029": { "d": "Finistère", "l": "du ", "url": "bretagne/finistere/" }, "030": { "d": "Gard", "l": "du ", "url": "occitanie/gard" }, "031": { "d": "Haute-Garonne", "l": "de la ", "url": "occitanie/haute-garonne/" }, "032": { "d": "Gers", "l": "du ", "url": "occitanie/gers/" }, "033": { "d": "Gironde", "l": "de la ", "url": "nouvelle-aquitaine/gironde/" }, "034": { "d": "Hérault", "l": "de l\'", "url": "occitanie/herault/" }, "035": { "d": "Ille-et-Vilaine", "l": "d\'", "url": "bretagne/ille-et-vilaine/" }, "036": { "d": "Indre", "l": "de l\'", "url": "centre-val-de-loire/indre/" }, "037": { "d": "Indre-et-Loire", "l": "de l\'", "url": "centre-val-de-loire/indre-et-loire/" }, "038": { "d": "Isère", "l": "de l\'", "url": "auvergne-rhone-alpes/isere/" }, "039": { "d": "Jura", "l": "du ", "url": "bourgogne-franche-comte/jura/" }, "040": { "d": "Landes", "l": "des ", "url": "nouvelle-aquitaine/landes/" }, "041": { "d": "Loir-et-Cher", "l": "du ", "url": "centre-val-de-loire/loir-et-cher/" }, "042": { "d": "Loire", "l": "de la ", "url": "auvergne-rhone-alpes/loire/" }, "043": { "d": "Haute-Loire", "l": "de la ", "url": "auvergne-rhone-alpes/haute-loire/" }, "044": { "d": "Loire-Atlantique", "l": "de la ", "url": "pays-de-la-loire/loire-atlantique/" }, "045": { "d": "Loiret", "l": "du ", "url": "centre-val-de-loire/loiret/" }, "046": { "d": "Lot", "l": "du ", "url": "occitanie/lot/" }, "047": { "d": "Lot-et-Garonne", "l": "du ", "url": "nouvelle-aquitaine/lot-et-garonne/" }, "048": { "d": "Lozère", "l": "de la ", "url": "occitanie/lozere/" }, "049": { "d": "Maine-et-Loire", "l": "du ", "url": "pays-de-la-loire/maine-et-loire/" }, "050": { "d": "Manche", "l": "de la ", "url": "normandie/manche/" }, "051": { "d": "Marne", "l": "de la ", "url": "grand-est/marne/" }, "052": { "d": "Haute-Marne", "l": "de la ", "url": "grand-est/haute-marne/" }, "053": { "d": "Mayenne", "l": "de la ", "url": "pays-de-la-loire/mayenne/" }, "054": { "d": "Meurthe-et-Moselle", "l": "de la ", "url": "grand-est/meurthe-et-moselle/" }, "055": { "d": "Meuse", "l": "de la ", "url": "grand-est/meuse/" }, "056": { "d": "Morbihan", "l": "du ", "url": "bretagne/morbihan/" }, "057": { "d": "Moselle", "l": "de la ", "url": "grand-est/moselle/" }, "058": { "d": "Nièvre", "l": "de la ", "url": "bourgogne-franche-comte/nievre/" }, "059": { "d": "Nord", "l": "du ", "url": "hauts-de-france/nord/" }, "060": { "d": "Oise", "l": "de l\'", "url": "hauts-de-france/oise/" }, "061": { "d": "Orne", "l": "de l\'", "url": "normandie/orne/" }, "062": { "d": "Pas-de-Calais", "l": "du ", "url": "hauts-de-france/pas-de-calais/" }, "063": { "d": "Puy-de-Dôme", "l": "du ", "url": "auvergne-rhone-alpes/puy-de-dome/" }, "064": { "d": "Pyrénées-Atlantiques", "l": "des ", "url": "nouvelle-aquitaine/pyrenees-atlantiques/" }, "065": { "d": "Hautes-Pyrénées", "l": "des ", "url": "occitanie/hautes-pyrenees/" }, "066": { "d": "Pyrénées-Orientales", "l": "des ", "url": "occitanie/pyrenees-orientales/" }, "067": { "d": "Bas-Rhin", "l": "du ", "url": "grand-est/bas-rhin/" }, "068": { "d": "Haut-Rhin", "l": "du ", "url": "grand-est/haut-rhin/" }, "069": { "d": "Rhône", "l": "du ", "url": "auvergne-rhone-alpes/rhone/" }, "070": { "d": "Haute-Saône", "l": "de la ", "url": "bourgogne-franche-comte/haute-saone/" }, "071": { "d": "Saône-et-Loire", "l": "de la ", "url": "bourgogne-franche-comte/saone-et-loire/" }, "072": { "d": "Sarthe", "l": "de la ", "url": "pays-de-la-loire/sarthe/" }, "073": { "d": "Savoie", "l": "de la ", "url": "auvergne-rhone-alpes/savoie/" }, "074": { "d": "Haute-Savoie", "l": "de la ", "url": "auvergne-rhone-alpes/haute-savoie/" }, "075": { "d": "Paris", "l": "de ", "url": "ile-de-france/paris/" }, "076": { "d": "Seine-Maritime", "l": "de la ", "url": "normandie/seine-maritime/" }, "077": { "d": "Seine-et-Marne", "l": "de ", "url": "ile-de-france/seine-et-marne/" }, "078": { "d": "Yvelines", "l": "des ", "url": "ile-de-france/yvelines/" }, "079": { "d": "Deux-Sèvres", "l": "des ", "url": "nouvelle-aquitaine/deux-sevres/" }, "080": { "d": "Somme", "l": "de la ", "url": "hauts-de-france/somme/" }, "081": { "d": "Tarn", "l": "du ", "url": "occitanie/tarn/" }, "082": { "d": "Tarn-et-Garonne", "l": "du ", "url": "occitanie/tarn-et-garonne/" }, "083": { "d": "Var", "l": "du ", "url": "provence-alpes-cote-d-azur/var/" }, "084": { "d": "Vaucluse", "l": "du ", "url": "provence-alpes-cote-d-azur/vaucluse/" }, "085": { "d": "Vendée", "l": "de la ", "url": "pays-de-la-loire/vendee/" }, "086": { "d": "Vienne", "l": "de la ", "url": "nouvelle-aquitaine/vienne/" }, "087": { "d": "Haute-Vienne", "l": "de la ", "url": "nouvelle-aquitaine/haute-vienne/" }, "088": { "d": "Vosges", "l": "des ", "url": "grand-est/vosges/" }, "089": { "d": "Yonne", "l": "de l\'", "url": "bourgogne-franche-comte/yonne/" }, "090": { "d": "Territoire de Belfort", "l": "du ", "url": "bourgogne-franche-comte/territoire-de-belfort/" }, "091": { "d": "Essonne", "l": "de l\'", "url": "ile-de-france/essonne/" }, "092": { "d": "Hauts-de-Seine", "l": "des ", "url": "ile-de-france/hauts-de-seine/" }, "093": { "d": "Seine-Saint-Denis", "l": "de ", "url": "ile-de-france/seine-saint-denis/" }, "094": { "d": "Val-de-Marne", "l": "du ", "url": "ile-de-france/val-de-marne/" }, "095": { "d": "Val-d'Oise", "l": "du ", "url": "ile-de-france/val-d-oise/" }, "02A": { "d": "Corse-du-Sud", "l": "de ", "url": "corse/corse-du-sud/" }, "02B": { "d": "Haute-Corse", "l": "de ", "url": "corse/haute-corse/" }, "971": { "d": "Guadeloupe", "l": "de la ", "url": "guadeloupe/guadeloupe/" }, "972": { "d": "Martinique", "l": "de ", "url": "martinique/martinique/" }, "973": { "d": "Guyane", "l": "de la ", "url": "guyane/guyane/" }, "974": { "d": "La Réunion", "l": "de la ", "url": "la-reunion/la-reunion/" }, "975": { "d": "Saint-Pierre-et-Miquelon", "l": "de ", "url": "outre-mer/saint-pierre-et-miquelon/" }, "976": { "d": "Mayotte", "l": "de ", "url": "mayotte/mayotte/" }, "977": { "d": "Saint-Martin/Saint-Barthélemy", "l": "de ", "url": "outre-mer/saint-martin-saint-barthelemy/" }, "978": { "d": "Saint-Martin/Saint-Barthélemy", "l": "de ", "url": "outre-mer/saint-martin-saint-barthelemy/" }, "986": { "d": "Wallis et Futuna", "l": "de ", "url": "outre-mer/wallis-et-futuna/" }, "987": { "d": "Polynésie française", "l": "de ", "url": "outre-mer/polynesie-francaise/" }, "988": { "d": "Nouvelle-Calédonie", "l": "de ", "url": "outre-mer/nouvelle-caledonie/" }, "099": { "d": "Français de l'étranger", "l": "des ", "url": "outre-mer/francais-de-l-etranger/" } }; // Format number according to land const formatNb = (x) => {let loc = lang == 'fr' ? 'fr-FR' : 'en-GB';return x.toLocaleString(loc);} // Set update const getTime = (d) => { const minutes = d.getMinutes(); if (minutes < 10) { return " à " + d.getHours() + "h0" + minutes; } return " à " + d.getHours() + "h" + minutes; } const parseDate = (s) => { const a = s.split(/[^0-9]/); return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]); } /*if (typeof (date_update) != 'undefined') { document.querySelector(".eu_reg_map_maj").style.display = "block"; document.querySelector(".eu_reg_map_update").innerHTML = getTime(parseDate(date_update)); } // Set progress counter if (typeof (legend_carto_qualif) != 'undefined') { document.querySelector(".eu_reg_map_countcirco").style.display = "block"; document.querySelector(".eu_reg_map_depouillees").innerHTML = 577 - legend_carto_qualif.circo_non_parvenus; }*/ // Stop spinner document.querySelector(".eu_reg_map_loader").style.display = "none"; document.querySelector(".eu_reg_map_restrainer").style.display = "flex"; document.querySelector(".eu_reg_map_restrainer").style.flexDirection = "column"; // Define geo stuff const circos = topojson.feature(topoCircos, topoCircos.objects.a_circo); const depts = topojson.feature(topoCircos, topoCircos.objects.a_dept); const separators = topojson.feature(topoCircos, topoCircos.objects.l_separateur); const cities = topojson.feature(topoCircos, topoCircos.objects.a_ville); const citiesFilteredCircles = { type: "FeatureCollection", features: cities.features.filter(c => (c.properties.n !== 'Paris' && c.properties.n !== 'Nanterre' && c.properties.n !== 'Bobigny' && c.properties.n !== 'Créteil')) }; const citiesFilteredNames = cities.features.filter(c => (c.properties.n !== 'Nanterre' && c.properties.n !== 'Bobigny' && c.properties.n !== 'Créteil')); const fe = topojson.feature(topoCircos, topoCircos.objects.p_FE_circo); const bordersCirco = topojson.mesh(topoCircos, topoCircos.objects.a_circo, (a, b) => a !== b); const bordersDept = topojson.mesh(topoCircos, topoCircos.objects.a_dept, (a, b) => a !== b); const bordersFrance = topojson.merge(topoCircos, topoCircos.objects.a_dept.geometries); // Define dimensions let w = document.querySelector(".eu_reg_map").offsetWidth; let dimensions = { width: w, margin: { top: 10, bottom: 10, left: 15, right: 20 }, }; dimensions.height = dimensions.width * 1.2; document.querySelector(".eu_reg_map_wrapper").style.paddingBottom = '120%'; // Define projection let projDef = (w, h, layer) => { return d3.geoIdentity().reflectY(true).fitExtent([[dimensions.margin.left, dimensions.margin.top], [w - dimensions.margin.right, h - dimensions.margin.bottom]], layer); }; let proj = projDef(dimensions.width, dimensions.height, bordersFrance); const pathGenerator = d3.geoPath(proj); // Init tooltip and categories let tooltip = isMobile ? d3.select(".eu_reg_map_tooltipm") : d3.select(".eu_reg_map_tooltipd"); let tooltipDept = d3.select(".eu_reg_map_tooltipdept"); let isAccessible = false; let category = 'first'; // Init svg (frame and borders) const svg = d3.select(".eu_reg_map_wrapper") .append("svg") .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", `0 0 ${dimensions.width} ${dimensions.height}`) .attr("class", "eu_reg_map_svgcontent") .attr("aria-label", `${text.t}`); const bg = svg.append("g") .append("rect") .attr("width", dimensions.width) .attr("height", dimensions.height) .attr("class", "eu_reg_map_svgbg") .attr("fill", "transparent") .on("click", resetMe); const g = svg.append("g"); // Initial zoom position let k = 1; let x; let y; // Define strokes sizes let borderColor = "var(--eu-dept-border-color)"; const bdStroke = isMobile ? dimensions.width * 0.0025 : dimensions.width * 0.0022; const bigStroke = isMobile ? dimensions.width * 0.003 : dimensions.width * 0.0042; const smallStroke = isMobile ? dimensions.width * 0.001 : dimensions.width * 0.0005; const textCitiesSize = isMobile ? 10 : 11; let tmpStroke; // Fill map let zonesCirco = g.append("g"); let dataC; const zonesDept = g.append("g").selectAll(".eu_reg_map_dept") .data(depts.features) .join("path") .attr("class", "eu_reg_map_dept") .attr("name", d => d.properties.d) .attr("stroke-linejoin", "round") .attr("d", pathGenerator) .attr("fill", "transparent"); const sepLines = g.append("path") .datum(separators) .attr("class", "eu_reg_map_lines") .attr("stroke-linejoin", "round") .attr("d", pathGenerator) .attr("stroke-linejoin", "round") .attr("stroke", "#D5D8DC") .attr("stroke-width", 1); // Draw legendlet svgLeg; function drawLegend({ color, height = 30, divWidth, tickSize = 6, marginTop = 2, marginBottom = 4, } = {}) { let tickFormat = d3.format("+"); if (svgLeg) { svgLeg.remove(); } svgLeg = d3.select(".eu_reg_map_legend_nb") .append("svg") .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", `0 0 ${divWidth} ${height}`) .attr("class", "p_map_leg") .attr("overflow", "visible") .attr("aria-label", "Légende"); let tickAdjust = g => g.selectAll(".tick line") .attr("stroke", "#2A3439") .attr("y1", marginTop + marginBottom - height); const thresholds = color.domain(); /*let x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound(divWidth >= 530 ? [divWidth / 3, divWidth - (divWidth / 3)] : [divWidth / 4, divWidth - (divWidth / 4)]);*/ let x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([divWidth / 5, divWidth - (divWidth / 5)]); svgLeg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); const tickValues = d3.range(thresholds.length); /*const thresholdFormat = i => { return categ == 'd' ? tickFormat(thresholds[i], i) : thresholds[i] + ' %'; }*/ const thresholdFormat = i => { return thresholds[i] + ' %'; } let g = svgLeg.append("g") .attr("transform", `translate(0, ${height - marginBottom})`) .call(d3.axisBottom(x) .tickFormat(thresholdFormat) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()); } const colorScaleDict = { "Extrême droite - ID": ['#e9e0e2', '#d5bfbb', '#c19e95', '#ac7e71', '#965f4e', '#7f412d', '#66230e'], "Gauche radicale": ['#ffede9', '#ffd0c5', '#ffb1a1', '#fe917d', '#f7705c', '#ee4a3b', '#e3051b'], "Conservateurs": ['#f6f6f6', '#dae5f1', '#bcd5eb', '#9ec4e6', '#7cb4e0', '#55a4da', '#0095d4'], "Centristes et libéraux": ['#fff9f5', '#ffecd4', '#ffdeb3', '#ffd090', '#ffc26a', '#fdb342', '#f7a600'], "Sociaux-démocrates": ['#fff9f5', '#fee4e7', '#fdd0d9', '#fabbcb', '#f7a6bd', '#f390b0', '#ee7aa3'], "Extrême droite - ECR": ['#f4f4e8', '#dfdac6', '#cbc1a5', '#b6a886', '#a19167', '#8b7949', '#76632c'], "Ecologistes et régionalistes": ['#f8f8ec', '#e1ecce', '#c9e1b0', '#b2d693', '#99ca76', '#80bf59', '#65b33a'] } const colorScaleThreshold = { "Extrême droite - ID": [5, 15, 25, 35, 45, 55], "Gauche radicale": [5, 10, 15, 20, 25, 30], "Conservateurs": [5, 10, 15, 20, 25, 30], "Centristes et libéraux": [5, 10, 15, 20, 25, 30], "Sociaux-démocrates": [5, 10, 15, 20, 25, 30], "Extrême droite - ECR": [5, 10, 15, 20, 25, 30], "Ecologistes et régionalistes": [5, 10, 15, 20, 25, 30], } // A function to update map colors according to category const updateMap = (category, accessibility) => { dataC = circos.features.map(d => { let circo = d.properties.dc; let ft = d; let res; let colorC = '#D5D8DC'; try { res = carto_qualif[circo].cl; } catch (error) { res = undefined; } if (res != undefined) { if (category == 'first') { colorC = accessibility ? daltColors[res[0].r] || '#D5D8DC' : groupedColors[res[0].r] || '#D5D8DC'; } else if (category == 'Other') { let ret = []; res.forEach(d => { if (d.r !== "Ensemble" && d.r !== "LR-UDI" && d.r !== "Nupes" && d.r !== "Rassemblement national" && d.r !== "Reconquête") { const val = accessibility ? equiv_regroupement_accessible[res[0].r] : d.r; ret.push([val]); } if (ret[0]) { colorC = accessibility ? daltColors[res[0].r] || '#D5D8DC' : groupedColors[res[0].r] || '#D5D8DC'; } }); } else { const findMe = carto_qualif[circo].cl.find(d => {return d.r == category}); const colorScale = d3.scaleThreshold(colorScaleThreshold[category], colorScaleDict[category]); colorC = colorScale(findMe.b) } } return { circo, colorC, res, ft, } }).sort((a, b) => a.colorC < b.colorC ? -1 : 1); // Fill circos zonesCirco.selectAll(".eu_reg_map_circo") .data(circos.features) .join("path") .attr("class", "eu_reg_map_circo") .attr("name", d => d.properties.dc) .attr("stroke-linejoin", "round") .attr("d", pathGenerator) .transition() .duration(500) .attr("fill", d => { if (d.properties.d == '099') return 'var(--map-circo-bg)'; else return dataC.find(f => f.circo == d.properties.dc).colorC; }); // Francais de l'etranger exception pointsFe.selectAll(".eu_reg_map_fe") .data(fe.features) .join("path") .attr("class", "eu_reg_map_fe") .attr("name", d => d.properties.dc) .attr("pointer-events", "none") .attr("d", pathGenerator.pointRadius(3)) .transition() .duration(500) .attr("fill", d => { return dataC.find(f => f.circo == d.properties.dc).colorC; }); // Constant mouse event d3.selectAll(".eu_reg_map_tooltipcross").on("click", onMouseOut); // Handle all variable mouse events handleMouseEvents(); } // Draw borders const circoBorders = g.append("path") .attr("class", "eu_reg_border") .datum(bordersCirco) .attr("fill", "none") .attr("stroke", borderColor) .attr("stroke-width", smallStroke) .attr("stroke-linejoin", "round") .attr("d", pathGenerator) .attr("pointer-events", "none"); const deptBorders = g.append("path") .attr("class", "eu_reg_border") .datum(bordersDept) .attr("fill", "none") .attr("stroke", borderColor) .attr("stroke-width", bdStroke) .attr("stroke-linejoin", "round") .attr("d", pathGenerator) .attr("pointer-events", "none"); const franceBorders = g.append("path") .attr("class", "eu_reg_border") .datum(bordersFrance) .attr("fill", "none") .attr("stroke", borderColor) .attr("stroke-width", bdStroke) .attr("stroke-linejoin", "round") .attr("d", pathGenerator) .attr("pointer-events", "none"); const pointsFe = g.append("g"); // Add cities const pointsCities = g.append("path") .datum(citiesFilteredCircles) .attr("class", "eu_reg_map_points") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 1) .attr("stroke-dasharray", "0.8 1.2") .attr("stroke-linejoin", "round") .attr("pointer-events", "none") .attr("d", pathGenerator) .attr("display", "none"); const textCities = g.selectAll("text") .data(citiesFilteredNames) .join("text") .text(d => d.properties.n) .attr("fill", "#000") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-weight", 500) .attr("font-size", textCitiesSize) .attr("stroke", "#fff") .attr("stroke-opacity", 0.8) .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("paint-order", "stroke fill") .attr("pointer-events", "none") .attr('transform', d => `translate(${pathGenerator.centroid(d)[0]}, ${pathGenerator.centroid(d)[1]})`) .attr("display", "none"); // Fill map a first time updateMap(category, false); // Add overseas legend const textOverseas = g.append("text") .attr("y", dimensions.height * 0.8) .attr("x", dimensions.width * 0.02) .attr("fill", "#717B8E") .attr("font-size", isMobile ? 11 : 13) .attr("pointer-events", "none") .text("Outremer"); const textFe = g.append("text") .attr("y", dimensions.height * 0.8) .attr("x", dimensions.width * 0.505) .attr("fill", "#717B8E") .attr("font-size", isMobile ? 11 : 13) .attr("pointer-events", "none") .text("Français de l'étranger"); // Update legend const updateLegend = (category, accessibility) => { //const newColors = accessibility ? couleurs_regroupement_accessible : groupedColors; const newColors = accessibility ? daltColors : groupedColors; const legendContainer = document.querySelector(".eu_reg_map_legend"); const subtitleContainer = document.querySelector(".eu_reg_map_subtitle"); legendContainer.innerHTML = ''; let count = 0; if (category == 'first') { legendContainer.style.display = "grid"; subtitleContainer.innerHTML = `${text.leg0}`; const dataLeg = legend_carto_nuances; dataLeg.forEach(c => { count += c[1]; if (c[1] > 0) { const name = c[0] === 'Rassemblement national' ? 'RN' : c[0]; legendContainer.innerHTML += `

${name}(${c[1]})

`; } }); if (count < 577) { legendContainer.innerHTML += `

Non parvenu (${577 - count})

`; } } else if (category !== 'Other') { legendContainer.style.display = "block"; subtitleContainer.innerHTML = `${text.leg2}`; legendContainer.innerHTML += `` //const legData = legend_carto_qualif[category]; const colorScaleLeg = d3.scaleThreshold(colorScaleThreshold[category], colorScaleDict[category]); drawLegend({ color: colorScaleLeg, divWidth: dimensions.width, height: isMobile ? 18 : 30 }); // Add disclaimer legendContainer.innerHTML += `

${text.lego2}

`; } else { legendContainer.style.display = "block"; subtitleContainer.innerHTML = `${legend_carto_qualif.Autres.q} ${text.lego1}`; const legData = accessibility ? detaieu_reg_qualif_autres_accessible : detaieu_reg_qualif_autres; // Add each qualified ensemble legData.forEach(c => { const name = c[0]; const colorName = accessibility ? c[0] : c[0]; legendContainer.innerHTML += `

${name}(${c[1]})

`; }); // Add grey dot legend legendContainer.innerHTML += `

${text.legnoq}

`; // Add disclaimer legendContainer.innerHTML += `

${text.lego2}

`; } } // Fill legend a first time updateLegend(category, false); // Manage zoom const zoom = d3.zoom() .scaleExtent([1, 60]) .on("zoom", zoomed); // Click to zoom on a departement function clicked(event, d) { document.querySelector(".eu_reg_map_instrtxt").innerHTML = isMobile ? `${text.zm}` : `${text.z}`; if (isMobile) { tooltip.transition().duration(200) .style("transform", "translate(0, 100px)") .transition().delay(200) .style("display", "none"); } else tooltip.style("display", "none"); const [[x0, y0], [x1, y1]] = pathGenerator.bounds(d); if (event) event.stopPropagation(); // Adapt zoom max to device and dept shape let zoomMax = 120; svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity .translate(dimensions.width / 2, dimensions.height / 2) .scale(Math.min(zoomMax, 1 / Math.max((x1 - x0) / dimensions.width, (y1 - y0) / dimensions.height))) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), ); if (k !== 1) { d3.selectAll(".eu_reg_map_reset") .transition().duration(100) .style("display", "block") .transition().duration(100) .style("opacity", 1); } svg.call(zoom); } // Zoom to selected circonscription when using search bar function zoomToCirco(data) { const circo = dataC.find(d => d.circo == data).ft; clicked(null, circo); clickOnCirco(null, circo); svg.call(zoom); } // Hide tooltip when scrolling out of the map let topPos = window.scrollY + document.querySelector(".eu_reg_figure_title").getBoundingClientRect().top - 500; let bottomPos = window.scrollY + document.querySelector(".eu_reg_map_wrapper").getBoundingClientRect().bottom + 100; window.onscroll = () => { let currentPos = window.pageYOffset; if (isMobile) { if ((currentPos > bottomPos && currentPos > topPos) || (currentPos < topPos && currentPos < bottomPos)) { tooltip.transition().duration(50) .style("transform", "translate(0, 100px)") .transition().delay(50) .style("display", "none"); } } } // A function to set mouse events depending on zoom level function handleMouseEvents() { if (k >= 2) { zonesDept.attr("pointer-events", "none").on("mouseover mousemove click", null); textCities.attr("display", "block"); pointsCities.attr("display", "block"); svg.selectAll(".eu_reg_map_circo") .on("mouseover", isMobile ? null : mouseOverCirco) .on("mousemove", isMobile ? null : mouseMove) .on("mouseout", isMobile ? onMouseOut : onMouseOutDesktop) .on("click", clickOnCirco); svg.selectAll(".eu_reg_map_fe") .attr("pointer-events", "auto") .on("mouseover", isMobile ? null : mouseOverCirco) .on("mousemove", isMobile ? null : mouseMove) .on("mouseout", isMobile ? onMouseOut : onMouseOutDesktop) .on("click", clickOnCirco); } else { if (textCities) textCities.attr("display", "none"); if (pointsCities) pointsCities.attr("display", "none"); zonesDept.attr("pointer-events", "auto") .on("click", clicked) .on("mouseover", isMobile ? null : mouseOverDept) .on("mousemove", isMobile ? null : mouseMove) .on("mouseout", isMobile ? null : onMouseOut); svg.selectAll(".eu_reg_map_fe") .attr("pointer-events", "none"); } } // Manage all those tooltips // Small dark tooltip function mouseOverCirco(event, datum) { const label = datum.properties.dc.split('_'); const title = `${label[1] > 9 ? label[1] : label[1][1]}${label[1] == '01' ? "re" : "e"} circonscription ${deptDict[label[0]].l}${deptDict[label[0]].d}`; tooltipDept.select('.eu_reg_map_tooltipvalue') .attr('aria-label', 'Nom de la circonscription') .html(title); if (isMobile) { tooltipDept.style("display", "block").transition().duration(200).style("transform", "translate(0, -100px)"); } else { tooltipDept.style("display", "block"); } } // Large results tooltip function clickOnCirco(event, datum) { d3.selectAll(".eu_reg_map_circo").attr("stroke-width", 0).attr("stroke", null); d3.selectAll(".eu_reg_map_fe").attr("stroke-width", 0).attr("stroke", null); if (datum.properties.dc == '' || datum.properties.dc == '099_00') return; const label = datum.properties.dc.split('_'); const link = `https://www.lemonde.fr/resultats-elections/${deptDict[label[0]].url}#circonscription-${label[1]}`; const title = `${label[1] > 9 ? label[1] : label[1][1]}${label[1] == '01' ? "re" : "e"} circonscription ${deptDict[label[0]].l}${deptDict[label[0]].d}`; let content = ''; let detail = ''; let resData = dataC.find(d => d.circo == datum.properties.dc); // Hide legend content if (!isMobile) { document.querySelector(".eu_reg_map_tohide").style.display = "none"; } if (resData.res == undefined) { content = `${text.legs7}`; } else { detail = `${text.q}`; resData.res.forEach((q, i) => { if (i < 5) { const color = isAccessible ? daltColors[q.r] || '#D5D8DC' : groupedColors[q.r] || '#D5D8DC'; content += `

${!isMobile && q.n.length > 26 ? `${q.n.slice(0, 26)}...` : `${q.n}`}

${q.r}

${formatNb(q.a)} -

${formatNb(q.b)} %

`; if (i < resData.res.length - 1) content += ``; } }); content += `${text.cta}`; } // Fill tooltip tooltip.select('.eu_reg_map_tooltiptitle') .attr('aria-label', 'Titre infobulle') .html(title); tooltip.select('.eu_reg_map_tooltiplegend') .attr('aria-label', 'Détail type de résultat') .html(detail); tooltip.select('.eu_reg_map_tooltipvalue') .attr('aria-label', 'Contenu infobulle') .html(content); // Show tooltip if (isMobile) { tooltip.style("display", "block").transition().duration(200).style("transform", "translate(0, -100px)"); } else { tooltip.style("display", "block"); } tmpStroke = d3.select(`.eu_reg_map_circo[name='${datum.properties.dc}']`) .attr("stroke", "var(--eu-dept-border-color)") .attr("stroke-width", bigStroke / k) .attr("stroke-linejoin", "round"); d3.select(`.eu_reg_map_fe[name='${datum.properties.dc}']`) .attr("stroke", "var(--eu-dept-border-color)") .attr("stroke-width", bigStroke / k) .attr("stroke-linejoin", "round"); } // Move small dark tooltip around function mouseMove(event, datum) { if (!isMobile) { const [x, y] = d3.pointer(event, svg.node()); tooltipDept.style("transform", `translate(` + `calc(-50% + ${x}px),` + `calc(-110% + ${y - 6}px))`); } } // Small dark tooltip for départements function mouseOverDept(event, datum) { const title = deptDict[datum.properties.d].d; // Fill and show tooltipDept.select('.eu_reg_map_tooltipvalue') .attr('aria-label', 'Nom du département') .html(title); if (isMobile) { tooltipDept.style("display", "block").transition().duration(200).style("transform", "translate(0, -100px)"); } else { tooltipDept.style("display", "block"); } } // Hide circonscription tooltip on desktop only function onMouseOutDesktop() { if (isMobile) { tooltipDept.transition().duration(200) .style("transform", "translate(0, 100px)") .transition().delay(200) .style("display", "none"); } else { tooltipDept.style("display", "none"); } } // Hide tooltip function onMouseOut() { d3.selectAll(".eu_reg_map_circo").attr("stroke-width", 0).attr("stroke", null); d3.selectAll(".eu_reg_map_fe").attr("stroke-width", 0).attr("stroke", null); if (isMobile) { tooltip.transition() .delay(0.2) .transition() .duration(200) .style("transform", "translate(0, 100px)") .transition() //.delay(200) .style("display", "none"); } else { tooltip.style("display", "none"); tooltipDept.style("display", "none"); } // Show legend again document.querySelector(".eu_reg_map_tohide").style.display = "block"; } // Reset function function resetMe() { // Avoid calling dezoom for no reason if (k == 1 && x == 0 && y == 0) return; // Hide tooltip onMouseOut(); // Dezoom svg.transition().duration(500).call( zoom.transform, d3.zoomIdentity, ); // Adjust instruction document.querySelector(".eu_reg_map_instrtxt").innerHTML = isMobile ? `${text.dzm}` : `${text.dz}`; // Disable zoom and pan until further interaction svg.on(".zoom", null); } // Zoom function function zoomed(event) { let { transform } = event; g.attr("transform", transform); circoBorders.attr("stroke-width", smallStroke / transform.k); deptBorders.attr("stroke-width", bdStroke / transform.k); franceBorders.attr("stroke-width", bdStroke / transform.k); pointsCities.attr("stroke-width", 1 / transform.k); textCities.attr("stroke-width", 3 / transform.k).attr("font-size", textCitiesSize / transform.k); pointsFe.attr("d", pathGenerator.pointRadius(3 / transform.k)); if (tmpStroke) tmpStroke.attr("stroke-width", bigStroke / transform.k); if (transform.k == 1 && transform.x == 0 && transform.y == 0) { d3.selectAll(".eu_reg_map_reset") .transition().duration(50) .style("opacity", 0) .transition().duration(50) .style("display", "none"); } else { d3.selectAll(".eu_reg_map_reset") .style("display", "block") .style("opacity", 1); } k = transform.k; x = transform.x; y = transform.y; handleMouseEvents(); } // Watch reset and zoom buttons document.querySelector(".eu_reg_map_reset").onclick = (e) => { resetMe(); } document.querySelector(".eu_reg_map_plus").onclick = (e) => { svg.transition().duration(500).call(zoom.scaleBy, 2.002); svg.call(zoom); } document.querySelector(".eu_reg_map_minus").onclick = (e) => { svg.transition().duration(500).call(zoom.scaleBy, 0.5); svg.call(zoom); } // Watch accessibility switch document.querySelector(".eu_reg_map_switch").oninput = (e) => { isAccessible = e.target.checked; updateMap(category, isAccessible); updateLegend(category, isAccessible); } // Watch category switch document.querySelectorAll(".eu_reg_map_select").forEach(button => { button.onclick = (e) => { let newCategory = button.getAttribute("name"); if (newCategory != category) { category = newCategory; updateMap(category, isAccessible); updateLegend(category, isAccessible); } document.querySelectorAll(".eu_reg_map_select").forEach(b => { b.classList.remove("eu_reg_map_selected"); }); button.classList.add("eu_reg_map_selected"); } }); // Manage arrow display based on scroll /*const arrows = document.querySelectorAll('.eu_reg_map_arrow'); arrows.forEach(arrow => arrow.addEventListener('click', e => { const orientation = arrow.getAttribute("data-orient"); const width = document.querySelector(".eu_reg_map_selector").offsetWidth; const step = width / 2; if (orientation == 'next') { document.querySelector(".eu_reg_map_selector").scrollLeft += step; } else { document.querySelector(".eu_reg_map_selector").scrollLeft -= step; } }));*/ // Handle menu (Max) const map_icon = ``; let map_selected = document.querySelector('.eu_reg_map_select[name="first"]'); // on initialise la variable du choix en cours map_selects = document.querySelectorAll('.eu_reg_map_select'); // tous les choix map_selects.forEach(elem => { // sur chacun elem.addEventListener('click', () => { // on ajoute un click event if (map_selected == elem) { // si le click renvoie au choix déjà existant map_selects.forEach(elem2 => { // on déplie tout elem2.classList.remove("eu_reg_map_choice_out"); elem2.classList.add("eu_reg_map_choice_in"); }); map_selected = null; // on reset map_selected, choix en attente } else { // on était en mode déplié, on gère un choix map_selected = elem; elem.style.order = -1; elem.innerHTML = map_icon + elem.textContent; // on ajoute le picto au choix elem.classList.add("eu_reg_map_selected"); map_selects.forEach(elem2 => { if (elem2 != map_selected) { elem2.innerHTML = elem2.textContent; // on reset le innerhtml sans picto sur les autres elem2.style.order = "unset"; elem2.classList.remove("eu_reg_map_selected"); elem2.classList.remove("eu_reg_map_choice_in"); elem2.classList.add("eu_reg_map_choice_out"); } }); } }); }); // Search bar (Max) let autocomplete_html = `
`; document.querySelector('.eu_reg_search_com').innerHTML += autocomplete_html; function boldSearch(lib, input) { let str = lib.normalize('NFD').replace(/[\u0300-\u036f]/g, "").toLowerCase() let input_re = new RegExp(input.toLowerCase(), 'g'); let match = input_re.exec(str); if (match) { let index = match.index; lib = `${lib.substr(0, index)}${input}${lib.substr(index + input.length, lib.length)}` if (lib.indexOf("") == 0) lib = lib.slice(0, 8) + lib.charAt(8).toUpperCase() + lib.slice(9); else lib = lib.charAt(0).toUpperCase() + lib.slice(1); } return lib; } function circo_num_label(d) { let num = parseInt(d.split('_').slice(-1)); if (num == 1) return '1re circonscription'; else return `${num}e circonscription`; } function resolve_data(matches) { let add_me = []; for (let i = 0; i < matches.length; i++) { let object = JSON.parse(JSON.stringify(matches[i])); if (object['properties']['type'] == 'municipality') { if (communes_circos_multiples.hasOwnProperty(object.properties.id)) { object.properties.circo_carto_id = communes_circos_multiples[object.properties.id] //add_me.push(object) for (let j = 0; j < communes_circos_multiples[object.properties.id].length; j++) { let copy_item = JSON.parse(JSON.stringify(matches[i])); copy_item.properties.label = `${copy_item.properties.label} (${circo_num_label(communes_circos_multiples[object.properties.id][j])})` copy_item.properties.circo_carto_id = communes_circos_multiples[object.properties.id][j]; add_me.push(copy_item) } } else { add_me.push(object) } } else { add_me.push(object) } } return add_me; } new Autocomplete("complex", { onSearch: ({ currentValue }) => { // A chaque nouvelle lettre const api = `https://api-adresse.data.gouv.fr/search/?q=${currentValue.replaceAll(" ", "+") }&limit=5`; return new Promise((resolve) => { fetch(api) .then((response) => response.json()) .then((data) => { let matches = resolve_data(data.features); resolve(matches); }) .catch((error) => { console.error(error); }); }); }, onResults: ({ currentValue, matches }) => { document.querySelector('.auto-results-wrapper').style.maxHeight = dimensions.height + 'px'; let li_elmts = []; for (let i = 0; i < matches.length; i++) { let el = matches[i]; let lib = `${el.properties.label}${el.properties.type == 'municipality' && el.properties.label.indexOf('circonscription') < 0 ? ' (' + el.properties.postcode + ')' : ''}` li_elmts.push( `
  • ${boldSearch(lib, currentValue)}
  • ` ) } return li_elmts.join("") }, onOpened: ({ element, results }) => { let auto_wrapper = document.querySelector('.auto-results-wrapper'); if (auto_wrapper.offsetHeight >= (dimensions.height - 15)) { auto_wrapper.style.overflow = "scroll"; auto_wrapper.style.maxHeight = dimensions.height + 'px'; } else { auto_wrapper.style.overflow = "unset"; auto_wrapper.style.maxHeight = "unset"; } }, onSubmit: async function ({ index, element, object, results }) { // ICI ON LANCE LA SUITE APRÈS SÉLECTION let input_adresse = document.querySelector(".eu_reg_map_search_wrap input"); input_adresse.value = object.properties.label; if (object.properties.circo_carto_id !== undefined) { zoomToCirco(object.properties.circo_carto_id); } else { const [lon, lat] = object['geometry']['coordinates']; const name_adresse = object['properties']["label"]; const dep = object['properties']["context"].split(',')[0]; const code3_dep = get_code3_dep(dep); const dep_lib = object['properties']["context"].split(',')[1]; const result = await get_circo(lat, lon, dep); zoomToCirco(result.replace('-', '_')); } }, // the callback presents no results noResults: ({ element, template }) => { template(`
  • Pas de résultat : "${element.value}"
  • `); }, }); function get_code3_dep(x) { let strx = x.toString(); if (strx.length === 3) return x; else return "0" + x; } function inside(point, vs) { // ray-casting algorithm based on // https://wrf.ecse.rpi.edu/Research/Short_Notes/pnpoly.html/pnpoly.html var x = point[0], y = point[1]; var inside = false; for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) { var xi = vs[i][0], yi = vs[i][1]; var xj = vs[j][0], yj = vs[j][1]; var intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi) / (yj - yi) + xi); if (intersect) inside = !inside; } return inside; }; const communes_circos_multiples = { '97409': ['974_05', '974_06'], '97411': ['974_01', '974_06'], '97414': ['974_03', '974_07'], '97415': ['974_02', '974_07'], '97611': ['976_01', '976_02'], '75056': ['075_01', '075_02', '075_03', '075_04', '075_05', '075_06', '075_07', '075_08', '075_09', '075_10', '075_11', '075_12', '075_13', '075_14', '075_15', '075_16', '075_17', '075_18'], '75106': ['075_02', '075_11'], '75107': ['075_02', '075_12'], '75109': ['075_01', '075_18'], '75111': ['075_06', '075_07'], '75112': ['075_07', '075_08'], '75113': ['075_09', '075_10'], '75114': ['075_10', '075_11'], '75115': ['075_12', '075_13'], '75116': ['075_04', '075_14'], '75117': ['075_03', '075_04'], '75118': ['075_03', '075_17', '075_18'], '75119': ['075_16', '075_17'], '75120': ['075_06', '075_08', '075_15'], '78646': ['078_01', '078_02'], '92012': ['092_09', '092_10'], '92025': ['092_01', '092_02'], '92026': ['092_03', '092_06'], '92048': ['092_08', '092_10'], '93010': ['093_09', '093_10'], '93066': ['093_01', '093_02'], '94017': ['094_01', '094_05'], '94028': ['094_01', '094_02'], '94037': ['094_10', '094_11'], '94081': ['094_09', '094_10'], '95127': ['095_02', '095_10'], '95585': ['095_07', '095_08'], '18033': ['018_01', '018_02', '018_03'], '28015': ['028_01', '028_04'], '28085': ['028_01', '028_03'], '37261': ['037_01', '037_05'], '45051': ['045_03', '045_06'], '45234': ['045_01', '045_02', '045_06'], '21231': ['021_01', '021_02', '021_03'], '25056': ['025_01', '025_02'], '25222': ['025_02', '025_05'], '71076': ['071_04', '071_05'], '90010': ['090_01', '090_02'], '14005': ['014_03', '014_06'], '14118': ['014_01', '014_02'], '14543': ['014_01', '014_05'], '14672': ['014_05', '014_06'], '27229': ['027_01', '027_02'], '27425': ['027_02', '027_03'], '50400': ['050_01', '050_03'], '61081': ['061_01', '061_03'], '76351': ['076_07', '076_08'], '76540': ['076_01', '076_03'], '59036': ['059_03', '059_12'], '59183': ['059_13', '059_14'], '59350': ['059_01', '059_02', '059_04', '059_09', '059_11'], '59512': ['059_07', '059_08'], '59588': ['059_13', '059_14'], '59599': ['059_09', '059_10'], '60057': ['060_01', '060_02'], '60159': ['060_05', '060_06'], '60175': ['060_03', '060_07'], '60196': ['060_02', '060_03'], '62570': ['062_03', '062_11'], '80021': ['080_01', '080_02'], '08105': ['008_01', '008_02'], '10003': ['010_02', '010_03'], '10387': ['010_01', '010_02', '010_03'], '51454': ['051_01', '051_02', '051_03', '051_04'], '54395': ['054_01', '054_02'], '57463': ['057_01', '057_02', '057_03'], '67372': ['067_07', '067_08'], '67482': ['067_01', '067_02', '067_03'], '68006': ['068_03', '068_04'], '68224': ['068_05', '068_06'], '44109': ['044_01', '044_02', '044_03', '044_04', '044_05'], '49007': ['049_01', '049_02', '049_06', '049_07'], '49050': ['049_02', '049_04'], '49092': ['049_02', '049_04'], '49220': ['049_01', '049_03'], '49292': ['049_02', '049_04'], '49307': ['049_02', '049_03'], '49328': ['049_03', '049_04'], '53130': ['053_01', '053_02'], '72181': ['072_01', '072_02', '072_04', '072_05'], '85191': ['085_01', '085_02'], '29019': ['029_02', '029_03'], '35238': ['035_01', '035_02', '035_03', '035_08'], '17306': ['017_04', '017_05'], '24026': ['024_03', '024_04'], '24147': ['024_03', '024_04'], '33063': ['033_01', '033_02', '033_03'], '33106': ['033_09', '033_12'], '64445': ['064_01', '064_02', '064_03'], '86019': ['086_01', '086_03'], '86053': ['086_01', '086_02'], '86194': ['086_01', '086_02'], '87085': ['087_01', '087_02', '087_03'], '11069': ['011_01', '011_03'], '30007': ['030_04', '030_05'], '30189': ['030_01', '030_06'], '31555': ['031_01', '031_02', '031_03', '031_04', '031_09'], '34172': ['034_01', '034_02', '034_03', '034_08', '034_09'], '65440': ['065_01', '065_02'], '66136': ['066_01', '066_02', '066_03'], '81004': ['081_01', '081_02'], '81065': ['081_01', '081_03'], '01053': ['001_01', '001_04'], '01098': ['001_03', '001_05'], '38001': ['038_05', '038_10'], '38053': ['038_06', '038_10'], '38152': ['038_07', '038_10'], '38169': ['038_03', '038_04'], '38185': ['038_01', '038_03'], '38292': ['038_05', '038_07'], '42218': ['042_01', '042_02'], '43157': ['043_01', '043_02'], '63113': ['063_01', '063_03', '063_04'], '69123': ['069_01', '069_02', '069_03', '069_04'], '69382': ['069_01', '069_02'], '69383': ['069_03', '069_04'], '69387': ['069_01', '069_03'], '69388': ['069_01', '069_03', '069_04'], '69389': ['069_01', '069_02'], '69290': ['069_13', '069_14'], '74010': ['074_01', '074_02'], '74275': ['074_01', '074_02'], '06069': ['006_02', '006_09'], '06088': ['006_01', '006_03', '006_05'], '06155': ['006_07', '006_08'], '13001': ['013_11', '013_14'], '13047': ['013_13', '013_16'], '13055': ['013_01', '013_02', '013_03', '013_04', '013_05', '013_06', '013_07'], '13205': ['013_04', '013_05'], '13206': ['013_04', '013_05'], '13210': ['013_01', '013_06'], '13212': ['013_01', '013_03'], '13214': ['013_03', '013_07'], '83137': ['083_01', '083_02'], '84031': ['084_03', '084_05'], '2A004': ['02A_01', '02A_02'] }; const dict_circo_par_dep = { "001": "001-01;001-02;001-03;001-04;001-05", "002": "002-01;002-02;002-03;002-04;002-05", "003": "003-01;003-02;003-03", "004": "004-01;004-02", "005": "005-01;005-02", "006": "006-01;006-02;006-03;006-04;006-05;006-06;006-07;006-08;006-09", "007": "007-01;007-02;007-03", "008": "008-01;008-02;008-03", "009": "009-01;009-02", "010": "010-01;010-02;010-03", "011": "011-01;011-02;011-03", "012": "012-01;012-02;012-03", "013": "013-01;013-02;013-03;013-04;013-05;013-06;013-07;013-08;013-09;013-10;013-11;013-12;013-13;013-14;013-15;013-16", "014": "014-01;014-02;014-03;014-04;014-05;014-06", "015": "015-01;015-02", "016": "016-01;016-02;016-03", "017": "017-01;017-02;017-03;017-04;017-05", "018": "018-01;018-02;018-03", "019": "019-01;019-02", "021": "021-01;021-02;021-03;021-04;021-05", "022": "022-01;022-02;022-03;022-04;022-05", "023": "023-01", "024": "024-01;024-02;024-03;024-04", "025": "025-01;025-02;025-03;025-04;025-05", "026": "026-01;026-02;026-03;026-04", "027": "027-01;027-02;027-03;027-04;027-05", "028": "028-01;028-02;028-03;028-04", "029": "029-01;029-02;029-03;029-04;029-05;029-06;029-07;029-08", "02A": "02A-01;02A-02", "02B": "02B-01;02B-02", "030": "030-01;030-02;030-03;030-04;030-05;030-06", "031": "031-01;031-02;031-03;031-04;031-05;031-06;031-07;031-08;031-09;031-10", "032": "032-01;032-02", "033": "033-01;033-02;033-03;033-04;033-05;033-06;033-07;033-08;033-09;033-10;033-11;033-12", "034": "034-01;034-02;034-03;034-04;034-05;034-06;034-07;034-08;034-09", "035": "035-01;035-02;035-03;035-04;035-05;035-06;035-07;035-08", "036": "036-01;036-02", "037": "037-01;037-02;037-03;037-04;037-05", "038": "038-01;038-02;038-03;038-04;038-05;038-06;038-07;038-08;038-09;038-10", "039": "039-01;039-02;039-03", "040": "040-01;040-02;040-03", "041": "041-01;041-02;041-03", "042": "042-01;042-02;042-03;042-04;042-05;042-06", "043": "043-01;043-02", "044": "044-01;044-02;044-03;044-04;044-05;044-06;044-07;044-08;044-09;044-10", "045": "045-01;045-02;045-03;045-04;045-05;045-06", "046": "046-01;046-02", "047": "047-01;047-02;047-03", "048": "048-01", "049": "049-01;049-02;049-03;049-04;049-05;049-06;049-07", "050": "050-01;050-02;050-03;050-04", "051": "051-01;051-02;051-03;051-04;051-05", "052": "052-01;052-02", "053": "053-01;053-02;053-03", "054": "054-01;054-02;054-03;054-04;054-05;054-06", "055": "055-01;055-02", "056": "056-01;056-02;056-03;056-04;056-05;056-06", "057": "057-01;057-02;057-03;057-04;057-05;057-06;057-07;057-08;057-09", "058": "058-01;058-02", "059": "059-01;059-02;059-03;059-04;059-05;059-06;059-07;059-08;059-09;059-10;059-11;059-12;059-13;059-14;059-15;059-16;059-17;059-18;059-19;059-20;059-21", "060": "060-01;060-02;060-03;060-04;060-05;060-06;060-07", "061": "061-01;061-02;061-03", "062": "062-01;062-02;062-03;062-04;062-05;062-06;062-07;062-08;062-09;062-10;062-11;062-12", "063": "063-01;063-02;063-03;063-04;063-05", "064": "064-01;064-02;064-03;064-04;064-05;064-06", "065": "065-01;065-02", "066": "066-01;066-02;066-03;066-04", "067": "067-01;067-02;067-03;067-04;067-05;067-06;067-07;067-08;067-09", "068": "068-01;068-02;068-03;068-04;068-05;068-06", "069": "069-01;069-02;069-03;069-04;069-05;069-06;069-07;069-08;069-09;069-10;069-11;069-12;069-13;069-14", "070": "070-01;070-02", "071": "071-01;071-02;071-03;071-04;071-05", "072": "072-01;072-02;072-03;072-04;072-05", "073": "073-01;073-02;073-03;073-04", "074": "074-01;074-02;074-03;074-04;074-05;074-06", "075": "075-01;075-02;075-03;075-04;075-05;075-06;075-07;075-08;075-09;075-10;075-11;075-12;075-13;075-14;075-15;075-16;075-17;075-18", "076": "076-01;076-02;076-03;076-04;076-05;076-06;076-07;076-08;076-09;076-10", "077": "077-01;077-02;077-03;077-04;077-05;077-06;077-07;077-08;077-09;077-10;077-11", "078": "078-01;078-02;078-03;078-04;078-05;078-06;078-07;078-08;078-09;078-10;078-11;078-12", "079": "079-01;079-02;079-03", "080": "080-01;080-02;080-03;080-04;080-05", "081": "081-01;081-02;081-03", "082": "082-01;082-02", "083": "083-01;083-02;083-03;083-04;083-05;083-06;083-07;083-08", "084": "084-01;084-02;084-03;084-04;084-05", "085": "085-01;085-02;085-03;085-04;085-05", "086": "086-01;086-02;086-03;086-04", "087": "087-01;087-02;087-03", "088": "088-01;088-02;088-03;088-04", "089": "089-01;089-02;089-03", "090": "090-01;090-02", "091": "091-01;091-02;091-03;091-04;091-05;091-06;091-07;091-08;091-09;091-10", "092": "092-01;092-02;092-03;092-04;092-05;092-06;092-07;092-08;092-09;092-10;092-11;092-12;092-13", "093": "093-01;093-02;093-03;093-04;093-05;093-06;093-07;093-08;093-09;093-10;093-11;093-12", "094": "094-01;094-02;094-03;094-04;094-05;094-06;094-07;094-08;094-09;094-10;094-11", "095": "095-01;095-02;095-03;095-04;095-05;095-06;095-07;095-08;095-09;095-10", "971": "971-01;971-02;971-03;971-04", "972": "972-01;972-02;972-03;972-04", "973": "973-01;973-02", "974": "974-01;974-02;974-03;974-04;974-05;974-06;974-07", "975": "975-01", "976": "976-01;976-02", "977": "977-01", "978": "978-01", "986": "986-01", "987": "987-01;987-02;987-03", "988": "988-01;988-02" }; async function get_circo(lat, lon, dep) { const point = [lon, lat]; const code3_dep = get_code3_dep(dep); const circos = dict_circo_par_dep[code3_dep].split(";"); if (circos.length === 1) return circos[0] for (let c of circos) { const num = parseInt(c.split("-")[1], 10); const ureu_reg_c = `https://assets-decodeurs.lemonde.fr/assets-legacy/pol/legislatives/moteur_circo/geojson/${dep}_${num}.json` const list_poly_c = await fetch(ureu_reg_c).then(function (response) { return response.json(); }).catch(function () { return undefined; }); if (list_poly_c === undefined) { continue; } for (let poly_dict of list_poly_c.features) { ref = poly_dict["properties"]["REF"]; poly = poly_dict["geometry"]["coordinates"][0]; if (inside(point, poly)) return ref; } } return undefined; } });}initMap('fr');

    Impossible, pour autant, d’interpréter les votes aux élections européennes comme des précurseurs exacts des scrutins législatifs des 30juin et 7juillet.

    • Tout d’abord, calquer les résultats des européennes sur ceux des législatives pourrait, au mieux, permettre d’esquisser ce à quoi ressemblerait le premier tour. Mais dans l’immense majorité des cas, un deuxième tour est nécessaire pour élire un député. La projection des résultats des européennes ne donne que très peu d’informations sur l’issue d’un duel ou d’une triangulaire.
    • L’élection des eurodéputés, qui se fait lors d’un scrutin proportionnel, a encouragé la multiplication des listes car il «suffit» d’obtenir 5% des voix pour avoir des élus. Les listes concurrentes à gauche lors des européennes semblent s’être rangées à l’idée d’un «front populaire» commun pour les législatives. Suivant cette logique, les résultats du 9juin laissent penser que la gauche disposerait d’un réservoir de voix plus important: une stricte addition des suffrages qui s’étaient portés sur les listes du Parti socialiste-Place publique (PS-PP), de La France insoumise (LFI), d’Europe Ecologie-Les Verts (EELV), du Parti communiste (PCF) et du Nouveau Parti anticapitaliste (NPA) placerait cette alliance en tête dans 258circonscriptions. C’est ce que nous avons calculé pour réaliser la projection fictive ci-dessous.

    ${isMobile ? `${text.zm}` : `${text.z}`}

    ${text.d}

    `; } fillHtml(); // Fetch topojson d3.json("https://assets-decodeurs.lemonde.fr/decodeurs/assets/legislatives2022/circos.json").then((topoCircos) => { // Detect dark mode let isDark = document.querySelector('html').hasAttribute("data-color-mode") && (document.querySelector('html').getAttribute("data-color-mode") == "dark"); const groupedColors = isDark ? couleurs_dark_ALLIANCES : couleurs_ALLIANCES; const daltColors = couleurs_d_ALLIANCES; // Tooltip and url data const deptDict = { "001": { "d": "Ain", "l": "de l\'", "url": "auvergne-rhone-alpes/ain/" }, "002": { "d": "Aisne", "l": "de l\'", "url": "hauts-de-france/aisne/" }, "003": { "d": "Allier", "l": "de l\'", "url": "auvergne-rhone-alpes/allier/" }, "004": { "d": "Alpes-de-Haute-Provence", "l": "des ", "url": "provence-alpes-cote-d-azur/alpes-de-haute-provence/" }, "005": { "d": "Hautes-Alpes", "l": "des ", "url": "provence-alpes-cote-d-azur/hautes-alpes/" }, "006": { "d": "Alpes-Maritimes", "l": "des ", "url": "provence-alpes-cote-d-azur/alpes-maritimes/" }, "007": { "d": "Ardèche", "l": "d\'", "url": "auvergne-rhone-alpes/ardeche/" }, "008": { "d": "Ardennes", "l": "des ", "url": "grand-est/ardennes/" }, "009": { "d": "Ariège", "l": "d\'", "url": "occitanie/ariege/" }, "010": { "d": "Aube", "l": "de l\'", "url": "grand-est/aube/" }, "011": { "d": "Aude", "l": "de l\'", "url": "occitanie/aude/" }, "012": { "d": "Aveyron", "l": "de l\'", "url": "occitanie/aveyron/" }, "013": { "d": "Bouches-du-Rhône", "l": "des ", "url": "provence-alpes-cote-d-azur/bouches-du-rhone/" }, "014": { "d": "Calvados", "l": "du ", "url": "normandie/calvados/" }, "015": { "d": "Cantal", "l": "du ", "url": "auvergne-rhone-alpes/cantal/" }, "016": { "d": "Charente", "l": "de la ", "url": "nouvelle-aquitaine/charente/" }, "017": { "d": "Charente-Maritime", "l": "de la ", "url": "nouvelle-aquitaine/charente-maritime/" }, "018": { "d": "Cher", "l": "du ", "url": "centre-val-de-loire/cher/" }, "019": { "d": "Corrèze", "l": "de la ", "url": "nouvelle-aquitaine/correze/" }, "021": { "d": "Côte-d'Or", "l": "de la ", "url": "bourgogne-franche-comte/cote-d-or/" }, "022": { "d": "Côtes-d'Armor", "l": "des ", "url": "bretagne/cotes-d-armor/" }, "023": { "d": "Creuse", "l": "de la ", "url": "nouvelle-aquitaine/creuse/" }, "024": { "d": "Dordogne", "l": "de la ", "url": "nouvelle-aquitaine/dordogne/" }, "025": { "d": "Doubs", "l": "du ", "url": "bourgogne-franche-comte/doubs/" }, "026": { "d": "Drôme", "l": "de la ", "url": "auvergne-rhone-alpes/drome/" }, "027": { "d": "Eure", "l": "de l\'", "url": "normandie/eure/" }, "028": { "d": "Eure-et-Loir", "l": "de l\'", "url": "centre-val-de-loire/eure-et-loir/" }, "029": { "d": "Finistère", "l": "du ", "url": "bretagne/finistere/" }, "030": { "d": "Gard", "l": "du ", "url": "occitanie/gard" }, "031": { "d": "Haute-Garonne", "l": "de la ", "url": "occitanie/haute-garonne/" }, "032": { "d": "Gers", "l": "du ", "url": "occitanie/gers/" }, "033": { "d": "Gironde", "l": "de la ", "url": "nouvelle-aquitaine/gironde/" }, "034": { "d": "Hérault", "l": "de l\'", "url": "occitanie/herault/" }, "035": { "d": "Ille-et-Vilaine", "l": "d\'", "url": "bretagne/ille-et-vilaine/" }, "036": { "d": "Indre", "l": "de l\'", "url": "centre-val-de-loire/indre/" }, "037": { "d": "Indre-et-Loire", "l": "de l\'", "url": "centre-val-de-loire/indre-et-loire/" }, "038": { "d": "Isère", "l": "de l\'", "url": "auvergne-rhone-alpes/isere/" }, "039": { "d": "Jura", "l": "du ", "url": "bourgogne-franche-comte/jura/" }, "040": { "d": "Landes", "l": "des ", "url": "nouvelle-aquitaine/landes/" }, "041": { "d": "Loir-et-Cher", "l": "du ", "url": "centre-val-de-loire/loir-et-cher/" }, "042": { "d": "Loire", "l": "de la ", "url": "auvergne-rhone-alpes/loire/" }, "043": { "d": "Haute-Loire", "l": "de la ", "url": "auvergne-rhone-alpes/haute-loire/" }, "044": { "d": "Loire-Atlantique", "l": "de la ", "url": "pays-de-la-loire/loire-atlantique/" }, "045": { "d": "Loiret", "l": "du ", "url": "centre-val-de-loire/loiret/" }, "046": { "d": "Lot", "l": "du ", "url": "occitanie/lot/" }, "047": { "d": "Lot-et-Garonne", "l": "du ", "url": "nouvelle-aquitaine/lot-et-garonne/" }, "048": { "d": "Lozère", "l": "de la ", "url": "occitanie/lozere/" }, "049": { "d": "Maine-et-Loire", "l": "du ", "url": "pays-de-la-loire/maine-et-loire/" }, "050": { "d": "Manche", "l": "de la ", "url": "normandie/manche/" }, "051": { "d": "Marne", "l": "de la ", "url": "grand-est/marne/" }, "052": { "d": "Haute-Marne", "l": "de la ", "url": "grand-est/haute-marne/" }, "053": { "d": "Mayenne", "l": "de la ", "url": "pays-de-la-loire/mayenne/" }, "054": { "d": "Meurthe-et-Moselle", "l": "de la ", "url": "grand-est/meurthe-et-moselle/" }, "055": { "d": "Meuse", "l": "de la ", "url": "grand-est/meuse/" }, "056": { "d": "Morbihan", "l": "du ", "url": "bretagne/morbihan/" }, "057": { "d": "Moselle", "l": "de la ", "url": "grand-est/moselle/" }, "058": { "d": "Nièvre", "l": "de la ", "url": "bourgogne-franche-comte/nievre/" }, "059": { "d": "Nord", "l": "du ", "url": "hauts-de-france/nord/" }, "060": { "d": "Oise", "l": "de l\'", "url": "hauts-de-france/oise/" }, "061": { "d": "Orne", "l": "de l\'", "url": "normandie/orne/" }, "062": { "d": "Pas-de-Calais", "l": "du ", "url": "hauts-de-france/pas-de-calais/" }, "063": { "d": "Puy-de-Dôme", "l": "du ", "url": "auvergne-rhone-alpes/puy-de-dome/" }, "064": { "d": "Pyrénées-Atlantiques", "l": "des ", "url": "nouvelle-aquitaine/pyrenees-atlantiques/" }, "065": { "d": "Hautes-Pyrénées", "l": "des ", "url": "occitanie/hautes-pyrenees/" }, "066": { "d": "Pyrénées-Orientales", "l": "des ", "url": "occitanie/pyrenees-orientales/" }, "067": { "d": "Bas-Rhin", "l": "du ", "url": "grand-est/bas-rhin/" }, "068": { "d": "Haut-Rhin", "l": "du ", "url": "grand-est/haut-rhin/" }, "069": { "d": "Rhône", "l": "du ", "url": "auvergne-rhone-alpes/rhone/" }, "070": { "d": "Haute-Saône", "l": "de la ", "url": "bourgogne-franche-comte/haute-saone/" }, "071": { "d": "Saône-et-Loire", "l": "de la ", "url": "bourgogne-franche-comte/saone-et-loire/" }, "072": { "d": "Sarthe", "l": "de la ", "url": "pays-de-la-loire/sarthe/" }, "073": { "d": "Savoie", "l": "de la ", "url": "auvergne-rhone-alpes/savoie/" }, "074": { "d": "Haute-Savoie", "l": "de la ", "url": "auvergne-rhone-alpes/haute-savoie/" }, "075": { "d": "Paris", "l": "de ", "url": "ile-de-france/paris/" }, "076": { "d": "Seine-Maritime", "l": "de la ", "url": "normandie/seine-maritime/" }, "077": { "d": "Seine-et-Marne", "l": "de ", "url": "ile-de-france/seine-et-marne/" }, "078": { "d": "Yvelines", "l": "des ", "url": "ile-de-france/yvelines/" }, "079": { "d": "Deux-Sèvres", "l": "des ", "url": "nouvelle-aquitaine/deux-sevres/" }, "080": { "d": "Somme", "l": "de la ", "url": "hauts-de-france/somme/" }, "081": { "d": "Tarn", "l": "du ", "url": "occitanie/tarn/" }, "082": { "d": "Tarn-et-Garonne", "l": "du ", "url": "occitanie/tarn-et-garonne/" }, "083": { "d": "Var", "l": "du ", "url": "provence-alpes-cote-d-azur/var/" }, "084": { "d": "Vaucluse", "l": "du ", "url": "provence-alpes-cote-d-azur/vaucluse/" }, "085": { "d": "Vendée", "l": "de la ", "url": "pays-de-la-loire/vendee/" }, "086": { "d": "Vienne", "l": "de la ", "url": "nouvelle-aquitaine/vienne/" }, "087": { "d": "Haute-Vienne", "l": "de la ", "url": "nouvelle-aquitaine/haute-vienne/" }, "088": { "d": "Vosges", "l": "des ", "url": "grand-est/vosges/" }, "089": { "d": "Yonne", "l": "de l\'", "url": "bourgogne-franche-comte/yonne/" }, "090": { "d": "Territoire de Belfort", "l": "du ", "url": "bourgogne-franche-comte/territoire-de-belfort/" }, "091": { "d": "Essonne", "l": "de l\'", "url": "ile-de-france/essonne/" }, "092": { "d": "Hauts-de-Seine", "l": "des ", "url": "ile-de-france/hauts-de-seine/" }, "093": { "d": "Seine-Saint-Denis", "l": "de ", "url": "ile-de-france/seine-saint-denis/" }, "094": { "d": "Val-de-Marne", "l": "du ", "url": "ile-de-france/val-de-marne/" }, "095": { "d": "Val-d'Oise", "l": "du ", "url": "ile-de-france/val-d-oise/" }, "02A": { "d": "Corse-du-Sud", "l": "de ", "url": "corse/corse-du-sud/" }, "02B": { "d": "Haute-Corse", "l": "de ", "url": "corse/haute-corse/" }, "971": { "d": "Guadeloupe-fp", "l": "de la ", "url": "guadeloupe-fp/guadeloupe-fp/" }, "972": { "d": "Martinique", "l": "de ", "url": "martinique/martinique/" }, "973": { "d": "Guyane", "l": "de la ", "url": "guyane/guyane/" }, "974": { "d": "La Réunion", "l": "de la ", "url": "la-reunion/la-reunion/" }, "975": { "d": "Saint-Pierre-et-Miquelon", "l": "de ", "url": "outre-mer/saint-pierre-et-miquelon/" }, "976": { "d": "Mayotte", "l": "de ", "url": "mayotte/mayotte/" }, "977": { "d": "Saint-Martin/Saint-Barthélemy", "l": "de ", "url": "outre-mer/saint-martin-saint-barthelemy/" }, "978": { "d": "Saint-Martin/Saint-Barthélemy", "l": "de ", "url": "outre-mer/saint-martin-saint-barthelemy/" }, "986": { "d": "Wallis et Futuna", "l": "de ", "url": "outre-mer/wallis-et-futuna/" }, "987": { "d": "Polynésie française", "l": "de ", "url": "outre-mer/polynesie-francaise/" }, "988": { "d": "Nouvelle-Calédonie", "l": "de ", "url": "outre-mer/nouvelle-caledonie/" }, "099": { "d": "Français de l'étranger", "l": "des ", "url": "outre-mer/francais-de-l-etranger/" } }; // Format number according to land const formatNb = (x) => {let loc = lang == 'fr' ? 'fr-FR' : 'en-GB';return x.toLocaleString(loc);} // Set update const getTime = (d) => { const minutes = d.getMinutes(); if (minutes < 10) { return " à " + d.getHours() + "h0" + minutes; } return " à " + d.getHours() + "h" + minutes; } const parseDate = (s) => { const a = s.split(/[^0-9]/); return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]); } // Stop spinner document.querySelector(".eu_fp_map_loader").style.display = "none"; document.querySelector(".eu_fp_map_restrainer").style.display = "flex"; document.querySelector(".eu_fp_map_restrainer").style.flexDirection = "column"; // Define geo stuff const circos = topojson.feature(topoCircos, topoCircos.objects.a_circo); const depts = topojson.feature(topoCircos, topoCircos.objects.a_dept); const separators = topojson.feature(topoCircos, topoCircos.objects.l_separateur); const cities = topojson.feature(topoCircos, topoCircos.objects.a_ville); const citiesFilteredCircles = { type: "FeatureCollection", features: cities.features.filter(c => (c.properties.n !== 'Paris' && c.properties.n !== 'Nanterre' && c.properties.n !== 'Bobigny' && c.properties.n !== 'Créteil')) }; const citiesFilteredNames = cities.features.filter(c => (c.properties.n !== 'Nanterre' && c.properties.n !== 'Bobigny' && c.properties.n !== 'Créteil')); const fe = topojson.feature(topoCircos, topoCircos.objects.p_FE_circo); const bordersCirco = topojson.mesh(topoCircos, topoCircos.objects.a_circo, (a, b) => a !== b); const bordersDept = topojson.mesh(topoCircos, topoCircos.objects.a_dept, (a, b) => a !== b); const bordersFrance = topojson.merge(topoCircos, topoCircos.objects.a_dept.geometries); // Define dimensions let w = document.querySelector(".eu_fp_map").offsetWidth; let dimensions = { width: w, margin: { top: 10, bottom: 10, left: 15, right: 20 }, }; dimensions.height = dimensions.width * 1.2; document.querySelector(".eu_fp_map_wrapper").style.paddingBottom = '120%'; // Define projection let projDef = (w, h, layer) => { return d3.geoIdentity().reflectY(true).fitExtent([[dimensions.margin.left, dimensions.margin.top], [w - dimensions.margin.right, h - dimensions.margin.bottom]], layer); }; let proj = projDef(dimensions.width, dimensions.height, bordersFrance); const pathGenerator = d3.geoPath(proj); // Init tooltip and categories let tooltip = isMobile ? d3.select(".eu_fp_map_tooltipm") : d3.select(".eu_fp_map_tooltipd"); let tooltipDept = d3.select(".eu_fp_map_tooltipdept"); let isAccessible = false; let category = 'first'; // Init svg (frame and borders) const svg = d3.select(".eu_fp_map_wrapper") .append("svg") .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", `0 0 ${dimensions.width} ${dimensions.height}`) .attr("class", "eu_fp_map_svgcontent") .attr("aria-label", `${text.t}`); const bg = svg.append("g") .append("rect") .attr("width", dimensions.width) .attr("height", dimensions.height) .attr("class", "eu_fp_map_svgbg") .attr("fill", "transparent") .on("click", resetMe); const g = svg.append("g"); // Initial zoom position let k = 1; let x; let y; // Define strokes sizes let borderColor = "var(--eu-dept-border-color)"; const bdStroke = isMobile ? dimensions.width * 0.0025 : dimensions.width * 0.0022; const bigStroke = isMobile ? dimensions.width * 0.003 : dimensions.width * 0.0042; const smallStroke = isMobile ? dimensions.width * 0.001 : dimensions.width * 0.0005; const textCitiesSize = isMobile ? 10 : 11; let tmpStroke; // Fill map let zonesCirco = g.append("g"); let dataC; const zonesDept = g.append("g").selectAll(".eu_fp_map_dept") .data(depts.features) .join("path") .attr("class", "eu_fp_map_dept") .attr("name", d => d.properties.d) .attr("stroke-linejoin", "round") .attr("d", pathGenerator) .attr("fill", "transparent"); const sepLines = g.append("path") .datum(separators) .attr("class", "eu_fp_map_lines") .attr("stroke-linejoin", "round") .attr("d", pathGenerator) .attr("stroke-linejoin", "round") .attr("stroke", "#D5D8DC") .attr("stroke-width", 1); // Draw legendlet svgLeg; function drawLegend({ color, height = 30, divWidth, tickSize = 6, marginTop = 2, marginBottom = 4, } = {}) { let tickFormat = d3.format("+"); if (svgLeg) { svgLeg.remove(); } console.log("?", divWidth) svgLeg = d3.select(".eu_fp_map_legend_nb") .append("svg") .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", `0 0 ${divWidth} ${height}`) .attr("class", "p_map_leg") .attr("overflow", "visible") .attr("aria-label", "Légende"); let tickAdjust = g => g.selectAll(".tick line") .attr("stroke", "#2A3439") .attr("y1", marginTop + marginBottom - height); const thresholds = color.domain(); /*let x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound(divWidth >= 530 ? [divWidth / 3, divWidth - (divWidth / 3)] : [divWidth / 4, divWidth - (divWidth / 4)]);*/ let x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([divWidth / 5, divWidth - (divWidth / 5)]); svgLeg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); const tickValues = d3.range(thresholds.length); /*const thresholdFormat = i => { return categ == 'd' ? tickFormat(thresholds[i], i) : thresholds[i] + ' %'; }*/ const thresholdFormat = i => { return thresholds[i] + ' %'; } let g = svgLeg.append("g") .attr("transform", `translate(0, ${height - marginBottom})`) .call(d3.axisBottom(x) .tickFormat(thresholdFormat) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()); } const colorScaleDict = { "Extrême droite - ID": ['#e9e0e2', '#d5bfbb', '#c19e95', '#ac7e71', '#965f4e', '#7f412d', '#66230e'], "Gauche radicale": ['#ffede9', '#ffd0c5', '#ffb1a1', '#fe917d', '#f7705c', '#ee4a3b', '#e3051b'], "Conservateurs": ['#f6f6f6', '#dae5f1', '#bcd5eb', '#9ec4e6', '#7cb4e0', '#55a4da', '#0095d4'], "Centristes et libéraux": ['#fff9f5', '#ffecd4', '#ffdeb3', '#ffd090', '#ffc26a', '#fdb342', '#f7a600'], "Sociaux-démocrates": ['#fff9f5', '#fee4e7', '#fdd0d9', '#fabbcb', '#f7a6bd', '#f390b0', '#ee7aa3'], } const colorScaleThreshold = { "Extrême droite - ID": [5, 15, 25, 35, 45, 55], "Gauche radicale": [5, 10, 15, 20, 25, 30], "Conservateurs": [5, 10, 15, 20, 25, 30], "Centristes et libéraux": [5, 10, 15, 20, 25, 30], "Sociaux-démocrates": [5, 10, 15, 20, 25, 30], } // A function to update map colors according to category const updateMapFp = (category, accessibility) => { dataC = circos.features.map(d => { let circo = d.properties.dc; let ft = d; let res; let colorC = '#D5D8DC'; try { res = carto_qualif_ALLIANCES[circo].cl; } catch (error) { res = undefined; } if (res != undefined) { if (category == 'first') { colorC = accessibility ? daltColors[res[0].r] || '#D5D8DC' //? couleurs_regroupement_accessible[equiv_regroupement_accessible[res[0].r]] || '#D5D8DC' : groupedColors[res[0].r] || '#D5D8DC'; } else if (category == 'Other') { let ret = []; res.forEach(d => { if (d.r !== "Ensemble" && d.r !== "LR-UDI" && d.r !== "Nupes" && d.r !== "Rassemblement national" && d.r !== "Reconquête") { const val = accessibility ? equiv_regroupement_accessible[res[0].r] : d.r; ret.push([val]); } if (ret[0]) { colorC = accessibility ? daltColors[res[0].r] || '#D5D8DC' //? couleurs_regroupement_accessible[equiv_regroupement_accessible[res[0].r]] || '#D5D8DC' : groupedColors[res[0].r] || '#D5D8DC'; } }); } else { console.log("ici", carto_qualif_ALLIANCES[circo].cl) const findMe = carto_qualif_ALLIANCES[circo].cl.find(d => {return d.r == category}); const colorScale = d3.scaleThreshold(colorScaleThreshold[category], colorScaleDict[category]); colorC = colorScale(findMe.b) /*colorC = accessibility ? couleurs_regroupement_accessible[equiv_regroupement_accessible[category]] : groupedColors[category];*/ /*if (carto_qualif[circo].ql.includes(category)) { colorC = accessibility ? couleurs_regroupement_accessible[equiv_regroupement_accessible[category]] : groupedColors[category]; } else if (carto_qualif[circo].el.includes(category)) { colorC = '#8B92A1'; } else if (!(carto_qualif[circo].ql.includes(category)) && !(carto_qualif[circo].el.includes(category))) { colorC = '#BDC1C8'; } else { colorC = '#E2E4E9'; }*/ } } return { circo, colorC, res, ft, } }).sort((a, b) => a.colorC < b.colorC ? -1 : 1); // Fill circos zonesCirco.selectAll(".eu_fp_map_circo") .data(circos.features) .join("path") .attr("class", "eu_fp_map_circo") .attr("name", d => d.properties.dc) .attr("stroke-linejoin", "round") .attr("d", pathGenerator) .transition() .duration(500) .attr("fill", d => { if (d.properties.d == '099') return 'var(--map-circo-bg)'; else return dataC.find(f => f.circo == d.properties.dc).colorC; }); // Francais de l'etranger exception pointsFe.selectAll(".eu_fp_map_fe") .data(fe.features) .join("path") .attr("class", "eu_fp_map_fe") .attr("name", d => d.properties.dc) .attr("pointer-events", "none") .attr("d", pathGenerator.pointRadius(3)) .transition() .duration(500) .attr("fill", d => { return dataC.find(f => f.circo == d.properties.dc).colorC; }); // Constant mouse event d3.selectAll(".eu_fp_map_tooltipcross").on("click", onMouseOut); // Handle all variable mouse events handleMouseEvents(); } // Draw borders const circoBorders = g.append("path") .attr("class", "eu_fp_border") .datum(bordersCirco) .attr("fill", "none") .attr("stroke", borderColor) .attr("stroke-width", smallStroke) .attr("stroke-linejoin", "round") .attr("d", pathGenerator) .attr("pointer-events", "none"); const deptBorders = g.append("path") .attr("class", "eu_fp_border") .datum(bordersDept) .attr("fill", "none") .attr("stroke", borderColor) .attr("stroke-width", bdStroke) .attr("stroke-linejoin", "round") .attr("d", pathGenerator) .attr("pointer-events", "none"); const franceBorders = g.append("path") .attr("class", "eu_fp_border") .datum(bordersFrance) .attr("fill", "none") .attr("stroke", borderColor) .attr("stroke-width", bdStroke) .attr("stroke-linejoin", "round") .attr("d", pathGenerator) .attr("pointer-events", "none"); const pointsFe = g.append("g"); // Add cities const pointsCities = g.append("path") .datum(citiesFilteredCircles) .attr("class", "eu_fp_map_points") .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 1) .attr("stroke-dasharray", "0.8 1.2") .attr("stroke-linejoin", "round") .attr("pointer-events", "none") .attr("d", pathGenerator) .attr("display", "none"); const textCities = g.selectAll("text") .data(citiesFilteredNames) .join("text") .text(d => d.properties.n) .attr("fill", "#000") .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-weight", 500) .attr("font-size", textCitiesSize) .attr("stroke", "#fff") .attr("stroke-opacity", 0.8) .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("paint-order", "stroke fill") .attr("pointer-events", "none") .attr('transform', d => `translate(${pathGenerator.centroid(d)[0]}, ${pathGenerator.centroid(d)[1]})`) .attr("display", "none"); // Fill map a first time updateMapFp(category, false); // Add overseas legend const textOverseas = g.append("text") .attr("y", dimensions.height * 0.8) .attr("x", dimensions.width * 0.02) .attr("fill", "#717B8E") .attr("font-size", isMobile ? 11 : 13) .attr("pointer-events", "none") .text("Outremer"); const textFe = g.append("text") .attr("y", dimensions.height * 0.8) .attr("x", dimensions.width * 0.505) .attr("fill", "#717B8E") .attr("font-size", isMobile ? 11 : 13) .attr("pointer-events", "none") .text("Français de l'étranger"); // Update legend const updateLegendFp = (category, accessibility) => { //const newColors = accessibility ? couleurs_regroupement_accessible : groupedColors; const newColors = accessibility ? daltColors : groupedColors; const legendContainer = document.querySelector(".eu_fp_map_legend"); const subtitleContainer = document.querySelector(".eu_fp_map_subtitle"); legendContainer.innerHTML = ''; let count = 0; if (category == 'first') { legendContainer.style.display = "grid"; subtitleContainer.innerHTML = `${text.leg0}`; const dataLeg = legend_carto_nuances_ALLIANCES; dataLeg.forEach(c => { count += c[1]; if (c[1] > 0) { const name = c[0] === 'Rassemblement national' ? 'RN' : c[0]; legendContainer.innerHTML += `

    ${name}(${c[1]})

    `; } }); if (count < 577) { console.log("HA") legendContainer.innerHTML += `

    Non parvenu (${577 - count})

    `; } } else if (category !== 'Other') { legendContainer.style.display = "block"; subtitleContainer.innerHTML = `${text.leg2}`; legendContainer.innerHTML += `` //const legData = legend_carto_qualif[category]; const colorScaleLeg = d3.scaleThreshold(colorScaleThreshold[category], colorScaleDict[category]); drawLegend({ color: colorScaleLeg, divWidth: dimensions.width, height: isMobile ? 18 : 30 }); // Add disclaimer legendContainer.innerHTML += `

    ${text.lego2}

    `; } else { legendContainer.style.display = "block"; subtitleContainer.innerHTML = `${legend_carto_qualif_ALLIANCES.Autres.q} ${text.lego1}`; const legData = accessibility ? detaieu_fp_qualif_autres_accessible : detaieu_fp_qualif_autres; // Add each qualified ensemble legData.forEach(c => { const name = c[0]; const colorName = accessibility ? c[0] : c[0]; legendContainer.innerHTML += `

    ${name}(${c[1]})

    `; }); // Add grey dot legend legendContainer.innerHTML += `

    ${text.legnoq}

    `; // Add disclaimer legendContainer.innerHTML += `

    ${text.lego2}

    `; } } // Fill legend a first time updateLegendFp(category, false); // Manage zoom const zoom = d3.zoom() .scaleExtent([1, 60]) .on("zoom", zoomed); // Click to zoom on a departement function clicked(event, d) { document.querySelector(".eu_fp_map_instrtxt").innerHTML = isMobile ? `${text.zm}` : `${text.z}`; if (isMobile) { tooltip.transition().duration(200) .style("transform", "translate(0, 100px)") .transition().delay(200) .style("display", "none"); } else tooltip.style("display", "none"); const [[x0, y0], [x1, y1]] = pathGenerator.bounds(d); if (event) event.stopPropagation(); // Adapt zoom max to device and dept shape let zoomMax = 120; svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity .translate(dimensions.width / 2, dimensions.height / 2) .scale(Math.min(zoomMax, 1 / Math.max((x1 - x0) / dimensions.width, (y1 - y0) / dimensions.height))) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2), ); if (k !== 1) { d3.selectAll(".eu_fp_map_reset") .transition().duration(100) .style("display", "block") .transition().duration(100) .style("opacity", 1); } svg.call(zoom); } // Zoom to selected circonscription when using search bar function zoomToCirco(data) { const circo = dataC.find(d => d.circo == data).ft; clicked(null, circo); clickOnCirco(null, circo); svg.call(zoom); } // Hide tooltip when scrolling out of the map let topPos = window.scrollY + document.querySelector(".eu_fp_figure_title").getBoundingClientRect().top - 500; let bottomPos = window.scrollY + document.querySelector(".eu_fp_map_wrapper").getBoundingClientRect().bottom + 100; window.onscroll = () => { let currentPos = window.pageYOffset; if (isMobile) { if ((currentPos > bottomPos && currentPos > topPos) || (currentPos < topPos && currentPos < bottomPos)) { tooltip.transition().duration(50) .style("transform", "translate(0, 100px)") .transition().delay(50) .style("display", "none"); } } } // A function to set mouse events depending on zoom level function handleMouseEvents() { if (k >= 2) { zonesDept.attr("pointer-events", "none").on("mouseover mousemove click", null); textCities.attr("display", "block"); pointsCities.attr("display", "block"); svg.selectAll(".eu_fp_map_circo") .on("mouseover", isMobile ? null : mouseOverCirco) .on("mousemove", isMobile ? null : mouseMove) .on("mouseout", isMobile ? onMouseOut : onMouseOutDesktop) .on("click", clickOnCirco); svg.selectAll(".eu_fp_map_fe") .attr("pointer-events", "auto") .on("mouseover", isMobile ? null : mouseOverCirco) .on("mousemove", isMobile ? null : mouseMove) .on("mouseout", isMobile ? onMouseOut : onMouseOutDesktop) .on("click", clickOnCirco); } else { if (textCities) textCities.attr("display", "none"); if (pointsCities) pointsCities.attr("display", "none"); zonesDept.attr("pointer-events", "auto") .on("click", clicked) .on("mouseover", isMobile ? null : mouseOverDept) .on("mousemove", isMobile ? null : mouseMove) .on("mouseout", isMobile ? null : onMouseOut); svg.selectAll(".eu_fp_map_fe") .attr("pointer-events", "none"); } } // Manage all those tooltips // Small dark tooltip function mouseOverCirco(event, datum) { const label = datum.properties.dc.split('_'); const title = `${label[1] > 9 ? label[1] : label[1][1]}${label[1] == '01' ? "re" : "e"} circonscription ${deptDict[label[0]].l}${deptDict[label[0]].d}`; tooltipDept.select('.eu_fp_map_tooltipvalue') .attr('aria-label', 'Nom de la circonscription') .html(title); if (isMobile) { tooltipDept.style("display", "block").transition().duration(200).style("transform", "translate(0, -100px)"); } else { tooltipDept.style("display", "block"); } } // Large results tooltip function clickOnCirco(event, datum) { d3.selectAll(".eu_fp_map_circo").attr("stroke-width", 0).attr("stroke", null); d3.selectAll(".eu_fp_map_fe").attr("stroke-width", 0).attr("stroke", null); if (datum.properties.dc == '' || datum.properties.dc == '099_00') return; console.log(datum.properties.dc) const label = datum.properties.dc.split('_'); const link = `https://www.lemonde.fr/resultats-elections/${deptDict[label[0]].url}#circonscription-${label[1]}`; const title = `${label[1] > 9 ? label[1] : label[1][1]}${label[1] == '01' ? "re" : "e"} circonscription ${deptDict[label[0]].l}${deptDict[label[0]].d}`; let content = ''; let detail = ''; let resData = dataC.find(d => d.circo == datum.properties.dc); // Hide legend content if (!isMobile) { document.querySelector(".eu_fp_map_tohide").style.display = "none"; } if (resData.res == undefined) { content = `${text.legs7}`; } else { console.log("qualif?", resData) detail = `${text.q}`; resData.res.forEach((q, i) => { if (i < 5) { const color = isAccessible ? daltColors[q.r] || '#D5D8DC' : groupedColors[q.r] || '#D5D8DC'; content += `

    ${!isMobile && q.n.length > 26 ? `${q.n.slice(0, 26)}...` : `${q.n}`}

    ${q.r}

    ${formatNb(q.a)} -

    ${formatNb(q.b)} %

    `; if (i < resData.res.length - 1) content += ``; } }); content += `${text.cta}`; } // Fill tooltip tooltip.select('.eu_fp_map_tooltiptitle') .attr('aria-label', 'Titre infobulle') .html(title); tooltip.select('.eu_fp_map_tooltiplegend') .attr('aria-label', 'Détail type de résultat') .html(detail); tooltip.select('.eu_fp_map_tooltipvalue') .attr('aria-label', 'Contenu infobulle') .html(content); // Show tooltip if (isMobile) { tooltip.style("display", "block").transition().duration(200).style("transform", "translate(0, -100px)"); } else { tooltip.style("display", "block"); } tmpStroke = d3.select(`.eu_fp_map_circo[name='${datum.properties.dc}']`) .attr("stroke", "var(--eu-dept-border-color)") .attr("stroke-width", bigStroke / k) .attr("stroke-linejoin", "round"); d3.select(`.eu_fp_map_fe[name='${datum.properties.dc}']`) .attr("stroke", "var(--eu-dept-border-color)") .attr("stroke-width", bigStroke / k) .attr("stroke-linejoin", "round"); } // Move small dark tooltip around function mouseMove(event, datum) { if (!isMobile) { const [x, y] = d3.pointer(event, svg.node()); tooltipDept.style("transform", `translate(` + `calc(-50% + ${x}px),` + `calc(-110% + ${y - 6}px))`); } } // Small dark tooltip for départements function mouseOverDept(event, datum) { const title = deptDict[datum.properties.d].d; // Fill and show tooltipDept.select('.eu_fp_map_tooltipvalue') .attr('aria-label', 'Nom du département') .html(title); if (isMobile) { tooltipDept.style("display", "block").transition().duration(200).style("transform", "translate(0, -100px)"); } else { tooltipDept.style("display", "block"); } } // Hide circonscription tooltip on desktop only function onMouseOutDesktop() { if (isMobile) { tooltipDept.transition().duration(200) .style("transform", "translate(0, 100px)") .transition().delay(200) .style("display", "none"); } else { tooltipDept.style("display", "none"); } } // Hide tooltip function onMouseOut() { d3.selectAll(".eu_fp_map_circo").attr("stroke-width", 0).attr("stroke", null); d3.selectAll(".eu_fp_map_fe").attr("stroke-width", 0).attr("stroke", null); if (isMobile) { tooltip.transition() .delay(0.2) .transition() .duration(200) .style("transform", "translate(0, 100px)") .transition() //.delay(200) .style("display", "none"); } else { tooltip.style("display", "none"); tooltipDept.style("display", "none"); } // Show legend again document.querySelector(".eu_fp_map_tohide").style.display = "block"; } // Reset function function resetMe() { // Avoid calling dezoom for no reason if (k == 1 && x == 0 && y == 0) return; // Hide tooltip onMouseOut(); // Dezoom svg.transition().duration(500).call( zoom.transform, d3.zoomIdentity, ); // Adjust instruction document.querySelector(".eu_fp_map_instrtxt").innerHTML = isMobile ? `${text.dzm}` : `${text.dz}`; // Disable zoom and pan until further interaction svg.on(".zoom", null); } // Zoom function function zoomed(event) { let { transform } = event; g.attr("transform", transform); circoBorders.attr("stroke-width", smallStroke / transform.k); deptBorders.attr("stroke-width", bdStroke / transform.k); franceBorders.attr("stroke-width", bdStroke / transform.k); pointsCities.attr("stroke-width", 1 / transform.k); textCities.attr("stroke-width", 3 / transform.k).attr("font-size", textCitiesSize / transform.k); pointsFe.attr("d", pathGenerator.pointRadius(3 / transform.k)); if (tmpStroke) tmpStroke.attr("stroke-width", bigStroke / transform.k); if (transform.k == 1 && transform.x == 0 && transform.y == 0) { d3.selectAll(".eu_fp_map_reset") .transition().duration(50) .style("opacity", 0) .transition().duration(50) .style("display", "none"); } else { d3.selectAll(".eu_fp_map_reset") .style("display", "block") .style("opacity", 1); } k = transform.k; x = transform.x; y = transform.y; handleMouseEvents(); } // Watch reset and zoom buttons document.querySelector(".eu_fp_map_reset").onclick = (e) => { resetMe(); } document.querySelector(".eu_fp_map_plus").onclick = (e) => { svg.transition().duration(500).call(zoom.scaleBy, 2.002); svg.call(zoom); } document.querySelector(".eu_fp_map_minus").onclick = (e) => { svg.transition().duration(500).call(zoom.scaleBy, 0.5); svg.call(zoom); } // Watch accessibility switch document.querySelector(".eu_fp_map_switch").oninput = (e) => { isAccessible = e.target.checked; updateMapFp(category, isAccessible); updateLegendFp(category, isAccessible); } });}initMapFp('fr');

    Que l’on regarde les résultats par listes ou par grands blocs, les élections législatives procèdent d’une mécanique bien différente des élections européennes. Il s’agit de 577scrutins distincts, dans lesquels l’implantation et la notoriété des personnalités politiques peuvent jouer un rôle déterminant.

    Les thèmes de la courte campagne électorale différeront aussi, puisque les compétences du Parlement européen et de l’Assemblée nationale ne sont pas les mêmes. Alors que la participation a plafonné à 51,83% des inscrits sur les listes électorales le 9juin, le niveau de mobilisation, difficile à anticiper, jouera également un rôle majeur dans l’issue du prochain scrutin.

    Plusieurs précédents invitent à la prudence quand on s’essaie à appliquer les résultats d’un scrutin à un autre. En2017, l’analyse des scores de la présidentielle remportée par Emmanuel Macron laissait entrevoir un raz-de-marée pour La République en marche aux législatives de juin, certaines projections créditant le parti de 400, voire de 450élus sur 577. Le parti présidentiel avait finalement envoyé 361députés au Palais-Bourbon.

    La carte suivante présente chaque circonscription législative sous la forme d’un hexagone, afin de mieux représenter les régions très peuplées – car ce sont les citoyens qui votent, pas les superficies. Ces hexagones sont placés en les rapprochant autant que possible de leur localisation géographique, ce qui n’est pas toujours possible dans les zones très denses.

    Couleurs adaptées aux daltoniens

    "; html += ''; for (const [i, d] of dataAll.entries()) { html += `

    ' + d.Nom + " : " + milliersBRT((+d.Prc_exprimes).toFixed(2)).replace(",00", "") + "%

    "; } return html; }) .on("mouseover", function () { var sel = d3.select(this); sel.moveToFront(); }); } } // on génère la légende leg = ""; for (const [nom, col] of Object.entries(dicoLegende)) { leg += '

    ' + nom + "

    "; } d3.select("#legprojection").html(leg); make_tooltip("#carteHexaProjection .hexa path"); // console.warn("FP", frontpop, "RN", rn) } function mettreAJour(daltonien) { // les hexagones d3.selectAll("#carteHexaProjection .hexa path") .style("--fill-color", function () { if (d3.select(this).attr("data-circo")) { circoTMP = d3.select(this).attr("data-circo"); dataTMP = dicoResultats[circoTMP]; if (daltonien) { return dataTMP[0].couleur_daltonien; } else { return dataTMP[0].couleur; } } }) .style("stroke", function () { if (d3.select(this).attr("data-circo")) { circoTMP = d3.select(this).attr("data-circo"); dataTMP = dicoResultats[circoTMP]; if (daltonien) { return d3.rgb(dataTMP[0].couleur_daltonien).darker(1); } else { return d3.rgb(dataTMP[0].couleur).darker(1); } } }); // la légende d3.selectAll("#legprojection span.hexagone").style("color", function () { partiTMP = d3.select(this).attr("data-parti"); if (daltonien) { return dicoLegende[partiTMP][1]; } else { return dicoLegende[partiTMP][0]; } }); } function classer(data) { let dicoResultats = {}; for (const [i, d] of data.entries()) { if (d.Prc_exprimes >= minPrct) { if (!dicoResultats[d.circo]) { dicoResultats[d.circo] = []; } dicoResultats[d.circo].push(d); } } return dicoResultats; } let isAccessible = false; const dataAlliance = await d3.csv(url_alliances); const dataSansAlliance = await d3.csv(url_sans_alliances); dicoAlliances = classer(dataAlliance); dicoSansAlliances = classer(dataSansAlliance); colorer(dicoSansAlliances); document .querySelector(".lmui-tabs-wrapper") .addEventListener("click", (e) => { if (e.target.classList.contains("lmui-tab")) { document .querySelectorAll(".lmui-tab.lmui-tab_enabled") .forEach((tab) => { tab.classList.remove("lmui-tab_enabled"); }); e.target.classList.add("lmui-tab_enabled"); colorer( e.target.textContent.includes("Avec") ? dicoAlliances : dicoSansAlliances ); } }); // événement au clic const switch_btn = document.querySelector( "#projDeputes .eu_map_switch input" ); if (switch_btn) { switch_btn.addEventListener("input", function () { isAccessible = switch_btn.checked; if (switch_btn.checked) { document.querySelector("#projDeputes").classList.add("daltonien"); document.querySelector("#legprojection").classList.add("daltonien"); } else { document.querySelector("#projDeputes").classList.remove("daltonien"); document .querySelector("#legprojection") .classList.remove("daltonien"); } }); } } run_hexa();
    En cartes : les résultats des européennes projetés dans les 577 circonscriptions législatives en France (2024)

    References

    Top Articles
    Latest Posts
    Article information

    Author: Mrs. Angelic Larkin

    Last Updated:

    Views: 5519

    Rating: 4.7 / 5 (67 voted)

    Reviews: 82% of readers found this page helpful

    Author information

    Name: Mrs. Angelic Larkin

    Birthday: 1992-06-28

    Address: Apt. 413 8275 Mueller Overpass, South Magnolia, IA 99527-6023

    Phone: +6824704719725

    Job: District Real-Estate Facilitator

    Hobby: Letterboxing, Vacation, Poi, Homebrewing, Mountain biking, Slacklining, Cabaret

    Introduction: My name is Mrs. Angelic Larkin, I am a cute, charming, funny, determined, inexpensive, joyous, cheerful person who loves writing and wants to share my knowledge and understanding with you.