28:null 29:["$","title",null,{"children":"D3.js New Carte 6 indicateurs EN (node 3890) | Marc Thevenin | Observable"}] 2e:T440,boxInput1 = html`

${viewof rWidth} ${viewof proj} ${viewof longitude}

${viewof select} ${viewof legende} ${cssLegMap}

` 2f:T8d8,boxPlotMap = htl.html `

${map2}

${Def}

Note: World Population Prospects publishes United Nations population estimates for all world countries and every year from 1950 to 2024, as well as projections for different scenarios (low, middle and high variants) from 2024 to 2100. The figures presented here correspond to middle variant projections for the given year.

Source: World Population Prospects. United Nations. 2024.

`30:T29d5,map2 = { const margin = { top: rWidth>600 ? 30 : 5 , right: rWidth>600 ? 20 : 5 , bottom: rWidth>600 ? 20 : 5 , left: rWidth>600 ? 30 : 5}; const width = size2; const proj_ = projection; proj_.rotate([longitude, 0]); if (proj === "Globe") proj_.clipAngle(90); else proj_.clipAngle(null); const sphere = {type: "Sphere"}; proj_.fitExtent([[margin.left, margin.top], [width - margin.right, 100000]], sphere); const path0 = d3.geoPath(proj_); const [[x0, y0], [x1, y1]] = path0.bounds(sphere); const height = Math.ceil(y1 - y0) + margin.top + margin.bottom; proj_.fitExtent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]], sphere); const path = d3.geoPath(proj_); const container = html`

`; // pour mesh function baseStroke(d) { return d.properties.iso3 === "ATA" ? "#414141" : "none"; } function baseStrokeWidth(d) { return d.properties.iso3 === "ATA" ? 0.3 : 0; } const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", proj === "Natural Earth" ? "100%" : width) .attr("height", "auto") .style("display", "block") .style("max-width", "100%") .style("background", backCol) svg.append("defs") .append("filter") .attr("id", "map-shadow") .attr("x", "-30%").attr("y", "-30%").attr("width", "160%").attr("height", "160%") .append("feDropShadow") .attr("dx", .5) .attr("dy", .5) .attr("stdDeviation", 0.5) .attr("flood-color", "#c1c1c1") .attr("flood-opacity", 1); const g = svg.append("g"); // contour, graticule, ombre const outline = g.append("path") .datum(sphere) .attr("fill", "#ffffff") .attr("d", path) .attr("stroke", "#414141") .attr("stroke-width", .5); const graticulePath = g.append("path") .datum(d3.geoGraticule()()) .attr("fill", "none") .attr("stroke", "#c1c1c1") .attr("stroke-width", 0.1) .attr("d", path); const shadowLayer = g.append("path") .datum(world3) .attr("fill", "#cccccc") .attr("filter", "url(#map-shadow)") .attr("d", path); const dimmedColor = "#f1f1f1"; const noDataColor = choro.missing_fill || "#fefefe"; const baseColor = (d) => choro.colorize(d.properties.indic); // couleurs const color = (d) => { const value = d.properties.indic; const idx = legende.classIndex(value); if (idx === -1) return noDataColor; return legende.has(idx) ? baseColor(d) : dimmedColor; }; // carte + tooltip const tooltip = d3.select(container) .append("div") .style("max-width", rWidth < 500 ? "190px" : "none") .style("position", "absolute") .style("pointer-events", "none") .style("opacity", 0) .style("transition", "opacity .1s") .style("background", "white") .style("border", "1px solid #fff") .style("border-radius", "3px") .style("padding", "4px 8px") .style("font-family", "poppins, sans-serif") .style("overflow", "hidden") // .style("font-size", "clamp(15px,2cqw,18px") .style("color", "#222330") .style("white-space", "nowrap") .style("z-index", 10) .style("box-shadow", "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px"); let pinned = false; let pinnedNode = null; const countries = g.selectAll("path.country") .data(world3.features) .join("path") .attr("class", "country") .attr("d", path) .attr("fill", color) .attr("fill-opacity", 1) .attr("stroke", baseStroke) .attr("stroke-width", baseStrokeWidth) .style("cursor", "pointer") .on("pointerenter", function (event, d) { if (event.pointerType === "touch") return; if (pinned) return; showCountryTooltip(this, event, d); }) .on("pointermove", function (event) { if (event.pointerType === "touch") return; if (pinned) return; moveTooltip(event); }) .on("pointerleave", function (event) { if (event.pointerType === "touch") return; if (pinned) return; resetCountryStyle(this); }) .on("pointerdown", function (event, d) { if (event.pointerType !== "touch") return; showCountryTooltip(this, event, d); moveTooltip(event); }) .on("click", function (event, d) { if (pinned && pinnedNode === this) { pinned = false; pinnedNode = null; resetCountryStyle(this); return; } if (pinnedNode) resetCountryStyle(pinnedNode); pinned = true; pinnedNode = this; showCountryTooltip(this, event, d); moveTooltip(event); }); // les contours après correction du mesh const bordersPath = g.append("path") .datum(worldMesh) .attr("fill", "none") .attr("stroke", "#414141") .attr("stroke-width", 0.2) .attr("stroke-linejoin", "round") .attr("d", path) .style("pointer-events", "none"); // lorsqu'on est sur un pays function showCountryTooltip(node, event, d) { d3.select(node) .attr("stroke", "black") .attr("stroke-width", .3) .attr("fill-opacity", 1); const value = d.properties.indic; if (value != null && !Number.isNaN(value)) { const statKey = statColumnMap[select]; const countryRow = df.find(r => r.iso3 === d.properties.iso3); let chartHtml = ""; if (countryRow && statKey) { const items = getIndicatorRows(df, statKey, countryRow); chartHtml = rWidth < 500 ? tooltipListLight(items, choro) : tooltipDotPlot(items, choro); } const closeBtn = pinned ? `` : ""; tooltip .style("opacity", 1) .style("background", "white") .html(`

${chartHtml} ${closeBtn}

`); } } tooltip.on("click", (event) => { if (event.target.classList.contains("tooltip-close")) { if (pinnedNode) resetCountryStyle(pinnedNode); pinned = false; pinnedNode = null; tooltip.style("opacity", 0); } }); function moveTooltip(event) { const [mx, my] = d3.pointer(event, container); const containerWidth = container.getBoundingClientRect().width; const tooltipWidth = tooltip.node().getBoundingClientRect().width; const offset = 12; let left; if (mx + offset + tooltipWidth > containerWidth) { left = mx - offset - tooltipWidth; if (left < 0) left = 4; } else { left = mx + offset; } tooltip .style("left", `${left}px`) .style("top", `${my + 12}px`); } function resetCountryStyle(node) { const d = d3.select(node).datum(); d3.select(node) .attr("stroke", baseStroke(d)) .attr("stroke-width", baseStrokeWidth(d)); tooltip.style("opacity", 0); } function redraw() { outline.attr("d", path); graticulePath.attr("d", path); shadowLayer.attr("d", path); countries.attr("d", path); bordersPath.attr("d", path); } let rafId = null; function scheduleRedraw() { if (rafId) return; rafId = requestAnimationFrame(() => { redraw(); rafId = null; }); } const initialScale = proj_.scale(); const initialRotate = proj_.rotate(); let zoomBehavior; if (zoom === "versor") { svg.style("cursor", "grab"); let dragTotal = 0; const dragBehavior = d3.drag() .filter((event) => { if (event.touches && event.touches.length > 1) return false; return !event.button; }) .on("start", function () { d3.select(this).style("cursor", "grabbing"); dragTotal = 0; shadowLayer.style("display", "none"); }) .on("drag", (event) => { dragTotal += Math.abs(event.dx) + Math.abs(event.dy); if (dragTotal > 4) { tooltip.style("opacity", 0); const k = 75 / proj_.scale(); const r = proj_.rotate(); const lat = Math.max(-90, Math.min(90, r[1] - event.dy * k)); proj_.rotate([r[0] + event.dx * k, lat]); scheduleRedraw(); } }) .on("end", function () { d3.select(this).style("cursor", "grab"); redraw(); shadowLayer.style("display", null); }); zoomBehavior = d3.zoom() .scaleExtent([0.5, 8]) .filter((event) => { if (event.type === "wheel") return true; if (event.type === "dblclick") return true; if (event.type === "touchstart" || event.type === "touchmove") { return event.touches && event.touches.length === 2; } return false; }) .on("start", () => { shadowLayer.style("display", "none"); }) .on("zoom", (event) => { proj_.scale(initialScale * event.transform.k); scheduleRedraw(); }) .on("end", () => { redraw(); shadowLayer.style("display", null); }); svg.on("pointerdown", (event) => { if (event.pointerType === "touch" && !event.target.classList.contains("country")) { tooltip.style("opacity", 0); } }); svg.on("click", (event) => { if (pinned && !event.target.classList?.contains("country")) { resetCountryStyle(pinnedNode); pinned = false; pinnedNode = null; tooltip.style("opacity", 0); } }); svg.call(dragBehavior).call(zoomBehavior); } else { zoomBehavior = d3.zoom() .scaleExtent(zoom) .on("zoom", (event) => { g.attr("transform", event.transform); }); svg.call(zoomBehavior); } const resetButton = html``; resetButton.addEventListener("click", () => { if (zoom === "versor") { svg.transition().duration(600) .call(zoomBehavior.transform, d3.zoomIdentity); d3.select({}) .transition().duration(600) .tween("rotate", () => { const r = d3.interpolate(proj_.rotate(), initialRotate); return (t) => { proj_.rotate(r(t)); redraw(); }; }); } else { svg.transition().duration(600) .call(zoomBehavior.transform, d3.zoomIdentity); } }); container.appendChild(svg.node()); container.appendChild(resetButton); return container; }31:T3778,function legendClasses(source, { length = 200, // 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) selectAllFontSize = null, // taille du bouton tout sélectionner/désélectionner : nombre (px) OU chaîne CSS. null = fontSize 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 (selectAllFontSize !== null) { root.style.setProperty("--legend-selectall-font-size", typeof selectAllFontSize === "number" ? `${selectAllFontSize}px` : selectAllFontSize); } 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`

Lire cette carte

Un tour du monde des espérances de vie