42:null 43:["$","title",null,{"children":"Tableau et graphique indicateurs EN (node 3890) | Marc Thevenin | Observable"}] 49:Tb8a,boxPlot = { const content = htl.html`

${viewof rWidth}

${title}

${display1} ${cssTab}

Note: The publication World Population Prospects provides United Nations population estimates for all countries in the world for each year from 1950 to 2023, as well as projections according to different scenarios (low, medium and high) for each year from 2024 to 2100. The figures presented here correspond to medium scenario projections for the given year.

Source: World Population Prospects. Nations Unies. 2024.

`; return fullscreen(content, "boxPlot", {target: ".plotBar", inBox: true,lang:"fr", }); }4a:Tf0d,

${df2.slice(0, 50).map(d => htl.html``)} ${filter.slice(0, 50).map(d => htl.html``)}

Entité	Number of residents 💬 Total population (thousands)	Number of births per 1,000 population 💬 Birth rate	Number of deaths per 1,000 population 💬 Mortality rate	Average length of life in years 💬 Life expectancy	Number of deaths of children aged under 1 per 1,000 births 💬 Infant mortality rate	Number of children per woman 💬 Total fertility rate	Share of people aged 65 and over 💬 % 65-years old and over	Annual increase, or decrease in number of residents, per 1,000 population (sum of migratory growth and natural increase) 💬 Growth rate
${d["Pays"]}	${d["Population_totale"]}	${d["Taux_natalité"]}	${d["Taux_mortalité"]}	${d["Espérance_vie"]}	${d["Taux_mortalité_infantile"]}	${d["Nombre_enfant_femme"]}	${d["Part_65ans"]}	${d["Taux_croissance"]}
${d["PaysF"]}	${d["Population_totale"]}	${d["Taux_natalité"]}	${d["Taux_mortalité"]}	${d["Espérance_vie"]}	${d["Taux_mortalité_infantile"]}	${d["Nombre_enfant_femme"]}	${d["Part_65ans"]}	${d["Taux_croissance"]}

4b:Td00,tooltip = { const el = html`

`; document.body.appendChild(el); invalidation.then(() => el.remove()); let pinned = false; let pinnedNode = null; const FS = ".fs-wrap.is-full"; const isFullscreen = () => !!document.querySelector(FS); // Parent de l'infobulle : l'overlay plein écran s'il est ouvert (top layer du navigateur, // un élément hors de l'overlay y serait masqué), sinon . // Pas dans .plotBar : son container-type crée un bloc contenant pour position: fixed. // Appelé au début de chaque interaction, AVANT de toucher à `pinned`. function ensureHost() { const host = document.querySelector(FS) ?? document.body; if (el.parentNode !== host) { // changement de contexte (entrée/sortie du plein écran) : on libère une infobulle épinglée pinned = false; pinnedNode = null; el.style.opacity = 0; host.appendChild(el); } } function showContent(event, d, label) { // Plein écran : infobulle plus grande (police et marges) const full = isFullscreen(); el.style.fontSize = full ? "16px" : "clamp(9px,2cqw,12px)"; el.style.padding = full ? "8px 14px" : "4px 8px"; const contentHtml = buildTooltipContent(d, label); const closeBtn = pinned ? `` : ""; el.innerHTML = `

${contentHtml}${closeBtn}

`; el.style.pointerEvents = pinned ? "auto" : "none"; el.style.opacity = 1; } function position(event) { const tooltipWidth = el.offsetWidth; const margin = 12; const spaceRight = window.innerWidth - event.clientX; const left = spaceRight < tooltipWidth + margin ? event.clientX - tooltipWidth - margin : event.clientX + margin; el.style.left = Math.max(4, left) + "px"; el.style.top = (event.clientY - 28) + "px"; } el.addEventListener("click", (event) => { if (event.target.classList.contains("tooltip-close")) { pinned = false; pinnedNode = null; el.style.opacity = 0; } }); return { enter(node, event, d, label) { ensureHost(); if (pinned) return; showContent(event, d, label); position(event); }, move(event) { ensureHost(); if (pinned) return; position(event); }, leave() { if (pinned) return; el.style.opacity = 0; }, click(node, event, d, label) { ensureHost(); if (pinned && pinnedNode === node) { pinned = false; pinnedNode = null; el.style.opacity = 0; return; } pinned = true; pinnedNode = node; showContent(event, d, label); position(event); } }; }4c:T4fd,getBarIndicatorRows = function(data2, statKey, countryPays) { const countryRow = data2.find(r => r.Pays === countryPays && r.Région2 !== "--"); if (!countryRow) return []; const continent = countryRow.Région1; const rawSubregion = countryRow.Région2; const hasSubregion = rawSubregion && rawSubregion.toLowerCase() !== continent.toLowerCase(); const subregion = hasSubregion ? rawSubregion : null; const worldRow = data2.find(r => r.Région1 === "World" && r.Pays === "World"); const continentRow = data2.find(r => r.Région1 === "World" && r.Pays.toLowerCase() === continent.toLowerCase()); const subregionRow = subregion ? data2.find(r => r.Région1.toLowerCase() === continent.toLowerCase() && r.Région2 === "--" && r.Pays.toLowerCase() === subregion.toLowerCase()) : null; return [ worldRow ? { label: "World", value: parseFr(worldRow[statKey]), level: "world" } : null, continentRow ? { label: continent, value: parseFr(continentRow[statKey]), level: "continent" } : null, subregionRow ? { label: subregion, value: parseFr(subregionRow[statKey]), level: "subregion" } : null, { label: countryRow.Pays, value: parseFr(countryRow[statKey]), level: "country" } ].filter(d => d && d.value != null); }4d:T70c,tooltipDotPlotBar = function(items, scaleMin, scaleMax, barColor, k = 1) { // k : facteur d'agrandissement (plein écran). Le dessin garde son repère (viewBox) : // seule la taille affichée change, texte compris. if (!items.length) return ""; const sorted = items.slice().sort((a, b) => b.value - a.value); const width = 300; 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 isCountry = d.level === "country"; const dotRadius = isCountry ? 3 : 3; const dotStroke = isCountry ? "#222330" : "none"; const dotStrokeWidth = isCountry ? 1 : 0; const labelWeight = isCountry ? "600" : "400"; return ` ${d.label.length > 14 ? d.label.slice(0, 14) + "…" : d.label} ${d.value.toFixed(1).replace(".", ",")} `; }).join(""); // k > 1 : police fixée à 12 (unités du dessin) pour que l'agrandissement donne ~12*k px const fontStyle = k > 1 ? ` style="font-size:12px"` : ""; return ``; }4e:T4b4,buildTooltipContent = function(d, label) { const isPopulation = label === "Total population (thousands)"; const isCountry = data2.some(r => r.Pays === d.pays && r.Région2 !== "--" && r.Région2 !== r.Pays); const isSubregion = !isCountry && data2.some(r => r.Pays === d.pays && r.Région2 === "--" && r.Région1 !== "World" && r.Région1 !== r.Pays); // plein écran : mini-graphique de l'infobulle agrandi const k = document.querySelector(".fs-wrap.is-full") ? 1.35 : 1; let extra = ""; if (!isPopulation && (isCountry || isSubregion)) { const statKey = statColumnMapBar[label]; const items = isCountry ? getBarIndicatorRows(data2, statKey, d.pays) : getSubregionIndicatorRows(data2, statKey, d.pays); if (items.length) { const globalScale = getGlobalScaleBar(data2, statKey); extra = rWidth < 500 ? tooltipListLightBar(items, col) : tooltipDotPlotBar(items, globalScale.min, globalScale.max, col, k); } } const baseLine = extra ? `

${d.paysF}

` : `${d.paysF}
${label} : ${d.valeur.toLocaleString('en-US')}`; return `${baseLine}${extra}`; }4f:T1a02,plot = { const svg = d3.select(svgNode); // Largeur du graphique : en plein écran, rWidth moins la colonne de gauche const rWidth = chartW; // Plein écran : polices un peu plus grandes const isFull = fsActive; const fontSize = 16; // px, plein écran uniquement (13px max en mode normal) const labelLimit = rWidth > 600 ? (isFull ? 30 : 17) : 15; const labelText = d => d.pays.length > labelLimit ? d.pays.slice(0, labelLimit) + "…" : d.pays; const marginRight = 10; const marginTop = 0; const marginBottom = mBottom; // --- Marge gauche : assez large pour que les noms ne sortent pas du graphique --- const gap = rWidth > 600 ? 8 : 5; const baseMargin = rWidth > 900 ? 150 : rWidth > 600 ? 140 : 105; const textFs = isFull ? fontSize : Math.min(13, Math.max(10, rWidth * 0.02)); const ctx = document.createElement("canvas").getContext("2d"); ctx.font = `${textFs}px Poppins, sans-serif`; const textW = d3.max(filterLong, d => ctx.measureText(labelText(d)).width) ?? 0; const T = Math.ceil(textW * 1.06) + gap + (isFull ? 12 : 4); const c = minX < 0 ? minX - labyX : 0; const W = rWidth - marginRight; const D = max + 1 - minX; const need = (T + c * W / D) / (1 + c / D); const marginLeft = Math.min(Math.max(baseMargin, need), rWidth * 0.4); svg .attr("viewBox", [0, 0, rWidth, Height]) .attr("width", rWidth) .attr("height", Height) .classed("bar-chart", true) .style("--chart-fs", isFull ? `${fontSize}px` : null) .style("max-width", "100%") .style("height", "auto") .style("font-family", "sans-serif") .style("overflow", "visible"); const x = d3.scaleLinear() .domain([minX, max + 1]) .range([marginLeft, rWidth - marginRight]); const sorted = [...filterLong].sort((a, b) => d3.descending(a.valeur, b.valeur)); const y = d3.scaleBand() .domain(sorted.map(d => d.pays)) .range([marginTop, Height - marginBottom]) .padding(0.4); const t = svg.transition().duration(updatePlot.duration).ease(updatePlot.ease); const isSelected = d => d.pays === selectReg1 || d.pays === selectReg2; // --- BARRES --- svg.select(".bars") .selectAll("rect") .data(sorted, d => d.pays) .join( enter => enter.append("rect") .attr("x", x(0)) .attr("y", d => y(d.pays)) .attr("height", y.bandwidth()) .attr("width", 0) .attr("fill", col) .attr("stroke", d => isSelected(d) ? "black" : col) .attr("stroke-width", 1) .attr("fill-opacity", d => isSelected(d) ? 1 : 0.5) .on("pointerenter", function(event, d) { if (event.pointerType === "touch") return; tooltip.enter(this, event, d, selectIndic); }) .on("pointermove", function(event) { if (event.pointerType === "touch") return; tooltip.move(event); }) .on("pointerleave", function() { tooltip.leave(); }) .on("pointerdown", function(event, d) { if (event.pointerType !== "touch") return; tooltip.enter(this, event, d, selectIndic); }) .on("click", function(event, d) { tooltip.click(this, event, d, selectIndic); }) .call(enter => enter.transition(t) .attr("x", d => Math.min(x(0), x(d.valeur))) .attr("width", d => Math.abs(x(d.valeur) - x(0)))), update => update .on("pointerenter", function(event, d) { if (event.pointerType === "touch") return; tooltip.enter(this, event, d, selectIndic); }) .on("pointermove", function(event) { if (event.pointerType === "touch") return; tooltip.move(event); }) .on("pointerleave", function() { tooltip.leave(); }) .on("pointerdown", function(event, d) { if (event.pointerType !== "touch") return; tooltip.enter(this, event, d, selectIndic); }) .on("click", function(event, d) { tooltip.click(this, event, d, selectIndic); }) .call(update => update.transition(t) .attr("x", d => Math.min(x(0), x(d.valeur))) .attr("y", d => y(d.pays)) .attr("height", y.bandwidth()) .attr("width", d => Math.abs(x(d.valeur) - x(0)))) .call(update => update .attr("fill", col) .attr("stroke", d => isSelected(d) ? "black" : col) .attr("fill-opacity", d => isSelected(d) ? 1 : 0.5)), exit => exit.transition(t) .attr("width", 0) .style("opacity", 0) .remove() ); // --- LABELS PAYS --- const xLabel = x(labyX) - gap; svg.select(".y-axis") .selectAll("text") .data(sorted, d => d.pays) .join( enter => enter.append("text") .attr("x", xLabel) .attr("y", d => y(d.pays) + y.bandwidth() / 2) .attr("dy", "0.32em") .attr("text-anchor", "end") .style("opacity", 0) .text(labelText) .call(enter => enter.transition(t).style("opacity", 1)), update => update .attr("x", xLabel) .text(labelText) // opacité forcée à 1 : évite qu'une transition d'entrée interrompue laisse le libellé semi-transparent .call(update => update.transition(t) .attr("y", d => y(d.pays) + y.bandwidth() / 2) .style("opacity", 1)), exit => exit.transition(t).style("opacity", 0).remove() ); // --- AXE X --- svg.select(".x-axis") .attr("transform", `translate(0,${Height - marginBottom})`) .transition(t) .call(d3.axisBottom(x) .ticks(nTicks) .tickFormat(d => selectIndic==="Total population (thousands)" ? d.toLocaleString("en-US") : d.toFixed(0)) .tickSize(rWidth > 600 ? 10 : 5)) .call(g => g.select(".domain").remove()); // --- LABEL AXE X --- svg.select(".x-axis-label") .attr("x", (marginLeft + rWidth - marginRight) / 2) .attr("y", Height - marginBottom + (isFull ? 46 : 40)) .attr("text-anchor", "middle") .text(selectIndic); // --- ruleY (verticale, à x=0) --- svg.select(".rule-zero") .attr("x1", x(0)).attr("x2", x(0)) .attr("y1", marginTop).attr("y2", Height - marginBottom) .attr("stroke", "black") .attr("stroke-width", 1); // --- ruleX (horizontale, en bas du graphique) --- svg.select(".rule-x") .attr("x1", marginLeft).attr("x2", rWidth - marginRight) .attr("y1", Height - marginBottom).attr("y2", Height - marginBottom) .attr("stroke", "black") .attr("stroke-width", 1); return svgNode; }50:T51c,display1 = html`

${viewof output}${viewof selectReg1}${viewof selectReg2}${output === "Chart" ? html`

${viewof selectIndic}

` : ""}

${minimap}

${output2}

`51:T131f,52:T153d,53:[{"id":"cf05c55357112d95b3ad4c25b274a9c8b75d08bebcb9a645038adda4095a555ee60e85dbe04bce50f148dd1b851e98bd3887f304d16c38193db374f4b92bdb12","href":"https://static.observableusercontent.com/files/cf05c55357112d95b3ad4c25b274a9c8b75d08bebcb9a645038adda4095a555ee60e85dbe04bce50f148dd1b851e98bd3887f304d16c38193db374f4b92bdb12","name":"paysMondeShort@13.csv","type":"text/csv","lastModified":1788331415394.26,"size":32008},{"id":"6cf6298624c0169017e102b439588aa9aa2e7ea39217204ace9e778010aa4276f86e8835cd9dd31a811a6ee0cbe39b7d2b8907d2ea88c090c39ace89bc85094b","href":"https://static.observableusercontent.com/files/6cf6298624c0169017e102b439588aa9aa2e7ea39217204ace9e778010aa4276f86e8835cd9dd31a811a6ee0cbe39b7d2b8907d2ea88c090c39ace89bc85094b","name":"worldUN.json","type":"application/json","lastModified":1788331415394.26,"size":1117733}] 47:{"id":"a6948cad487aa3f6","slug":null,"title":"Tableau et graphique indicateurs EN (node 3890)","thumbnail":"abd530f3af768675e5884feae71881f73a0c7709357a0dedcadd17eacc203f60","access_level":"public","create_time":"$D2026-10-15T09:28:31.020Z","update_time":"$D2026-10-15T10:45:47.557Z","view_time":null,"first_public_time":"$D2026-10-15T10:15:50.573Z","has_unpublished_edits":null,"fork":{"id":"44ec112aa8726167","slug":"d3-jstableau-et-graphique-fr-node-3890","title":"Tableau et graphique indicateurs FR (node 3890)","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/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":"pro_2026","bio":"Statistical Engineer at the french National Institute for Demographic Studies (INED)","following":false},"version":4315,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","tier":null,"bio":"Statistical Engineer at the french National Institute for Demographic Studies (INED)","following":false}],"members":[{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/77392368125040ba6be18f10a6f777723377ed43e0a6fd6f583fa8dc2ea0ff56","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":"Tableau et graphique indicateurs EN (node 3890)","cells":[{"id":0,"value":"# Tableau et graphique indicateurs EN (node 3890)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3988,"value":"articleLink({ lang: \"en\", kicker: \"All about population\",\n fr: {url: \"https://www.ined.fr/fr/tout-savoir-population/chiffres-graphiques-tableaux/tous-pays-du-monde#indicateurs-tableau-graphique\", title: \"Tous les pays du monde - tableau et graphique\" },\n en: {url: \"https://www.ined.fr/en/all-about-population/data-graphs/all-countries\", title: \"All countries- table and chart\"} })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3808,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4010,"value":"title = output === \"Table\"\n ? `${selectReg2 === \"--\" ? selectReg1 : selectReg2} - Estimations 2023`\n : `${selectReg2 === \"--\" ? selectReg1 : selectReg2} - ${selectIndic} 2023 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2702,"value":"currentTime = new Date()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2704,"value":"yearCaption = currentTime.getFullYear()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3800,"value":"svgNode = {\n const svg = d3.create(\"svg\");\n svg.append(\"g\").attr(\"class\", \"bars\");\n svg.append(\"g\").attr(\"class\", \"y-axis\");\n svg.append(\"g\").attr(\"class\", \"x-axis xlabel\");\n svg.append(\"line\").attr(\"class\", \"rule-zero\");\n svg.append(\"line\").attr(\"class\", \"rule-x\");\n svg.append(\"text\").attr(\"class\", \"x-axis-label\");\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4011,"value":"dataEn = FileAttachment(\"df(6)(1).csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3327,"value":"data = FileAttachment(\"paysMondeShort@13.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"color = [\n \"#ff564e\", //rouge 0\n \"#ff7aad\", //rose 1\n \"#522673\", //mauve 2 \n \"#0042eb\", //bleu 3\n \"#5cd49e\", //vert 4\n \"#ffb322\", //jaune 5 \n \"#4f4f4f\", //gray 6\n \"#8a8a8a\", //gray light 7\n \"#0036bc\", //blue dark 8\n \"#ff362d\", // rouge dark 9\n \n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":" data2 = dataEn.map(d=>({\n Région1: d.Région1En,\n Région2: d.Région2En,\n Pays: d.paysEn,\n PaysF: d.paysfEn,\n PaysFlag: d.PaysFlag,\n Population_totale: d.Population_totale.toLocaleString(\"en\",\"US\"),\n Taux_natalité: d.Taux_natalité,\n Taux_mortalité: d.Taux_mortalité,\n Espérance_vie: d.Espérance_vie,\n Taux_mortalité_infantile: d.Taux_mortalité_infantile,\n Nombre_enfant_femme: d.Nombre_enfant_femme,\n Taux_croissance: d.Taux_croissance,\n Part_65ans: d.Part_65ans,\n }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"filter = data2.filter(d => d.Pays === selectReg2 && d.Région2!=\"--\" )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3991,"value":"### Sélection des régions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3992,"value":"viewof selectReg1 = selectIned({list: reg1Array, title:\"Select a region : \", titleFontSize: \"clamp(11px,2cqw,14px)\", width: \"350px\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3993,"value":"viewof selectReg2 = selectIned({list: reg2Array,width: \"350px\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":" #### ${selectReg2} | Estimations 2023","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"titre","database":"$undefined"},{"id":3567,"value":"#### Tableau","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3987,"value":"$4a","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"tab","database":"$undefined"},{"id":3570,"value":"#### Graphique","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3572,"value":"domain = [\"Total population (thousands)\", \"Birth rate\", \"Mortality rate\", \"Life expectancy\", \"Infant mortality rate\", \"Total fertility rate\", \"Growth rate\", \"% 65-years old and over\" ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3994,"value":"viewof selectIndic = selectIned({list: domain, value: \"Life expectancy\", title: \"Select an indicator :\", titleFontSize: \"clamp(11px,2cqw,14px)\", width:\"350px\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3866,"value":"#### tooltip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3802,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3870,"value":"statColumnMapBar = ({\n \"Birth rate\": \"Taux_natalité\",\n \"Mortality rate\": \"Taux_mortalité\",\n \"Life expectancy\": \"Espérance_vie\",\n \"Infant mortality rate\": \"Taux_mortalité_infantile\",\n \"Total fertility rate\": \"Nombre_enfant_femme\",\n \"Growth rate\": \"Taux_croissance\",\n \"% 65-years old and over\": \"Part_65ans\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3874,"value":"parseFr = function(v) {\n if (v == null || v === \"\") return null;\n const n = parseFloat(String(v).replace(\",\", \".\"));\n return Number.isNaN(n) ? null : n;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3872,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3899,"value":"getSubregionIndicatorRows = function(data2, statKey, subregionPays) {\n const subregionRow = data2.find(r => r.Pays === subregionPays && r.Région2 === \"--\" && r.Région1 !== \"World\");\n if (!subregionRow) return [];\n\n const continent = subregionRow.Région1;\n const worldRow = data2.find(r => r.Région1 === \"World\" && r.Pays === \"World\");\n const continentRow = data2.find(r => r.Région1 === \"World\" && r.Pays.toLowerCase() === continent.toLowerCase());\n\n return [\n worldRow ? { label: \"World\", value: parseFr(worldRow[statKey]), level: \"world\" } : null,\n continentRow ? { label: continent, value: parseFr(continentRow[statKey]), level: \"continent\" } : null,\n { label: subregionRow.Pays, value: parseFr(subregionRow[statKey]), level: \"country\" }\n ].filter(d => d && d.value != null);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3894,"value":"getGlobalScaleBar = function(data2, statKey) {\n const values = data2\n .filter(r => r.Région2 !== \"--\" && r.Région2 !== r.Pays)\n .map(r => parseFr(r[statKey]))\n .filter(v => v != null);\n if (!values.length) return null;\n return {\n min: Math.min(...values),\n max: Math.max(...values)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3876,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3878,"value":"tooltipListLightBar = function(items, barColor) {\n if (!items.length) return \"\";\n const sorted = items.slice().sort((a, b) => a.value - b.value);\n const rows = sorted.map(d => {\n const isCountry = d.level === \"country\";\n const dotSize = isCountry ? 8 : 5;\n const dotBorder = isCountry ? \"1px solid #222330\" : \"none\";\n const weight = isCountry ? \"600\" : \"400\";\n return `\n

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

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

${rows}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3886,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3868,"value":"## Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3804,"value":"updatePlot = ({\n duration: 750,\n ease: d3.easeCubicOut\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4004,"value":"fsActive = Generators.observe(notify => {\n // true quand l'overlay plein écran (.fs-wrap.is-full) est dans le document (ajouté/retiré de )\n const check = () => notify(!!document.querySelector(\".fs-wrap.is-full\"));\n check();\n const mo = new MutationObserver(check);\n mo.observe(document.body, {childList: true});\n return () => mo.disconnect();\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4007,"value":"chartW = fsActive ? Math.max(400, rWidth - 300 - 20) : rWidth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3806,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3997,"value":"viewof output = radioIned({list: [\"Table\", \"Chart\"], value: \"Table\", direction: \"row\",\n fontSize: \"clamp(11px,2cqw,14px)\"\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3798,"value":"## Filtres et config","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3501,"value":"output2 = output=== \"Table\" ? tab : plot","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3983,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3436,"value":"col = {\n if (selectIndic === \"Birth rate\") return color[0];\n if (selectIndic === \"Mortality rate\") return color[2];\n if (selectIndic === \"Life expectancy\") return color[3];\n if (selectIndic === \"Infant mortality rate\") return color[5];\n if (selectIndic === \"Total fertility rate\") return color[1];\n if (selectIndic === \"% 65-years old and over\") return color[4];\n return \"#222330\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2686,"value":"nTicks = {\n if (rWidth >= 600 && selectIndic === \"Total population (thousands)\") return 5;\n if (rWidth < 600 && selectIndic === \"Total population (thousands)\") return 2;\n return 6;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2393,"value":"radius2 = selectIndic === \"Growth rate\" ? 0 : 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2295,"value":"Height = {\nlet n;\n if (chartW>=900 && filterLong.length>=10) {return n=chartW*.65}\n if (chartW>=600 && filterLong.length>=10) {return n=chartW*.75}\n if (chartW>=600 && (filterLong.length<5)) {return n=chartW*.35}\n if (chartW>=600 && (filterLong.length<10)) {return n=chartW*.50}\n if (chartW<600 && (filterLong.length>15)) {return n=370}\n if (chartW<600 && (filterLong.length<5)) {return n=200}\n else {return n=300}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2924,"value":"mBottom = \n{\n let n;\n if (rWidth>900) {return n=70}\n if (rWidth>600) {return n=60} \n if (rWidth>400) {return n=50} \n else {return n=40} \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1471,"value":"df = data2.filter(d=> selectReg1.includes(d.Région1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1512,"value":"df2b = df2.concat(filter)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1477,"value":"dfLong = df2b.flatMap(d => [\n { pays: d.Pays, paysFlag: d.PaysFlag, paysF: d.PaysF, indic: \"Total population (thousands)\", valeur: parseFloat(String(d.Population_totale).replace(/,/g, \"\"))},\n { pays: d.Pays, paysFlag: d.PaysFlag, paysF: d.PaysF, indic: \"Birth rate\", valeur: d.Taux_natalité},\n { pays: d.Pays, paysFlag: d.PaysFlag, paysF: d.PaysF, indic: \"Mortality rate\", valeur: d.Taux_mortalité},\n { pays: d.Pays, paysFlag: d.PaysFlag, paysF: d.PaysF, indic: \"Life expectancy\", valeur: d.Espérance_vie},\n { pays: d.Pays, paysFlag: d.PaysFlag, paysF: d.PaysF, indic: \"Infant mortality rate\", valeur: d.Taux_mortalité_infantile },\n { pays: d.Pays, paysFlag: d.PaysFlag, paysF: d.PaysF, indic: \"Total fertility rate\", valeur: d.Nombre_enfant_femme },\n { pays: d.Pays, paysFlag: d.PaysFlag, paysF: d.PaysF, indic: \"Growth rate\", valeur: d.Taux_croissance},\n { pays: d.Pays, paysFlag: d.PaysFlag, paysF: d.PaysF, indic: \"% 65-years old and over\", valeur: d.Part_65ans},\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1362,"value":"filterLong = dfLong.filter(d => selectIndic === d.indic )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1374,"value":"max = d3.max(filterLong, d => d.valeur)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1442,"value":"min = d3.min(filterLong, d => d.valeur)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1444,"value":"minX = {\n let n;\n if (min<0) {return n = min}\n //if (selectIndic===\"Espérance de vie\") {return n =20}\n else {return n = 0}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"labyX = \n{\n let n;\n if (minX===0) {return n=0}\n else {return n= minX + minX/10}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"df2 = df.filter(d=> selectReg2.includes(d.Région2) && d.Pays!=selectReg2 \n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"filterRegion1 = df.filter(d=> selectReg1.includes(d.Région1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"region2 = filterRegion1.map (d => d.Région2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"reg2Array = [...new Set(region2)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"region1 = data2.map (d => d.Région1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"reg1Array = [...new Set(region1)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3583,"value":"## Minimap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3585,"value":"viz = require(\"geoviz@0.8.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3588,"value":"worldun = FileAttachment(\"worldUN.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3596,"value":"dfIso = dataEn.map(d=>({\nregion1: d.Région1En,\nregion2: d.Région2En,\npays: d.paysEn,\niso3: d.iso3,\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3599,"value":"merge = viz.tool.merge({\n geom: worldun,\n geom_id: \"iso3\",\n data: dfIso,\n data_id: \"iso3\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3601,"value":"world = merge.featureCollection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3603,"value":"reg1 = selectReg1 != \"World\" ? viz.tool.featurecollection(\n world.features.filter((d) => d.properties.region1 == selectReg1)) : world","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3605,"value":"reg2 = selectReg1!=\"World\" && selectReg2 !=\"--\" ? viz.tool.featurecollection(\n world.features.filter((d) => d.properties.region2 == selectReg2 )) : reg1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3628,"value":"minimap = {\n\n let reg1b = viz.tool.featurecollection(\n reg1.features.filter((d) => d.properties.iso3 != null));\n \n let reg2b = viz.tool.featurecollection(\n reg2.features.filter((d) => d.properties.iso3 != null));\n \n let map = viz.create({ \n domain: world, margin:40,\n width: width>900 ? 450 : 0, \n zoomable: false,}); \n\n map.path({ datum: world, fill: \"#f1f1f1\", stroke: \"white\", strokeWidth:.5 });\n \n map.path({ data: reg1b, \n fill:\"#b1b1b1\",\n stroke: \"#b1b1b1\", strokeWidth:.5 });\n\n map.path({ data: reg2b, \n fill:\"#616161\",\n stroke: \"#616161\", strokeWidth:.5,\n tip: false\n });\n\n \n return map.render(); \n}","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3560,"value":"### css","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2783,"value":"$51","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"cssGeneral","database":"$undefined"},{"id":2757,"value":"$52","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"cssTab","database":"$undefined"},{"id":3998,"value":"### Importation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3989,"value":"import {articleLink} from '@mthevenin/popsoc'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3990,"value":"import {toggleIned, radioIned, selectIned} from '@mthevenin/inputined'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4005,"value":"import {fullscreen, rWidthView} from '@mthevenin/fullscreen'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4000,"value":"//","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4002,"value":"viewof rWidth = rWidthView({fsMax: \"clamp(1200px, 70vw, 2000px)\", selector: \".plotBar\", invalidation})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"1"}} 48:"$47:body"