2b:null 2c:["$","title",null,{"children":"TEST FULLSCREEN n648 CARTE - FR | Marc Thevenin | Observable"}] 31:Ta41,boxMap = { const content = html`

${title2} ${viewof rWidth}

${viewof select}

${viewof legende1} ${cssLegMap} ${map}

${viewof histoT} ${displayH}

C.Vandermotten, C.Dessouroux, Population et Sociétés, 648, Octobre 2026, Ined.

Sources : Données issues de différentes bases de données (encadré 2).

`; return fullscreen(content, "boxMap"); } 32:T2903,map = { const width = rWidth; const height = width * 520 / 960; const outline = { type: "Polygon", coordinates: [[ ...d3.range(-180, 181, 1).map(x => [x, 83]), ...d3.range(83, -61, -1).map(y => [180, y]), ...d3.range(180, -181, -1).map(x => [x, -60]), ...d3.range(-60, 84, 1).map(y => [-180, y]) ]] }; const projection = d3.geoRobinson(); projection.fitExtent([[0, 0], [width, height]], outline); const path = d3.geoPath(projection); // helper : la zone/territoire fait-il partie de la sélection courante ? const inSelection = (zoneFr) => select === "Monde" || zoneFr === select; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", "100%") .attr("height", "auto") .style("display", "block"); svg.append("rect").attr("width", width).attr("height", height).attr("fill", "white"); const zoomLayer = svg.append("g").attr("id", "zoom-layer"); zoomLayer.append("path") .datum(worldCountriesMesh) .attr("d", path) .attr("fill", "none") .attr("stroke", "#e6e6e6") .attr("stroke-width", 0.4) .attr("vector-effect", "non-scaling-stroke"); zoomLayer.append("path") .datum(worldOutlineMesh) .attr("d", path) .attr("fill", "none") .attr("stroke", "#cfcfcf") .attr("stroke-width", 0.6) .attr("vector-effect", "non-scaling-stroke"); zoomLayer.append("g") .selectAll("path") .data(aire30.features) .join("path") .attr("d", path) .attr("fill", d => d.properties.Data__Enti ? (inSelection(d.properties.zoneFr) ? "#f1f1f1" : "none") : "none") .attr("stroke", d => d.properties.Data__Enti ? (inSelection(d.properties.zoneFr) ? "#222330" : "none") : "none") .attr("stroke-width", 0.4) .attr("vector-effect", "non-scaling-stroke"); zoomLayer.append("g") .selectAll("path") .data(regroupement.features) .join("path") .attr("d", path) .attr("fill", "none") .attr("stroke", "#818181") .attr("stroke-width", select === "Monde" ? 2 : 0.4) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("vector-effect", "non-scaling-stroke"); const rScale = d3.scaleSqrt() .domain([0, d3.max(airesData.features, d => d.properties.pop23)]) .range([0, width / 192]); // copie triée : on ne modifie plus airesData.features const sortedFeatures = [...airesData.features].sort((a, b) => b.properties.pop23 - a.properties.pop23); const circles = zoomLayer.append("g") .selectAll("circle") .data(sortedFeatures) .join("circle") .attr("transform", d => `translate(${projection(d.geometry.coordinates)})`) .attr("r", d => rScale(d.properties.pop23)) .attr("fill", d => colorScale(d.properties.edv23)) .attr("fill-opacity", d => inSelection(d.properties.zoneFr) && legende1.has(colorScale.range().indexOf(colorScale(d.properties.edv23))) ? 0.95 : 0.00) .attr("stroke", d => inSelection(d.properties.zoneFr) ? "#414141" : "none") .attr("stroke-width", 0.5) .attr("vector-effect", "non-scaling-stroke") .on("mouseover", function(event, d) { if (!inSelection(d.properties.zoneFr)) return; d3.select(this).raise().attr("stroke", "#111").attr("stroke-width", 1.5); tooltip.show(event, circleHTML(d), colorScale(d.properties.edv23)); }) .on("mousemove", (event) => tooltip.move(event)) .on("mouseout", function(event, d) { if (!inSelection(d.properties.zoneFr)) return; d3.select(this).attr("stroke", "#414141").attr("stroke-width", 0.5); tooltip.hide(); }) .on("click", function(event, d) { if (!inSelection(d.properties.zoneFr)) return; event.stopPropagation(); tooltip.handleClick(event, d.properties.Data__Enti, circleHTML(d), colorScale(d.properties.edv23)); }) // Atténuation du rescale des cercles au zoom (partagée avec la légende) const zoomAttenuation = 0.5; // ---- Légende des cercles proportionnels ----- const lgValues = [40000, 30000]; const lgLabels = ["40 millions", "30 millions"]; const lgFont = "Poppins, sans-serif"; const lgSize = "clamp(9px,2cqw,11px)"; const lgX0 = 10; const lgBase = height - 10; const lgGap = 15; const showLegend = rWidth >= 600; let legendBg, legendG, lgTitle, lgItems; if (showLegend) { legendBg = svg.append("rect") .attr("fill", "white").attr("fill-opacity", 0.85).attr("rx", 4); legendG = svg.append("g").attr("pointer-events", "none"); lgTitle = legendG.append("text") .attr("x", lgX0) .style("font-family", lgFont).style("font-size", lgSize) .style("font-weight", 600).style("fill", "#414141") .text("Effectif de la population (2023)"); lgItems = lgValues.map((v, i) => { const g = legendG.append("g"); const c = g.append("circle") .attr("fill", "none").attr("stroke", "#414141").attr("stroke-width", 0.5); const l = g.append("path") .attr("fill", "none").attr("stroke", "#414141").attr("stroke-width", 0.5); const t = g.append("text") .attr("dominant-baseline", "middle") .style("font-family", lgFont).style("font-size", lgSize).style("fill", "#414141") .text(lgLabels[i]); return { v, c, l, t, i }; }); } // fond blanc ajusté au contenu de la légende const fitLegendBg = () => { if (!legendG || !legendBg) return; const b = legendG.node().getBBox(); if (!b.width) return; legendBg.attr("x", b.x - 6).attr("y", b.y - 5) .attr("width", b.width + 12).attr("height", b.height + 10); }; function updateLegend(k, adjustBg = true) { if (!showLegend) return; const f = Math.pow(k, zoomAttenuation); const rs = lgValues.map(v => rScale(v) * f); const cx = lgX0 + rs[0]; const labelX = lgX0 + 2 * rs[0] + 28; const tops = rs.map(r => lgBase - 2 * r); const ly = [Math.min(tops[0], tops[1] - lgGap), tops[1]]; lgTitle.attr("y", ly[0] - 16); lgItems.forEach(({ c, l, t, i }) => { c.attr("cx", cx).attr("cy", lgBase - rs[i]).attr("r", rs[i]); l.attr("d", `M${cx},${tops[i]} H${cx + rs[0] + 4} L${labelX - 6},${ly[i]} H${labelX - 3}`); t.attr("x", labelX).attr("y", ly[i]); }); fitLegendBg(); } updateLegend(1); if (showLegend) { requestAnimationFrame(fitLegendBg); if (document.fonts?.ready) document.fonts.ready.then(fitLegendBg); } // légende pour type de zône if (showLegend) { const zlX = lgX0 + 170; const zlY = lgBase - 40; const zlG = svg.append("g").attr("pointer-events", "none"); const blobZone = "M4,10 C2,6 6,1 12,1 C18,0 24,3 23,7 C25,11 20,15 14,14 C8,16 3,14 4,10 Z"; zlG.append("path") .attr("transform", `translate(${zlX},${zlY})`) .attr("d", blobZone) .attr("fill", "#f1f1f1") .attr("stroke", "#222330") .attr("stroke-width", 0.4); zlG.append("text") .attr("x", zlX + 34).attr("y", zlY + 7) .style("font-family", lgFont).style("font-size", lgSize).style("fill", "#414141") .text("Zones de"); zlG.append("text") .attr("x", zlX + 34).attr("y", zlY + 18) .style("font-family", lgFont).style("font-size", lgSize).style("fill", "#414141") .text("population similaire"); if (select === "Monde") { const blobRegroup = "M6,10 C4,5 9,1 14,2 C19,1 22,6 19,10 C21,14 15,17 10,15 C5,17 3,13 6,10 Z"; zlG.append("path") .attr("transform", `translate(${zlX},${zlY + 28})`) .attr("d", blobRegroup) .attr("fill", "none") .attr("stroke", "#818181") .attr("stroke-width", 2); zlG.append("text") .attr("x", zlX + 34).attr("y", zlY + 35) .style("font-family", lgFont).style("font-size", lgSize).style("fill", "#414141") .text("Grands ensembles"); zlG.append("text") .attr("x", zlX + 34).attr("y", zlY + 46) .style("font-family", lgFont).style("font-size", lgSize).style("fill", "#414141") .text("régionaux"); } } // ZOOM zoomBehavior.on("zoom", (event) => { zoomLayer.attr("transform", event.transform); circles.attr("r", d => rScale(d.properties.pop23) / Math.pow(event.transform.k, 1 - zoomAttenuation)); updateLegend(event.transform.k); }); zoomBehavior.on("end", (event) => { mutable mapZoomState = event.transform; }); svg.call(zoomBehavior); // détecte un changement réel de sélection (pas juste un re-render dû à la légende/zoom manuel) const isSelectChange = select !== lastSelect; if (isSelectChange) { mutable lastSelect = select; } if (isSelectChange) { if (select === "Monde") { svg.transition().duration(750).call(zoomBehavior.transform, d3.zoomIdentity); } else { const zoneFeatures = aire30.features.filter(d => d.properties.zoneFr === select); const exclusion = zoneBoundsExclusions[select]; const lonLatBounds = manualLonLatBounds(zoneFeatures, exclusion?.minLon ?? -180, exclusion?.maxLon ?? 180, exclusion?.minLat ?? -90, exclusion?.maxLat ?? 90 ); const [[x0, y0], [x1, y1]] = path.bounds(bboxToPolygon(lonLatBounds)); const kMax = zoomBehavior.scaleExtent()[1]; const k = Math.min(kMax, 0.9 * Math.min(width / (x1 - x0), height / (y1 - y0))); const tx = width / 2 - k * (x0 + x1) / 2; const ty = height / 2 - k * (y0 + y1) / 2; svg.transition().duration(750).call( zoomBehavior.transform, d3.zoomIdentity.translate(tx, ty).scale(k) ); } } else { svg.node().__zoom = mapZoomState; zoomLayer.attr("transform", mapZoomState); circles.attr("r", d => rScale(d.properties.pop23) / Math.pow(mapZoomState.k, 1 - zoomAttenuation)); updateLegend(mapZoomState.k); } svg.on("click", () => tooltip.forceHide()); const container = html`

`; container.appendChild(svg.node()); const btnStyle = ` position:absolute; width:26px; height:26px; z-index:20; background:white; border:1px solid #999; border-radius:3px; cursor:pointer; font-size:14px; line-height:1; `; const btnPlus = html``; const btnMinus = html``; const btnReset = html``; btnPlus.onclick = () => svg.transition().call(zoomBehavior.scaleBy, 1.4); btnMinus.onclick = () => svg.transition().call(zoomBehavior.scaleBy, 1 / 1.4); btnReset.onclick = () => svg.transition().call(zoomBehavior.transform, d3.zoomIdentity); container.appendChild(btnPlus); container.appendChild(btnMinus); container.appendChild(btnReset); return container; }33:T62f,tooltipDotPlot = function(items) { if (!items.length) return ""; const sorted = items.slice().sort((a, b) => a.value - b.value); const scaleMin = globalEdvScale.min; const scaleMax = globalEdvScale.max; const width = 220; const labelW = 80; const valueW = 50; const trackX0 = labelW + valueW + 5; const trackWidth = width - trackX0 - 6; const rowHeight = 17; const height = sorted.length * rowHeight; const x = (v) => trackX0 + ((v - scaleMin) / (scaleMax - scaleMin)) * trackWidth; const rowsSvg = sorted.map((d, i) => { const y = 8 + i * rowHeight; const cx = x(d.value); const isAire = d.level === "aire"; const dotColor = colorScale(d.value); const dotRadius = 4; const dotStroke = isAire ? "#222330" : "#222330"; const dotStrokeWidth = isAire ? 1 : .5; const labelWeight = isAire ? "600" : "400"; return ` ${d.label.length > 14 ? d.label.slice(0, 14) + "…" : d.label} ${d.value.toFixed(1).replace(".", ",")} `; }).join(""); return ``; }34:Taa9,tooltip = { const el = html`

`; document.body.appendChild(el); // Le tooltip doit être dans l'overlay plein écran (top layer) pour être visible function attach() { const host = document.fullscreenElement ?? document.querySelector(".map-fs-wrap.is-full") ?? document.body; if (el.parentNode !== host) host.appendChild(el); } let pinned = false; let pinnedKey = null; function render(html_content, borderColor, event) { attach(); el.innerHTML = html_content + `

✕ fermer

`; el.style.border = borderColor ? `2px solid ${borderColor}` : "none"; el.style.opacity = 1; move(event); el.querySelector("div:last-child").onclick = () => forceHide(); } function move(event) { const tooltipWidth = el.getBoundingClientRect().width; const tooltipHeight = el.getBoundingClientRect().height; const offset = 12; let left = event.clientX + offset; if (left + tooltipWidth > window.innerWidth) left = event.clientX - offset - tooltipWidth; let top = event.clientY + offset; if (top + tooltipHeight > window.innerHeight) top = event.clientY - offset - tooltipHeight; el.style.left = left + "px"; el.style.top = top + "px"; } function forceHide() { pinned = false; pinnedKey = null; el.style.opacity = 0; } // Entrée/sortie du plein écran : on ferme le tooltip et on le remet dans le bon parent const onFsChange = () => { forceHide(); attach(); }; document.addEventListener("fullscreenchange", onFsChange); invalidation.then(() => { document.removeEventListener("fullscreenchange", onFsChange); el.remove(); }); return { show(event, html_content, borderColor) { if (pinned) return; attach(); el.innerHTML = html_content; el.style.border = borderColor ? `2px solid ${borderColor}` : "none"; el.style.opacity = 1; move(event); }, move(event) { if (pinned) return; move(event); }, hide() { if (pinned) return; el.style.opacity = 0; }, handleClick(event, key, html_content, borderColor) { if (pinned && pinnedKey === key) { forceHide(); } else { pinned = true; pinnedKey = key; render(html_content, borderColor, event); } }, forceHide, isPinned: () => pinned }; }35:T411,debugZoom = { const zoneFeatures = aire30.features.filter(d => d.properties.zoneFr === select); const exclusion = zoneBoundsExclusions[select]; const lonLatBounds = manualLonLatBounds(zoneFeatures, exclusion ? exclusion.minLon : -180, exclusion ? exclusion.maxLon : 180); const outline = { type: "Polygon", coordinates: [[ ...d3.range(-180, 181, 1).map(x => [x, 83]), ...d3.range(83, -61, -1).map(y => [180, y]), ...d3.range(180, -181, -1).map(x => [x, -60]), ...d3.range(-60, 84, 1).map(y => [-180, y]) ]] }; const projection = d3.geoRobinson(); projection.fitExtent([[0, 0], [rWidth, rWidth * 520 / 960]], outline); const path = d3.geoPath(projection); const [[x0, y0], [x1, y1]] = path.bounds(bboxToPolygon(lonLatBounds)); const kMax = zoomBehavior.scaleExtent()[1]; const width = rWidth, height = rWidth * 520 / 960; const k = Math.min(kMax, 0.9 * Math.min(width / (x1 - x0), height / (y1 - y0))); return { select, lonLatBounds, x0, y0, x1, y1, k, kMax, width, height }; }36:T5c0, histo = Plot.plot({ width: rWidth>600 ? rWidth/2.5 : rWidth, height: rWidth>900 ? 0.27*rWidth : rWidth>600 ? 0.325*rWidth : 170, marginTop: rWidth>900 ? 50 : rWidth>600 ? 40 : 30, marginBottom: rWidth>900 ? 50 : rWidth>600 ? 40 : 30, x: {label: "Espérance de vie", ticks: [50,55,60,65,70,75,80,85], labelArrow:false}, y: {label: "Nombre de zones", grid: true, domain: [0,30], labelArrow:false}, marks: [ Plot.rectY(histogram, { x1: "xInf", x2: "xSup", y: "y", fill: d => colorScale2((d.xInf + d.xSup) / 2), // ça c'est subtil la couleur au milieu qui s'affiche sur toute la largeur de la barre. stroke: "black", strokeWidth: 0.2, channels: { "Espérance de vie :": d => `${d.xInf.toFixed(1).replace(".",",")} – ${d.xSup.toFixed(1).replace(".",",")} ans`, "Nombre de zones : ": d => `${d.y}` }, tip: { format: { x1: false, x2: false, y: false, fill: false, "Intervalle": true, "Zones": true }, strokeWidth:0 } }), Plot.ruleX([64, 67, 70, 73.2, 77, 80], {stroke: "black"}), Plot.ruleY([0]), Plot.text([64], {x:64, y:30.5, lineAnchor: "bottom"}), Plot.text([67], {x:67, y:30.5, lineAnchor: "bottom"}), Plot.text([70], {x:70, y:30.5, lineAnchor: "bottom"}), Plot.text([73.2], {x:73.2, y:30.5, lineAnchor: "bottom"}), Plot.text([77], {x:77, y:30.5, lineAnchor: "bottom"}), Plot.text([80], {x:80, y:30.5, lineAnchor: "bottom"}), ] })37:T614,boxHisto = html`

Histogramme des fréquences

${histo}

`38:T3655,function legendClasses(source, { length = 300, // longueur de la rampe (axe principal, selon orientation) thickness = 16, // épaisseur des rectangles de couleur tickSize = 5, decimals = 0, // nombre de décimales (0 à 3), ignoré si "format" fourni decimalSeparator = ".", // "." ou ",", ignoré si "format" fourni format = null, // si fourni, prend le dessus sur decimals/decimalSeparator minLabelSpacing = 6, // marge de respiration mini entre labels (en plus de leur largeur mesurée) title = null, orientation = "horizontal", // "horizontal" | "vertical" labelReserve = 34, // espace réservé aux labels en mode vertical noData = null, // { label, color, show, stroke, strokeWidth }. Si null, auto-détecté depuis "source" (geoviz) cssWidth = null, // --- sélection groupée ("tout sélectionner / tout désélectionner") --- selectAll = false, // affiche le bouton tout sélectionner/désélectionner lang = "fr", // "fr" | "en" | "jp" labels = {}, // surcharge ponctuelle du dictionnaire de traduction (ex: { selectAll: "..." }) // --- options esthétiques --- fontSize = null, // taille des labels : nombre (px) OU chaîne CSS ("clamp(9px, 1vw, 12px)"...). null = défaut CSS (10px) titleFontSize = null, // taille du titre : nombre (px) OU chaîne CSS. null = calc(fontSize * 1.2) fontFamily = null, // police des labels/titre. null = défaut CSS (sans-serif) strokeColor = "#fff", // couleur du contour entre les classes de la rampe strokeWidth = 0.5, // épaisseur du contour entre les classes de la rampe deselectedColor = null, // couleur unie pour les classes désélectionnées. null = comportement par défaut (opacité réduite) deselectedOpacity = 0.25 // opacité appliquée aux classes désélectionnées si deselectedColor n'est pas fourni } = {}) { const isVertical = orientation === "vertical"; const width = length; // alias interne, garde le corps de fonction lisible const height = thickness; // --- dictionnaire de traduction, même principe que legend() --- const dict = { fr: { selectAll: "Tout sélectionner", deselectAll: "Tout désélectionner" }, en: { selectAll: "Select all", deselectAll: "Select none" }, jp: { selectAll: "すべて選択", deselectAll: "すべて選択を解除" } }; const t = { ...(dict[lang] ?? dict.fr), ...labels }; const iconAllOn = ``; const iconAllOff = ``; // format construit à partir de decimals/decimalSeparator, sauf si "format" est fourni const fmt = format || ((v) => { const s = d3.format(`.${decimals}f`)(v); return decimalSeparator === "," ? s.replace(".", ",") : s; }); // --- résolution de la source : scale d3 classique OU objet { breaks, colors } (type geoviz choro()) --- const isD3Scale = typeof source?.range === "function" && typeof source?.invertExtent === "function"; const isBreaksColors = Array.isArray(source?.breaks) && Array.isArray(source?.colors); let colors, classes, colorize, autoNoData = null; if (isD3Scale) { colors = source.range(); classes = colors.map((color, i) => { const [x0, x1] = source.invertExtent(color); return { index: i, x0, x1, color }; }); colorize = (value) => colors.indexOf(source(value)); } else if (isBreaksColors) { const breaks = source.breaks; colors = source.colors; classes = colors.map((color, i) => ({ index: i, x0: breaks[i], x1: breaks[i + 1], color })); colorize = typeof source.colorize === "function" ? (value) => classes.findIndex(c => c.color === source.colorize(value)) : (value) => { if (value == null || Number.isNaN(value)) return -1; for (let i = 0; i < classes.length; i++) { const { x0, x1 } = classes[i]; const inRange = i === classes.length - 1 ? (value >= x0 && value <= x1) : (value >= x0 && value < x1); if (inRange) return i; } return -1; }; if (source.missing) { autoNoData = { label: "Pas de données", color: source.missing_fill || "#ccc", show: true }; } } else { throw new Error( "legendClasses: source non reconnue. Attendu : une échelle d3 (.range()/.invertExtent()) ou un objet { breaks, colors }." ); } const n = colors.length; const segSize = width / n; const active = new Set(classes.map(c => c.index)); // --- config "pas de données" : fusion entre l'auto-détection (geoviz) et les surcharges explicites --- const resolvedNoData = (autoNoData || noData) ? { ...autoNoData, ...noData } : null; const showNoData = !!(resolvedNoData && resolvedNoData.show !== false); const noDataColor = (resolvedNoData && resolvedNoData.color) || "#ccc"; const noDataLabel = (resolvedNoData && resolvedNoData.label) || "Pas de données"; const noDataStroke = (resolvedNoData && resolvedNoData.stroke) || "#999"; const noDataStrokeWidth = (resolvedNoData && resolvedNoData.strokeWidth) ?? strokeWidth; const noDataWidth = isVertical ? height : segSize; const noDataHeight = height; const noDataGap = 10; // --- dimensions totales du SVG (viewBox) --- let svgWidth, svgHeight; if (!isVertical) { svgWidth = width; svgHeight = height + tickSize + 16 + (showNoData ? noDataGap + noDataHeight : 0); } else { svgWidth = Math.max(height + tickSize + labelReserve, showNoData ? noDataWidth + 90 : 0); svgHeight = width + (showNoData ? noDataGap + noDataHeight : 0); } // --- DOM --- const root = html`

`; root.style.width = "100%"; if (fontSize !== null) { root.style.setProperty("--legend-font-size", typeof fontSize === "number" ? `${fontSize}px` : fontSize); } if (titleFontSize !== null) { root.style.setProperty("--legend-title-font-size", typeof titleFontSize === "number" ? `${titleFontSize}px` : titleFontSize); } if (fontFamily !== null) { root.style.setProperty("--legend-font-family", fontFamily); } if (cssWidth) { root.style.maxWidth = "none"; root.style.width = cssWidth; } else if (!isVertical) { root.style.maxWidth = `${width}px`; } else { root.style.maxWidth = `${svgWidth}px`; } // --- header : titre + bouton "tout sélectionner/désélectionner", même agencement que legend() --- let selectAllBtn = null; if (title || selectAll) { const header = html`

`; if (title) { header.appendChild(html`

${title}

`); } if (selectAll) { selectAllBtn = html``; b.innerHTML = icon; return b; }; // content : un nœud DOM (html`...`), idéalement

…inputs…

puis le graphique // id : identifiant unique du conteneur // Plein écran : le contenu est déplacé dans un overlay attaché à (hors de la cellule, // donc non déplacé quand la cellule se ré-exécute), puis passé en plein écran natif. // Repli si le plein écran natif est refusé : popover (top layer). Un espace réservé reste dans la cellule. return function fullscreen(content, id) { const key = `__fs_v9_${id}`; // incrémenter si vous modifiez ce code let box = window[key]; if (!box) { const enter = button("Plein écran", ICON_ENTER); const exit = button("Quitter le plein écran", ICON_EXIT); box = htl.html`

`; box.append(enter); const overlay = htl.html`

`; overlay.append(exit); const zone = box.querySelector(".map-fs-zone"); const ozone = overlay.querySelector(".map-fs-zone"); box._zone = () => (box._full ? ozone : zone); box._full = false; const set = (on) => { if (on === box._full) return; box._full = on; if (on) { zone.style.minHeight = `${zone.getBoundingClientRect().height}px`; ozone.replaceChildren(...zone.childNodes); document.body.append(overlay); const fallback = () => { if (!box._full) return; overlay.setAttribute("popover", "manual"); if (overlay.showPopover) overlay.showPopover(); }; if (overlay.requestFullscreen) overlay.requestFullscreen().catch(fallback); else fallback(); } else { zone.replaceChildren(...ozone.childNodes); zone.style.minHeight = ""; if (document.fullscreenElement === overlay) document.exitFullscreen().catch(() => {}); if (overlay.hasAttribute("popover")) { if (overlay.matches(":popover-open")) overlay.hidePopover(); overlay.removeAttribute("popover"); } overlay.remove(); } }; enter.addEventListener("click", () => set(true)); exit.addEventListener("click", () => set(false)); document.addEventListener("keydown", (e) => { if (e.key === "Escape") set(false); }); document.addEventListener("fullscreenchange", () => { if (box._full && !document.fullscreenElement && !overlay.hasAttribute("popover")) set(false); }); window[key] = box; } box._zone().replaceChildren(content); return box; }; }3b:[{"id":"3de9d45ec6d7ee29ff9fc4840f7e4a17b9dac3b479e8fb195a836ecbc8f9e383b5c2b5c30b1b66281b467e8eca6acd3fb748db8dc6b9c5df9396ceacfb5353fc","href":"https://static.observableusercontent.com/files/3de9d45ec6d7ee29ff9fc4840f7e4a17b9dac3b479e8fb195a836ecbc8f9e383b5c2b5c30b1b66281b467e8eca6acd3fb748db8dc6b9c5df9396ceacfb5353fc","name":"aire30_final.geojson","type":"application/geo+json","lastModified":1789456378072.967,"size":9801419},{"id":"ecb37dbf7a2deca3efae18c47c80d8182a226a2673189c5069e31cb26686e7d951abedcd3a18401ddab581da20d41ac7c3cffb9d9899a84389f15aa0cf0fadfc","href":"https://static.observableusercontent.com/files/ecb37dbf7a2deca3efae18c47c80d8182a226a2673189c5069e31cb26686e7d951abedcd3a18401ddab581da20d41ac7c3cffb9d9899a84389f15aa0cf0fadfc","name":"aires_data_final.geojson","type":"application/geo+json","lastModified":1789456321791.597,"size":131362},{"id":"b2c3d093643ddd8b76e923a2c9b853462b735c2d95de8eb4f68beb412b970efb20fc7555a3f5230c91fb7c9e3fbb666dc52cca0d10ecd7cdeffec3353a33e26e","href":"https://static.observableusercontent.com/files/b2c3d093643ddd8b76e923a2c9b853462b735c2d95de8eb4f68beb412b970efb20fc7555a3f5230c91fb7c9e3fbb666dc52cca0d10ecd7cdeffec3353a33e26e","name":"freq@5.csv","type":"text/csv","lastModified":1789386448021.773,"size":234},{"id":"451ceabfa4141f066fe5c72c2272fa35c2af5ca824f1f4133bd408fa00e8ff7216b5ab782b9d1d81a2baa5d0b799c8e94469c47a035c233a8af1b88db02e3054","href":"https://static.observableusercontent.com/files/451ceabfa4141f066fe5c72c2272fa35c2af5ca824f1f4133bd408fa00e8ff7216b5ab782b9d1d81a2baa5d0b799c8e94469c47a035c233a8af1b88db02e3054","name":"histogram@3.csv","type":"text/csv","lastModified":1790336911820.609,"size":1191},{"id":"d71b84884ac4d0c64db8e5ac6c9b926a0b4ae17743a61f686dfd720b79f31c418ab943e6ccaa5e5739517a5120706a53070d18e5540c4d6cecfd42c3462c7603","href":"https://static.observableusercontent.com/files/d71b84884ac4d0c64db8e5ac6c9b926a0b4ae17743a61f686dfd720b79f31c418ab943e6ccaa5e5739517a5120706a53070d18e5540c4d6cecfd42c3462c7603","name":"regroupement.geojson","type":"application/octet-stream","lastModified":1789103804062,"size":594041}] 2f:{"id":"5d70236d577a6b94","slug":null,"title":"TEST FULLSCREEN n648 CARTE - FR","thumbnail":"dd5e10e3b001fb7a4b1426467fe82c68d69705b37ec9e41bd398cb0014d7efcd","access_level":"public","create_time":"$D2026-10-09T11:40:21.977Z","update_time":"$D2026-10-09T12:31:23.362Z","view_time":null,"first_public_time":"$D2026-10-09T12:17:29.160Z","has_unpublished_edits":null,"fork":{"id":"1a235fa94f1c17dc","slug":"n648-carte-fr","title":"n648 CARTE - FR","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"stars":0,"starred":false,"owner":{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"pro_2026","bio":""},"version":1062,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null,"bio":""}],"members":[{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"pro_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"TEST FULLSCREEN n648 CARTE - FR","cells":[{"id":1,"value":"# TEST FULLSCREEN n648 CARTE - FR","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"articleLink({\n lang: \"fr\",\n en: { url: \"\",\n title: \"XXX\" },\n fr: { url: \"\",\n title: \"XXX\" }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"title2 = html`

Figure 2. Espérance de vie à la naissance en 2023

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"## data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":252,"value":"freq = FileAttachment(\"freq@5.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"aire30 = FileAttachment(\"aire30_final.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"domain = [\"Monde\", ...new Set(aire30.features.map(d => d.properties.zoneFr).filter(Boolean).sort())]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"airesData = FileAttachment(\"aires_data_final.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"regroupement = FileAttachment(\"regroupement.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"zoneAverages = new Map([\n [\"JCT\", 84.0],\n [\"EWS\", 83.4],\n [\"OC\", 82.0],\n [\"EWN\", 81.8],\n [\"AMN\", 78.7],\n [\"CN\", 77.9],\n [\"SAMS\", 77.5],\n [\"EE\", 77.5],\n [\"MO\", 75.6],\n [\"NAMS\", 75.6],\n [\"AMC\", 73.8],\n [\"AFN\", 73.5],\n [\"SOV\", 73.3],\n [\"IND\", 73.0],\n [\"ASE\", 71.8],\n [\"PAKAF\", 67.4],\n [\"AFSS\", 63.1],\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"worldAverage = 73.2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"## Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":721,"value":"worldCountriesMesh = {\n const filtered = {\n ...world1.objects.countries,\n geometries: world1.objects.countries.geometries.filter(g => g.id !== \"010\")\n };\n return topojson.mesh(world1, filtered, (a, b) => a !== b);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"worldOutlineMesh = {\n const filtered = {\n ...world1.objects.countries,\n geometries: world1.objects.countries.geometries.filter(g => g.id !== \"010\")\n };\n return topojson.mesh(world1, filtered, (a, b) => a === b);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"getIndicatorRows = function(feature) {\n const p = feature.properties;\n const zoneVal = zoneAverages.get(p.zoneFrShort);\n\n return [\n { label: \"Monde\", value: worldAverage, level: \"world\" },\n zoneVal != null ? { label: p.zoneFr, value: zoneVal, level: \"zone\" } : null,\n { label: p.nom_aire, value: p.edv23, level: \"aire\" }\n ].filter(d => d && d.value != null);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"globalEdvScale = {\n const values = airesData.features.map(f => f.properties.edv23).filter(v => v != null);\n return { min: Math.min(...values), max: Math.max(...values) };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"tooltipListLight = function(items) {\n if (!items.length) return \"\";\n const sorted = items.slice().sort((a, b) => a.value - b.value);\n\n const rows = sorted.map(d => {\n const isAire = d.level === \"aire\";\n const dotColor = colorScale(d.value);\n const dotSize = 5;\n const dotBorder = isAire ? \"1px solid #222330\" : \"none\";\n const weight = isAire ? \"600\" : \"400\";\n return `\n

\n \n ${d.label}\n ${d.value.toFixed(1).replace(\".\", \",\")}\n

\n `;\n }).join(\"\");\n\n return `

${rows}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"function circleHTML(d) {\n const p = d.properties;\n const maxLen = rWidth < 500 ? 15 : 35;\n const title = p.nom_aire.length > maxLen ? p.nom_aire.slice(0, maxLen) + \"…\" : p.nom_aire;\n const popText = (p.pop23 / 1000).toFixed(1).replace(\".\", \",\");\n const header = `

${title}

${popText} millions d'habitants

`;\n\n const items = getIndicatorRows(d);\n const chart = rWidth < 500 ? tooltipListLight(items) : tooltipDotPlot(items);\n\n return header + chart;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":494,"value":"mutable mapZoomState = d3.zoomIdentity","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":534,"value":"mutable lastSelect = \"Monde\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"zoneBoundsExclusions = ({\n \"Amérique du Nord\": { minLon: -170, maxLon: -50 },\n \"Europe occidentale\": { minLon: -12, maxLon: 15, minLat: 36, maxLat: 72 },\n \"Monde ex-soviétique \": { minLon: 20, maxLon: 180 },\n \"Océanie\": { minLon: 110, maxLon: 180 }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"function manualLonLatBounds(features, minLon = -180, maxLon = 180, minLat = -90, maxLat = 90) {\n let minLa = 90, maxLa = -90, minLo = 180, maxLo = -180;\n features.filter(f => f.geometry != null).forEach(f => {\n const coordsList = f.geometry.type === \"MultiPolygon\" ? f.geometry.coordinates.flat(1) : f.geometry.coordinates;\n coordsList.forEach(ring => {\n ring.forEach(([lon, lat]) => {\n const clampedLon = Math.min(Math.max(lon, minLon), maxLon);\n const clampedLat = Math.min(Math.max(lat, minLat), maxLat);\n if (clampedLon < minLo) minLo = clampedLon;\n if (clampedLon > maxLo) maxLo = clampedLon;\n if (clampedLat < minLa) minLa = clampedLat;\n if (clampedLat > maxLa) maxLa = clampedLat;\n });\n });\n });\n return [minLo, minLa, maxLo, maxLa];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"function bboxToPolygon([minLo, minLa, maxLo, maxLa]) {\n return { type: \"Polygon\", coordinates: [[[minLo, minLa], [minLo, maxLa], [maxLo, maxLa], [maxLo, minLa], [minLo, minLa]]] };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"zoomBehavior = d3.zoom().scaleExtent([1, 12])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"function continentLabel(dataEnti) {\n const prefix = (dataEnti || \"\").split(\"_\")[0];\n const labels = { AF: \"Afrique\", AM: \"Amériques\", AS: \"Asie\", EU: \"Europe / ex-URSS\", OC: \"Océanie\" };\n return labels[prefix] ?? \"Inconnu\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"viewof select = selectIned({title:\"Grands ensembles régionaux :\" , titleFontSize : \"clamp(11px,2cqw,14px)\", list: domain})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"## frequence des espérance de vie","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":570,"value":"data=FileAttachment(\"histogram@3.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":574,"value":"histogram = data\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"// 2. Échelle de seuils : une couleur par intervalle, calée sur tes lignes verticales\ncolorScale2 = d3.scaleThreshold()\n .domain([64, 67, 70, 73.2, 77, 80])\n .range([\n \"#1b3f8f\", // < 64\n \"#5b9bd5\", // 64–67\n \"#a3d9c9\", // 67–70\n \"#f5f2a3\", // 70–73.2\n \"#f5a94e\", // 73.2–77\n \"#e2591c\", // 77–80\n \"#a30000\" // >= 80\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":706,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"displayH = histoT===true ? html`${boxHisto}` : html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"### Fonctions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"world1 = d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"world = topojson.feature(world1, world1.objects.land);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"//import {viewof rWidth} from '@mthevenin/ro'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"rWidthView = function({fsMax = 1100, selector = \".map\", invalidation: inv} = {}) {\n // fsMax : nombre (px) OU toute valeur CSS : \"80%\", \"70vw\", \"min(1500px, 80vw)\", \"clamp(900px, 70vw, 1500px)\"\n const max = typeof fsMax === \"number\" ? `${fsMax}px` : fsMax;\n\n // Règle CSS (et non un style inline) : le conteneur est recréé à chaque re-rendu.\n const div = html`

`;\n\n const ro = new ResizeObserver(entries => {\n const w = entries[0].contentRect.width;\n if (w > 0 && w !== div.value) {\n div.value = w;\n div.dispatchEvent(new CustomEvent(\"input\"));\n }\n });\n ro.observe(div);\n // `invalidation` doit être passé par la cellule appelante (celui d'ici serait celui de la cellule de définition)\n if (inv) inv.then(() => ro.disconnect());\n\n div.value = div.getBoundingClientRect().width || 800;\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"viewof rWidth = rWidthView({fsMax: \"clamp(1100px, 60vw, 1500px)\", invalidation})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"import {selectIned, toggleIned} from '@mthevenin/inputined'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"import {toggle, cssToggle} from \"@wsthevenin/mtinput\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"import {articleLink} from '@mthevenin/popsoc'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"viewof histoT = toggleIned({label:\"Afficher l'histogramme des fréquences\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"## Légende","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":412,"value":" colorScale = d3.scaleThreshold()\n .domain([64, 67, 70, 73.2, 77, 80])\n .range([\"#2C5591\", \"#75A7B9\", \"#BAE3C8\", \"#F6FBAA\", \"#FDBA5F\", \"#F25628\", \"#CC0001\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"viewof legende1 = legendClasses(colorScale, {\n length: 300,\n format: v => d3.format(\".1f\")(v).replace(\".\", \",\"),\n title: \"Espérance de vie\", \n deselectedColor: \"#e1e1e1\", selectAll:true, lang:'fr',\n fontFamily: \"poppins, sans-serif\",\n fontSize: \"clamp(9px,2cqw,11px)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1"}} 30:"$2f:body"