44:["$","title",null,{"children":"La terre ne vote pas | geo-theo | Observable"}] 4c:T753b,const frenchElection = await (async () => { const root = document.createElement("div"); root.style.cssText = "width:100%;max-width:1144px;min-width:0;font-family:system-ui;color:#243f4b;"; const status = document.createElement("p"); status.setAttribute("role", "status"); status.setAttribute("aria-live", "polite"); status.style.cssText = "font-size:12px;margin:8px 14px;min-height:18px;"; status.textContent = "Chargement des données…"; root.append(status); display(root); const cleanups = []; let disposed = false, revision = 0, paintRevision = 0; let current = null, cached = null, frame = null, observer = null; let width = Math.min(1100, root.clientWidth || document.documentElement.clientWidth || 1100); function on(target, type, handler) { target.addEventListener(type, handler); cleanups.push(() => target.removeEventListener(type, handler)); } invalidation.then(() => { disposed = true; revision++; paintRevision++; if (frame !== null) cancelAnimationFrame(frame); observer?.disconnect(); for (const cleanup of cleanups) cleanup(); current = cached = null; }); try { const libs = await (async () => { const [d3, topojson, Plot] = await Promise.all([ import("https://cdn.jsdelivr.net/npm/d3@7.9.0/+esm"), import("https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/+esm"), import("https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17/+esm") ]); return {d3, topojson, Plot}; })(); const files = await (async () => { const [communes, departements, regions, records] = await Promise.all([ FileAttachment("communes-light.json").json(), FileAttachment("departements-light@2.json").json(), FileAttachment("regions-light.json").json(), FileAttachment("france-election-2022.csv").csv() ]); const numeric = ["population", "registered", "voters", "blank", "null", "valid", "macron", "lepen"]; for (const row of records) { for (const key of numeric) row[key] = row[key] === "" ? null : +row[key]; row.memberCodes = row.memberCodes.split("|"); } return {communes, departements, regions, records}; })(); const geographies = await (async () => { const {topojson} = libs; const result = {}; for (const level of ["communes", "departements", "regions"]) { const topology = files[level]; const object = Object.values(topology.objects)[0]; const key = {communes: "INSEE_COM", departements: "INSEE_DEP", regions: "INSEE_REG"}[level]; const geometryByCode = new Map(object.geometries.map(g => [g.properties[key], g])); result[level] = files.records.filter(d => d.level === level).map(row => { const members = row.memberCodes.map(code => { const g = geometryByCode.get(code); if (!g) throw new Error(`Missing ${level} geometry: ${code}`); return g; }); const geometry = members.length === 1 ? topojson.feature(topology, members[0]).geometry : topojson.merge(topology, members); return {type: "Feature", id: row.code, properties: row, geometry}; }); if (!result[level].length) throw new Error(`No records for ${level}`); } return result; })(); const cartogramEngine = await (async () => { const {d3} = libs; const path = d3.geoPath(); // Planar area, centroid and bounds, after projection. const mapGeometry = (geometry, fn) => ({...geometry, coordinates: geometry.type === "Polygon" ? geometry.coordinates.map(r => r.map(fn)) : geometry.coordinates.map(p => p.map(r => r.map(fn))) }); const points = geometry => geometry.type === "Polygon" ? geometry.coordinates.flat() : geometry.coordinates.flat(2); async function prepare(features, weight, cancelled = () => false, progress = () => {}) { if (!features.length) throw new Error("No polygons in this selection."); if (features.some(f => f.properties[weight] == null)) { throw new Error("Population 2022 is unavailable for Mayotte in this INSEE release. Select registered voters or valid votes, or choose another territory."); } const all = features.flatMap(f => points(f.geometry)); const lon = d3.extent(all, p => p[0]), lat = d3.extent(all, p => p[1]); const projection = d3.geoAzimuthalEqualArea() .rotate([-(lon[0] + lon[1]) / 2, -(lat[0] + lat[1]) / 2]) .translate([0, 0]).scale(1); let projected = features.map(f => ({...f, geometry: mapGeometry(f.geometry, projection)})); const rawBounds = path.bounds({type: "FeatureCollection", features: projected}); const scale = 1000 / Math.max(rawBounds[1][0] - rawBounds[0][0], rawBounds[1][1] - rawBounds[0][1]); projected = projected.map(f => ({...f, geometry: mapGeometry(f.geometry, ([x, y]) => [(x - rawBounds[0][0]) * scale, (y - rawBounds[0][1]) * scale])})); const totalArea = d3.sum(projected, f => path.area(f)); const totalWeight = d3.sum(projected, f => f.properties[weight]); if (!(totalWeight > 0)) throw new Error("This selection has no positive values for the chosen size variable."); // One common area-per-person factor: no caps, minimum sizes or separate // normalisation for individual polygons. All islands and holes are retained. const k = totalArea * 0.42 / totalWeight; const nodes = projected.map(f => { const [cx, cy] = path.centroid(f), area = path.area(f); if (!(area > 0) || !Number.isFinite(cx + cy)) throw new Error(`Invalid polygon ${f.id}`); const factor = Math.sqrt(k * f.properties[weight] / area); const radius = d3.max(points(f.geometry), ([x, y]) => Math.hypot(x - cx, y - cy)) * factor; return {feature: f, cx, cy, x: cx, y: cy, area, factor, radius}; }); // Bounding circles contain every vertex, so disjoint circles imply disjoint // polygons. The force seeks nearby positions; a deterministic packing pass // below removes residual overlaps rather than silently hiding large cities. progress({phase: "simulation", count: nodes.length}); const large = nodes.length > 5000; const simulation = d3.forceSimulation(nodes).stop() .randomSource(d3.randomLcg(0.2022)) .force("x", d3.forceX(d => d.cx).strength(0.08)) .force("y", d3.forceY(d => d.cy).strength(0.08)) .force("collide", d3.forceCollide(d => d.radius + 0.6).strength(1).iterations(large ? 1 : 3)); for (let i = 0; i < (large ? 35 : 180); i++) { simulation.tick(); if (i % 15 === 0) { if (cancelled()) throw new Error("Selection changed; cartogram cancelled."); await new Promise(resolve => setTimeout(resolve, 0)); } } // Largest first, quadtree-pruned collision queries. Circles are indexed by // centre; each quadtree node stores its largest descendant radius. progress({phase: "packing", count: nodes.length}); const placed = d3.quadtree().x(d => d.x).y(d => d.y); let blockingRadius = 0; const overlaps = n => { let hit = false; placed.visit((q, x0, y0, x1, y1) => { const reach = n.radius + (q.maxRadius || 0) + 1.2; if (hit || x0 > n.x + reach || x1 < n.x - reach || y0 > n.y + reach || y1 < n.y - reach) return true; if (!q.length) for (let leaf = q; leaf; leaf = leaf.next) { const b = leaf.data; if (Math.hypot(n.x - b.x, n.y - b.y) < n.radius + b.radius + 1.2) { hit = true; blockingRadius = b.radius; break; } } return hit; }); return hit; }; const annotate = () => placed.visitAfter(q => { q.maxRadius = q.length ? d3.max(q, c => c?.maxRadius || 0) : q.data.radius; }); let count = 0; for (const n of [...nodes].sort((a, b) => b.radius - a.radius)) { const startX = n.x, startY = n.y; let attempt = 0, searchStep = Math.max(1.5, n.radius * 0.18); while (overlaps(n)) { attempt++; // At national commune scale, jump past a large blocking city instead // of probing thousands of sub-pixel positions inside it. if (large) searchStep = Math.max(searchStep, blockingRadius * 0.25); const angle = attempt * 2.399963229728653; const distance = searchStep * Math.sqrt(attempt); n.x = startX + Math.cos(angle) * distance; n.y = startY + Math.sin(angle) * distance; } const oldExtent = placed.extent(); placed.cover(n.x, n.y); const newExtent = placed.extent(); if (oldExtent && (oldExtent[0][0] !== newExtent[0][0] || oldExtent[0][1] !== newExtent[0][1] || oldExtent[1][0] !== newExtent[1][0])) annotate(); placed.add(n); // Updating only the ancestor branch avoids O(n²) full-tree annotation. const visit = placed.root(); if (visit) { let q = visit, x0 = placed.extent()[0][0], y0 = placed.extent()[0][1], x1 = placed.extent()[1][0], y1 = placed.extent()[1][1]; const branch = []; while (q) { branch.push(q); if (!q.length) break; const xm = (x0 + x1) / 2, ym = (y0 + y1) / 2; const right = n.x >= xm, bottom = n.y >= ym; q = q[(bottom << 1) | right]; if (right) x0 = xm; else x1 = xm; if (bottom) y0 = ym; else y1 = ym; } for (const q of branch.reverse()) { q.maxRadius = q.length ? d3.max(q, c => c?.maxRadius ?? c?.data?.radius ?? 0) : q.data.radius; } } if (++count % 500 === 0) { progress({phase: "packing", placed: count, count: nodes.length}); if (cancelled()) throw new Error("Selection changed; cartogram cancelled."); await new Promise(resolve => setTimeout(resolve, 0)); } } // A fixed domain shared by every slider position prevents an apparent zoom. progress({phase: "bounds", count: nodes.length}); const extremes = nodes.flatMap(n => [[n.cx, n.cy], [n.x - n.radius, n.y - n.radius], [n.x + n.radius, n.y + n.radius], ...points(n.feature.geometry)]); const xb = d3.extent(extremes, p => p[0]), yb = d3.extent(extremes, p => p[1]); const domain = {type: "MultiPoint", coordinates: [[xb[0] - 8, yb[0] - 8], [xb[1] + 8, yb[1] + 8]]}; return {nodes, domain, k, weight}; } function interpolate(layout, t) { if (t === 0) return layout.nodes.map(n => n.feature); return layout.nodes.map(n => { const s = 1 + t * (n.factor - 1), x = n.cx + t * (n.x - n.cx), y = n.cy + t * (n.y - n.cy); return {...n.feature, geometry: mapGeometry(n.feature.geometry, ([px, py]) => [x + (px - n.cx) * s, y + (py - n.cy) * s])}; }); } return {prepare, interpolate, mapGeometry, points}; })(); if (disposed) return root; async function select(territory, adminLevel) { // Always define scope from communes, then aggregate. A department scope at // region level therefore shows that department's contribution to its region. const include = p => territory === "metro" ? !p.dep.startsWith("97") : territory.startsWith("r:") ? p.reg === territory.slice(2) : p.dep === territory.slice(2); const communes = geographies.communes.filter(f => include(f.properties)); const sums = new Map(); const keys = ["population", "registered", "voters", "blank", "null", "valid", "macron", "lepen"]; const groupKey = p => adminLevel === "communes" ? p.code : adminLevel === "departements" ? p.dep : p.reg; for (const f of communes) { const p = f.properties, id = groupKey(p); if (!sums.has(id)) sums.set(id, {count: 0, missingPop: 0, ...Object.fromEntries(keys.map(k => [k, 0]))}); const sum = sums.get(id); sum.count++; if (p.population == null) sum.missingPop++; for (const k of keys) sum[k] += p[k] ?? 0; } const features = geographies[adminLevel].filter(f => sums.has(f.id)).map(f => { const sum = sums.get(f.id); return {...f, properties: {...f.properties, ...sum, population: sum.missingPop ? null : sum.population}}; }); // Filter-only geography would be misleading for a department selected at // region level: draw that department's boundary instead of the whole region. if (territory.startsWith("d:") && adminLevel === "regions") { features[0].geometry = geographies.departements.find(f => f.id === territory.slice(2)).geometry; features[0].properties.name += " · département sélectionné"; } const totals = Object.fromEntries(keys.map(k => [k, k === "population" && communes.some(f => f.properties.population == null) ? null : libs.d3.sum(communes, f => f.properties[k] ?? 0) ])); const scopeName = territory === "metro" ? "France métropolitaine" : territory.startsWith("r:") ? geographies.regions.find(f => f.id === territory.slice(2)).properties.name : geographies.departements.find(f => f.id === territory.slice(2)).properties.name; return {features, totals, scopeName, communeCount: communes.length}; } async function createDrawing(selection, areaWeight, adminLevel) { const {d3, Plot} = libs; const palette = ["#b65432", "#f3eddf", "#24648a"]; const colour = d3.scaleLinear([0, 0.5, 1], palette).clamp(true); const fmt = new Intl.NumberFormat("fr-FR"); const pct = x => Number.isFinite(x) ? `${(100 * x).toFixed(1).replace(".", ",")} %` : "—"; const weightLabel = {population: "population", registered: "électeurs inscrits", valid: "suffrages exprimés"}; const element = (tag, text, css = "") => { const e = document.createElement(tag); if (text != null) e.textContent = text; e.style.cssText = css; return e; }; function tooltip(f) { const p = f.properties; return [p.name + " · " + f.id, p.valid ? `Macron ${pct(p.macron / p.valid)} · Le Pen ${pct(p.lepen / p.valid)}` : "Aucun suffrage exprimé retenu dans les résultats définitifs", `Macron : ${fmt.format(p.macron)} voix · Le Pen : ${fmt.format(p.lepen)} voix`, `Population 2022 : ${p.population == null ? "non disponible" : fmt.format(p.population)}`, `Inscrits : ${fmt.format(p.registered)} · Votants : ${fmt.format(p.voters)}`, `Participation : ${p.registered ? pct(p.voters / p.registered) : "—"}`, `Blancs : ${fmt.format(p.blank)} · Nuls : ${fmt.format(p.null)}`, p.memberCodes?.length > 1 ? `Communes regroupées : ${p.memberCodes.join(", ")}` : "" ].filter(Boolean).join("\n"); } function plot(layout, t, w, height = Math.round(w * 1.02)) { const features = cartogramEngine.interpolate(layout, t); const chart = Plot.plot({ width: w, height, margin: 12, projection: {type: "identity", domain: layout.domain, inset: 8}, style: {background: "transparent", color: "#253c44", fontFamily: "Georgia, serif"}, ariaLabel: `${selection.scopeName}, présidentielle 2022 : ${t === 0 ? "superficie" : weightLabel[areaWeight]}`, marks: [Plot.geo(features, { fill: {value: f => f.properties.valid > 0 ? colour(f.properties.macron / f.properties.valid) : "#aaa69c", scale: null}, stroke: "#faf7f1", strokeWidth: adminLevel === "communes" ? 0.12 : 0.55, title: tooltip, tip: true })] }); chart.style.maxWidth = "100%"; chart.style.height = "auto"; return chart; } function panel(layout, t, w, title, subtitle = "") { const panel = element("section", null, "min-width:0;border:1px solid #c8c2b6;padding:12px;background:radial-gradient(ellipse at 50% 42%,#f9f6ee 10%,#ece5d9 100%);"); panel.append(element("h3", title, "font:600 18px Georgia,serif;margin:2px 4px 5px;color:#243f4b;")); panel.append(element("div", subtitle, "font:12px system-ui;min-height:18px;margin-left:4px;color:#675f52;")); panel.append(plot(layout, t, w)); return panel; } function legend(w = 420) { const key = element("div", null, `width:${w}px;max-width:100%;font:11px system-ui;`); key.append(element("div", "Part de Macron dans les suffrages exprimés", "margin-bottom:5px;")); key.append(element("div", null, `height:10px;background:linear-gradient(to right,${palette.join(",")});`)); const ticks = element("div", null, "display:flex;justify-content:space-between;margin-top:4px;"); for (const text of ["100 % Le Pen", "50 / 50", "100 % Macron"]) ticks.append(element("span", text)); key.append(ticks); return key; } return {plot, panel, legend, element, colour, fmt, pct, weightLabel}; } async function drawDashboard(selection, layout, drawing, areaWeight, morph) { const {element, panel, legend, fmt, pct, weightLabel} = drawing; const w = Math.max(300, Math.min(1100, width)); const root = element("div", null, "font-family:system-ui;color:#243f4b;background:#fbf8f1;padding:22px;box-sizing:border-box;max-width:1144px;"); root.append(element("div", "30 DAY MAP CHALLENGE · 03 / POLYGONS", "font-size:10px;letter-spacing:2px;color:#7b7162;")); root.append(element("h1", "La terre ne vote pas.", "font:600 clamp(28px,5vw,48px) Georgia,serif;margin:12px 0 8px;letter-spacing:-1.2px;")); root.append(element("p", `${selection.scopeName} · Présidentielle, second tour · 24 avril 2022`, "margin:0 0 18px;font-size:13px;color:#756d60;")); const maps = element("div", null, "display:grid;gap:12px;align-items:start;"); const cols = w < 650 ? 1 : 2, panelWidth = (w - 44 - (cols - 1) * 12) / cols - 26; maps.style.gridTemplateColumns = `repeat(${cols},minmax(0,1fr))`; maps.append(panel(layout, 0, panelWidth, "La superficie", "Un même km² occupe une même surface.")); maps.append(panel(layout, morph, panelWidth, morph === 1 ? "Les personnes" : morph === 0 ? "La superficie" : "La transformation", morph === 1 ? `Surface ∝ ${weightLabel[areaWeight]}.` : `Transformation : ${Math.round(100 * morph)} %`)); root.append(maps); const key = element("div", null, "display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:15px 0;"); key.append(legend(Math.min(430, w - 70)), element("span", "■ Gris : aucun suffrage exprimé retenu", "font-size:11px;color:#78756d;")); root.append(key); const s = selection.totals; root.append(element("div", "Les voix comptent, quelle que soit la carte.", "font:600 19px Georgia,serif;margin:10px 0;")); const bar = element("div", null, "display:flex;height:12px;width:100%;overflow:hidden;border-radius:2px;"); const mac = element("div", null, `background:#24648a;width:${s.valid ? s.macron / s.valid * 100 : 0}%;`); const lep = element("div", null, `background:#b65432;width:${s.valid ? s.lepen / s.valid * 100 : 0}%;`); bar.append(mac, lep); bar.setAttribute("role", "img"); bar.setAttribute("aria-label", `Macron ${pct(s.macron / s.valid)}, Le Pen ${pct(s.lepen / s.valid)}`); root.append(bar); const result = element("div", null, "display:flex;justify-content:space-between;gap:12px;font-size:12px;margin-top:7px;"); result.append(element("span", `Macron · ${pct(s.macron / s.valid)} · ${fmt.format(s.macron)} voix`), element("span", `Le Pen · ${pct(s.lepen / s.valid)} · ${fmt.format(s.lepen)} voix`)); root.append(result); root.append(element("p", `${fmt.format(s.valid)} suffrages exprimés · ${s.population == null ? "Population 2022 indisponible" : fmt.format(s.population) + " habitants (2022)"} · ${fmt.format(selection.communeCount)} unités communales`, "font-size:11px;color:#756d60;margin:10px 0 18px;")); root.append(element("p", "À droite, les polygones conservent leur forme et se déplacent pour libérer de la place. À 100 %, leur surface est exactement proportionnelle à la variable choisie. Les vues intermédiaires peuvent se chevaucher. Les couleurs montrent des résultats locaux : elles ne décrivent pas le vote de chaque habitant. La population comprend aussi les personnes qui ne votent pas.", "font-size:11px;line-height:1.6;color:#756d60;max-width:90ch;")); const sources = element("p", null, "font-size:10px;line-height:1.7;color:#756d60;border-top:1px solid #d5cdbf;padding-top:10px;margin:12px 0 0;"); for (const [label, url] of [ ["Résultats définitifs : ministère de l’Intérieur", "https://www.data.gouv.fr/datasets/election-presidentielle-des-10-et-24-avril-2022-resultats-definitifs-du-2nd-tour"], ["Population municipale 2022 : INSEE", "https://www.insee.fr/fr/statistiques/8290591"], ["Inspiration : Jo Wood, 30 Day Map Challenge 2024", "https://observablehq.com/@jwolondon/tdmc2024_day16"] ]) { const a = element("a", label, "color:inherit;margin-right:14px;"); a.href = url; a.target = "_blank"; a.rel = "noopener"; sources.append(a); } sources.append(element("div", "Géographie 2024 ; les communes scindées depuis 2022 sont regroupées pour conserver les résultats de 2022 sans les répartir artificiellement. Les départements d’outre-mer sont accessibles dans le menu Territoire. Les collectivités d’outre-mer et les Français de l’étranger ne figurent pas dans ces fonds de carte.")); root.append(sources); return root; } async function drawSnapshots(layout, drawing, areaWeight) { const w = Math.min(1100, Math.max(300, width)), cols = w < 650 ? 2 : 4; const root = drawing.element("div", null, `display:grid;grid-template-columns:repeat(${cols},minmax(0,1fr));gap:8px;max-width:1100px;`); const panelWidth = (w - (cols - 1) * 8) / cols - 26; for (const [t, label] of [[0, "La superficie"], [0.25, "25 %"], [0.6, "60 %"], [1, "Les personnes"]]) { root.append(drawing.panel(layout, t, panelWidth, label, t === 1 ? drawing.weightLabel[areaWeight] : "")); } return root; } async function drawData(selection) { const rows = selection.features.map(f => f.properties); return Inputs.table(rows.map(p => ({ code: p.code, nom: p.name, population2022: p.population, inscrits: p.registered, votants: p.voters, exprimes: p.valid, macron: p.macron, lePen: p.lepen, macronPct: p.valid ? +(100 * p.macron / p.valid).toFixed(2) : null, statut: p.valid ? "Résultat définitif" : "Aucun suffrage exprimé retenu" })), {rows: 10}); } const levelInput = Inputs.radio(new Map([ ["Départements", "departements"], ["Communes", "communes"], ["Régions", "regions"] ]), {label: "Polygones", value: "departements"}); levelInput.dataset.control = "level"; const territoryInput = Inputs.select(new Map([ ["France métropolitaine · Corse incluse", "metro"], ...geographies.regions.map(f => [f.properties.name, `r:${f.id}`]), ...geographies.departements.map(f => [`${f.id} · ${f.properties.name}`, `d:${f.id}`]) ]), {label: "Territoire", value: "metro"}); territoryInput.dataset.control = "territory"; const weightInput = Inputs.radio(new Map([ ["Population municipale 2022", "population"], ["Électeurs inscrits", "registered"], ["Suffrages exprimés", "valid"] ]), {label: "À droite, surface proportionnelle aux…", value: "population"}); weightInput.dataset.control = "weight"; const morphInput = Inputs.range([0, 1], { label: "De la terre aux personnes", value: 1, step: 0.01, format: x => x === 0 ? "Superficie" : x === 1 ? "Personnes" : `${Math.round(x * 100)} %` }); morphInput.dataset.control = "morph"; const controls = document.createElement("div"); controls.dataset.controls = "true"; controls.style.cssText = "display:flex;flex-direction:column;gap:10px;padding:14px;background:#fbf8f1;border:1px solid #d5cdbf;"; controls.append(levelInput, territoryInput, weightInput, morphInput); const output = document.createElement("div"); output.dataset.output = "dashboard"; function makeDetails(label, kind) { const details = document.createElement("details"); details.dataset.extra = kind; details.style.cssText = "margin:12px 0;border:1px solid #d5cdbf;padding:12px;background:#fbf8f1;"; const summary = document.createElement("summary"); summary.textContent = label; summary.style.cssText = "cursor:pointer;font-size:13px;"; const slot = document.createElement("div"); slot.style.marginTop = "12px"; details.append(summary, slot); return {details, slot}; } const snapshots = makeDetails("Comparaison en quatre étapes", "snapshots"); const data = makeDetails("Voir les données", "data"); root.replaceChildren(controls, status, output, snapshots.details, data.details); function reportError(error) { if (disposed) return; status.style.color = "#9a3528"; status.textContent = error instanceof Error ? error.message : String(error); root.setAttribute("aria-busy", "false"); } async function render() { if (disposed || !current) return; const state = current, paint = ++paintRevision; const chart = await drawDashboard(state.selection, state.layout, state.drawing, state.weight, +morphInput.value); if (disposed || state !== current || paint !== paintRevision) return; output.replaceChildren(chart); } function requestRender() { if (disposed || frame !== null) return; frame = requestAnimationFrame(() => { frame = null; void render().catch(reportError); }); } async function renderExtra(kind) { if (disposed || !current) return; const state = current, extra = kind === "snapshots" ? snapshots : data; if (!extra.details.open || state.extras[kind]) return; state.extras[kind] = true; try { const node = kind === "snapshots" ? await drawSnapshots(state.layout, state.drawing, state.weight) : await drawData(state.selection); if (!disposed && state === current) extra.slot.replaceChildren(node); } catch (error) { state.extras[kind] = false; if (!disposed && state === current) reportError(error); } } async function rebuild() { if (disposed) return; const token = ++revision; const territory = territoryInput.value, adminLevel = levelInput.value, weight = weightInput.value; const key = [territory, adminLevel, weight].join("|"); current = null; paintRevision++; root.setAttribute("aria-busy", "true"); output.style.opacity = "0.45"; status.style.color = "#756d60"; status.textContent = "Préparation du cartogramme…"; snapshots.slot.replaceChildren(); data.slot.replaceChildren(); try { const selection = await select(territory, adminLevel); if (disposed || token !== revision) return; const layout = cached?.key === key ? cached.layout : await cartogramEngine.prepare(selection.features, weight, () => disposed || token !== revision, progress => { if (!disposed && token === revision && progress.placed % 5000 === 0) status.textContent = "Placement : " + progress.placed.toLocaleString("fr-FR") + " / " + progress.count.toLocaleString("fr-FR"); }); if (disposed || token !== revision) return; cached = {key, layout}; const drawing = await createDrawing(selection, weight, adminLevel); if (disposed || token !== revision) return; current = {selection, layout, drawing, weight, extras: {}}; await render(); if (disposed || token !== revision) return; output.style.opacity = "1"; root.setAttribute("aria-busy", "false"); status.textContent = ""; await Promise.all([renderExtra("snapshots"), renderExtra("data")]); } catch (error) { if (disposed || token !== revision) return; current = null; output.replaceChildren(); output.style.opacity = "1"; reportError(error); } } for (const input of [levelInput, territoryInput, weightInput]) on(input, "input", () => {void rebuild();}); on(morphInput, "input", requestRender); on(snapshots.details, "toggle", () => {void renderExtra("snapshots");}); on(data.details, "toggle", () => {void renderExtra("data");}); if (typeof ResizeObserver !== "undefined") { observer = new ResizeObserver(() => { const next = Math.min(1100, root.clientWidth || 1100); if (Math.abs(next - width) < 2) return; width = next; if (current) { current.extras = {}; snapshots.slot.replaceChildren(); data.slot.replaceChildren(); void Promise.all([renderExtra("snapshots"), renderExtra("data")]); } requestRender(); }); observer.observe(root); } await rebuild(); return root; } catch (error) { if (!disposed) { status.style.color = "#9a3528"; status.textContent = error instanceof Error ? error.message : String(error); } throw error; } })();4d:[{"id":"5375cb715669a201f0fb3de4957f7d35caa96ba8398ccf8dd0844c3c743d8e6e658a80bdd0fd668419bd4d55e54dede24f5f1902b3b7aa881970835e1f1f29a7","href":"https://static.observableusercontent.com/files/5375cb715669a201f0fb3de4957f7d35caa96ba8398ccf8dd0844c3c743d8e6e658a80bdd0fd668419bd4d55e54dede24f5f1902b3b7aa881970835e1f1f29a7","name":"communes-light.json","type":"application/json","lastModified":1793704825956,"size":8247753},{"id":"a595735de0de32c0e298823428aacf11d364c8f3d8e965b9e9fda2948fe335c09365bf7a660b5aa94b887dd451c0f94496a9d0ec8b55787e6dd7e447c8d87fbf","href":"https://static.observableusercontent.com/files/a595735de0de32c0e298823428aacf11d364c8f3d8e965b9e9fda2948fe335c09365bf7a660b5aa94b887dd451c0f94496a9d0ec8b55787e6dd7e447c8d87fbf","name":"departements-light@2.json","type":"application/json","lastModified":1793704812142,"size":264565},{"id":"71c6cb4d365f14bb3dc63e20c14c710d2e26848939b98cf19079c3e7a51d13e6acebbe5408a584bc8b96d29c385405312731d631041906bcd87068511cdd29c0","href":"https://static.observableusercontent.com/files/71c6cb4d365f14bb3dc63e20c14c710d2e26848939b98cf19079c3e7a51d13e6acebbe5408a584bc8b96d29c385405312731d631041906bcd87068511cdd29c0","name":"france-election-2022.csv","type":"text/csv","lastModified":1793705767356,"size":3154417},{"id":"c96ada7d20574adf9d6a29643f67245d655a77ea903dfcc8c2f1a41a503027c0443a3e10aa26baa17ff3f12abbb59e9896677233b084ee1693689728f9443914","href":"https://static.observableusercontent.com/files/c96ada7d20574adf9d6a29643f67245d655a77ea903dfcc8c2f1a41a503027c0443a3e10aa26baa17ff3f12abbb59e9896677233b084ee1693689728f9443914","name":"regions-light.json","type":"application/json","lastModified":1793704822283,"size":169170}] 48:{"id":"b084007589bc346b","slug":"la-terre-ne-vote-pas","title":"La terre ne vote pas","thumbnail":"7dc857b3558d56f7e363e8f305d86e93f392ac91d0b3b38e0220bbcd9e33f379","access_level":"public","create_time":"$D2026-11-03T11:04:46.369Z","update_time":"$D2026-11-03T12:21:50.710Z","view_time":null,"first_public_time":"$D2026-11-03T12:09:32.898Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7c4453bfba6d243c","login":"geo-theo","name":"geo-theo","avatar_url":"https://avatars-next.observableusercontent.com/7c6e213507054a75d47cd8b842609fb692f2e960eb0ebe2d04712d7cf13d94b4","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":73,"publish_version":73,"role":null,"authored":false,"authors":[{"type":"individual","id":"0ebe4fb56285b831","login":"geo-theo","name":"geo-theo","avatar_url":"https://avatars-next.observableusercontent.com/7c6e213507054a75d47cd8b842609fb692f2e960eb0ebe2d04712d7cf13d94b4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"7c4453bfba6d243c","login":"geo-theo","name":"geo-theo","avatar_url":"https://avatars-next.observableusercontent.com/7c6e213507054a75d47cd8b842609fb692f2e960eb0ebe2d04712d7cf13d94b4","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"31dc16ad224713c9","slug":"30-day-map-challenge","title":"30DayMapChallenge","owner":{"id":"7c4453bfba6d243c","login":"geo-theo","name":"geo-theo"}},"type":"notebook","body":{"titling":"auto","title":"La terre ne vote pas","cells":[{"id":1,"value":"

\n\n# La terre ne vote pas\n## #30DayMapChallenge Day 03 (Polygons)\n\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$4c","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"2"}} 24:null