2a:null 2b:["$","title",null,{"children":"D3.jsTableau et graphique FR (node 3890) | Marc Thevenin | Observable"}] 30:T890,boxPlot = html`

${viewof rWidth} ${display1} ${cssTab}

Note de lecture : La publication World Population Prospects fournit les estimations de population des Nations Unies pour tous les pays du monde pour chaque année entre 1950 et 2023 et les projections selon différents scénarios (bas, moyen et haut) pour chaque année entre 2024 et 2100. Les chiffres présentés ici correspondent aux projections pour l’année en cours selon le scénario moyen.

Source : World Population Prospects. Nations Unies. 2024.

`31:Tf67,

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

Entité	Nombre d'habitants 💬 Population totale (milliers)	Nombre de naissances par an pour 1000 habitants 💬 Taux de natalité	Nombre de décès par an pour 1000 habitants 💬 Taux de mortalité	Durée de vie moyenne en années 💬 Espérance de vie	Nombre de décès d'enfants de moins d'un an pour mille naissances 💬 Taux de mortalité infantile	Indice conjoncturel de fécondité 💬 Nombre d’enfant(s) par femme	% de personnes âgées de 65 ans et plus 💬 Proportion 65 ans et plus	Nombre d'habitants en plus ou en moins par an, pour mille habitants (somme des taux d'acroissements naturel et migratoire 💬 Taux de croissance
${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"]}

32:T8b8,tooltip = { const el = html`

`; document.body.appendChild(el); invalidation.then(() => el.remove()); let pinned = false; let pinnedNode = null; function showContent(event, d, label) { 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) { if (pinned) return; showContent(event, d, label); position(event); }, move(event) { if (pinned) return; position(event); }, leave() { if (pinned) return; el.style.opacity = 0; }, click(node, event, d, label) { if (pinned && pinnedNode === node) { pinned = false; pinnedNode = null; el.style.opacity = 0; return; } pinned = true; pinnedNode = node; showContent(event, d, label); position(event); } }; }33: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 === "Monde" && r.Pays === "Monde"); const continentRow = data2.find(r => r.Région1 === "Monde" && 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: "Monde", 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); }34:T5c7,tooltipDotPlotBar = function(items, scaleMin, scaleMax, barColor) { 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(""); return ``; }35:T436,buildTooltipContent = function(d, label) { const isPopulation = label === "Population totale (en milliers)"; 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 !== "Monde" && r.Région1 !== r.Pays); 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); } } const baseLine = extra ? `

${d.paysF}

` : `${d.paysF}
${label} : ${d.valeur.toLocaleString('fr-FR')}`; return `${baseLine}${extra}`; }36:T1602,plot = { const svg = d3.select(svgNode); const marginLeft = rWidth > 900 ? 150 : rWidth > 600 ? 140 : 105; const marginRight = 10; const marginTop = 0; const marginBottom = mBottom; svg .attr("viewBox", [0, 0, rWidth, Height]) .attr("width", rWidth) .attr("height", Height) .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) - (rWidth > 600 ? 8 : 5); 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(d => d.pays.length > 17 && rWidth>600 ? d.pays.slice(0, 17) + "…" : d.pays.length > 15 && rWidth<=600 ? d.pays.slice(0, 15) + "…" : d.pays) .call(enter => enter.transition(t).style("opacity", 1)), update => update .attr("x", xLabel) .text(d => d.pays.length > 17 && rWidth>600 ? d.pays.slice(0, 17) + "…" : d.pays.length > 15 && rWidth<=600 ? d.pays.slice(0, 15) + "…" : d.pays) .call(update => update.transition(t) .attr("y", d => y(d.pays) + y.bandwidth() / 2)), 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==="Population totale (en milliers)" ? d.toLocaleString() : d.toFixed(0).replace(".",",")) .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 + 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; }37:T5c4,display1 = output=== "Tableau" ? html`

${viewof output} ${viewof selectReg1} ${viewof selectReg2}

${minimap}

${output2} ` : html`

${viewof output} ${viewof selectReg1} ${viewof selectReg2}

${viewof selectIndic}

${minimap}

${output2}

` 38:T4c6,dfLong = df2b.flatMap(d => [ { pays: d.Pays, paysFlag: d.PaysFlag, paysF: d.PaysF, indic: "Population totale (en milliers)", valeur: parseFloat(d.Population_totale.replace(/\s/g, ''))}, { pays: d.Pays, paysFlag: d.paysFlag, paysF: d.PaysF, indic: "Taux de natalité", valeur: parseFloat(d.Taux_natalité.replace(",","."))}, { pays: d.Pays, paysFlag: d.paysFlag, paysF: d.PaysF, indic: "Taux de mortalité", valeur: parseFloat(d.Taux_mortalité.replace(",",".")) }, { pays: d.Pays, paysFlag: d.paysFlag, paysF: d.PaysF, indic: "Espérance de vie", valeur: parseFloat(d.Espérance_vie.replace(",",".")) }, { pays: d.Pays, paysFlag: d.paysFlag, paysF: d.PaysF, indic: "Taux de mortalité infantile", valeur: parseFloat(d.Taux_mortalité_infantile.replace(",",".")) }, { pays: d.Pays, PaysFlag: d.PaysFlag, paysF: d.PaysF, indic: "Nombre d'enfant(s) par femme", valeur: parseFloat(d.Nombre_enfant_femme.replace(",",".")) }, { pays: d.Pays, Paysflag: d.Paysflag, paysF: d.PaysF, indic: "Taux de croissance", valeur: parseFloat(d.Taux_croissance.replace(",","."))}, { pays: d.Pays, Paysflag: d.Paysflag, paysF: d.PaysF, indic: "% de 65 ans et plus", valeur: parseFloat(d.Part_65ans.replace(",","."))}, ])39:T1362,3a:T153d,3b:[{"id":"cf05c55357112d95b3ad4c25b274a9c8b75d08bebcb9a645038adda4095a555ee60e85dbe04bce50f148dd1b851e98bd3887f304d16c38193db374f4b92bdb12","href":"https://static.observableusercontent.com/files/cf05c55357112d95b3ad4c25b274a9c8b75d08bebcb9a645038adda4095a555ee60e85dbe04bce50f148dd1b851e98bd3887f304d16c38193db374f4b92bdb12","name":"paysMondeShort@13.csv","type":"text/csv","lastModified":1788331415394.26,"size":32008},{"id":"a2b1d428e30ea1635f437eaae2a90db30ebe5c8cbc437220a0dc506a9a57699222ef1c6b9566cb87441250f9dd5ab96b3b8534f62ef7bcfede0dc2d65cd1d15a","href":"https://static.observableusercontent.com/files/a2b1d428e30ea1635f437eaae2a90db30ebe5c8cbc437220a0dc506a9a57699222ef1c6b9566cb87441250f9dd5ab96b3b8534f62ef7bcfede0dc2d65cd1d15a","name":"paysMondeShort@9.csv","type":"text/csv","lastModified":1788331415394.26,"size":32012},{"id":"765f1d8966821ab40c0736faea934707441e0af825f6a46b7d88ca0df715b91a504d26474a37e8f3b04dd5a46f7cb9fbf0869a190a4ae6df095a619e962f249b","href":"https://static.observableusercontent.com/files/765f1d8966821ab40c0736faea934707441e0af825f6a46b7d88ca0df715b91a504d26474a37e8f3b04dd5a46f7cb9fbf0869a190a4ae6df095a619e962f249b","name":"data(2).csv","type":"text/csv","lastModified":1788331415394.26,"size":22915},{"id":"6cf6298624c0169017e102b439588aa9aa2e7ea39217204ace9e778010aa4276f86e8835cd9dd31a811a6ee0cbe39b7d2b8907d2ea88c090c39ace89bc85094b","href":"https://static.observableusercontent.com/files/6cf6298624c0169017e102b439588aa9aa2e7ea39217204ace9e778010aa4276f86e8835cd9dd31a811a6ee0cbe39b7d2b8907d2ea88c090c39ace89bc85094b","name":"worldUN.json","type":"application/json","lastModified":1788331415394.26,"size":1117733}] 2e:{"id":"44ec112aa8726167","slug":"d3-jstableau-et-graphique-fr-node-3890","title":"D3.jsTableau et graphique FR (node 3890)","thumbnail":"acb67b1eb1fb42b1f9f74692836fd4b19acd29fa42ad0451bfb2c33d9cc967af","access_level":"public","create_time":"$D2026-09-02T06:43:35.394Z","update_time":"$D2026-09-28T19:29:55.860Z","view_time":null,"first_public_time":"$D2026-09-02T14:44:39.079Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026"},"version":4023,"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}],"members":[{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026","role":"editor"},{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d85f2e0d88b5af4c","slug":"tous-les-pays-du-monde-onu","title":"Tous les pays du monde - ONU","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"type":"notebook","body":{"titling":"auto","title":"D3.jsTableau et graphique FR (node 3890)","cells":[{"id":0,"value":"# D3.jsTableau et graphique FR (node 3890)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3988,"value":"articleLink({ lang: \"en\", kicker: \"Tout savoir sur la 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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3808,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3716,"value":"Lien page Ined: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2702,"value":"currentTime = new Date()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2290,"value":"dataOld = FileAttachment(\"paysMondeShort@9.csv\").csv({typed: true}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2057,"value":"FileAttachment(\"data(2).csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":" data2 = data.map(d=>({\n Région1: d.région1,\n Région2: d.région2, \n Pays: d.pays,\n PaysF: d.paysf,\n PaysFlag: d.paysflag,\n Population_totale: d.population_totale.toLocaleString('fr-FR'),\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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3671,"value":"viewof selectReg1 = Inputs.select(reg1Array, {label: \"\", value: reg1Array}) ","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof selectReg2 = Inputs.select(reg2Array, {label: \"\", value: \"-\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":" #### ${selectReg2} | Estimations 2024","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"titre","database":"$undefined"},{"id":3567,"value":"#### Tableau","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3987,"value":"$31","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"tab","database":"$undefined"},{"id":3570,"value":"#### Graphique","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3572,"value":"domain = [...new Set(dfLong.map(d=>d.indic))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2858,"value":"viewof selectIndic = Inputs.select(domain, {label: \"\", value: \"Espérance de vie\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3565,"value":"#### Display","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3866,"value":"#### tooltip","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3802,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3870,"value":"statColumnMapBar = ({\n \"Taux de natalité\": \"Taux_natalité\",\n \"Taux de mortalité\": \"Taux_mortalité\",\n \"Espérance de vie\": \"Espérance_vie\",\n \"Taux de mortalité infantile\": \"Taux_mortalité_infantile\",\n \"Nombre d'enfant(s) par femme\": \"Nombre_enfant_femme\",\n \"Taux de croissance\": \"Taux_croissance\",\n \"% de 65 ans et plus\": \"Part_65ans\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3872,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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 !== \"Monde\");\n if (!subregionRow) return [];\n\n const continent = subregionRow.Région1;\n const worldRow = data2.find(r => r.Région1 === \"Monde\" && r.Pays === \"Monde\");\n const continentRow = data2.find(r => r.Région1 === \"Monde\" && r.Pays.toLowerCase() === continent.toLowerCase());\n\n return [\n worldRow ? { label: \"Monde\", 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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3876,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3886,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3868,"value":"#### plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3806,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3486,"value":"viewof output = Inputs.radio([\"Tableau\", \"Graphique\"], {value: \"Tableau\"}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3501,"value":"output2 = output=== \"Tableau\" ? tab : plot","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3983,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3436,"value":"col = {\n let n; \n if (selectIndic=== \"Taux de natalité\") {return n= color[0]}\n if (selectIndic=== \"Taux de mortalité\") {return n= color[2]}\n if (selectIndic=== \"Espérance de vie\") {return n= color[3]}\n if (selectIndic=== \"Taux de mortalité infantile\") {return n= color[5]} \n if (selectIndic=== \"Nombre d'enfant(s) par femme\") {return n= color[1]} \n if (selectIndic=== \"% de 65 ans et plus\") {return n= color[4]} \n {return n=\"#222330\"} \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2686,"value":"nTicks = {\nlet n; \nif (rWidth>=600 && selectIndic===\"Population totale (en milliers)\") {return n = 5}\nif (rWidth<600 && selectIndic===\"Population totale (en milliers)\") {return n = 2}\n else {return n=6}\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2393,"value":"radius2 = {\n let n;\n if (selectIndic === \"Taux de croissance\") {return n = 0} \n else {return n= 20}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2295,"value":"Height = {\nlet n;\n if (rWidth>=900 && filterLong.length>=10) {return n=rWidth*.65} \n if (rWidth>=600 && filterLong.length>=10) {return n=rWidth*.75} \n if (rWidth>=600 && (filterLong.length<5)) {return n=rWidth*.35} \n if (rWidth>=600 && (filterLong.length<10)) {return n=rWidth*.50}\n if (rWidth<600 && (filterLong.length>15)) {return n=370} \n if (rWidth<600 && (filterLong.length<5)) {return n=200} \n else {return n=300}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1477,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","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","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","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","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","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","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","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","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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3583,"value":"#### Minimap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3596,"value":"dfIso = data.map(d=>({\nregion1: d.région1,\nregion2: d.région2,\npays: d.Pays,\niso3: d.iso3,\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3601,"value":"world = merge.featureCollection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3603,"value":"reg1 = selectReg1!=\"Monde\" ? viz.tool.featurecollection(\n world.features.filter((d) => d.properties.region1 == selectReg1)) : world","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3605,"value":"reg2 = selectReg1!=\"Monde\" && selectReg2 !=\"--\" ? viz.tool.featurecollection(\n world.features.filter((d) => d.properties.region2 == selectReg2 )) : reg1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3560,"value":"### CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2783,"value":"$39","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"cssGeneral","database":"$undefined"},{"id":2757,"value":"$3a","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"cssTab","database":"$undefined"},{"id":3737,"value":"viewof rWidth = {\n const div = html`

`;\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 div.value = div.getBoundingClientRect().width || 800;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1"}} 2f:"$2e:body"