32:T886,boxPlot = html`

${viewof rWidth} ${display1}

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.

`33:Tf73,tab = html`

${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"]}

`34: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); } }; }35: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); }36:T5c7,tooltipDotPlotBar = function(items, scaleMin, scaleMax, barColor) { if (!items.length) return ""; const sorted = items.slice().sort((a, b) => a.value - b.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 ``; }37: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}`; }38:T14e2,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(1).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); // --- RÈGLE ZÉRO --- 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); return svgNode; }39:T5c4,display1 = output=== "Tableau" ? html`

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

${minimap}

${output2} ` : html`

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

${viewof selectIndic}

${minimap}

${output2}

` 3a: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(",","."))}, ])3b:T1362,3c:T1499,3d:[{"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}] 30:{"title":"New D3.jsTableau et graphique FR (node 3890)","cells":[{"id":0,"value":"# New D3.jsTableau et graphique FR (node 3890)","pinned":false,"hidden":false,"mode":"md"},{"id":3808,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":3716,"value":"Lien page Ined: ","pinned":false,"hidden":false,"mode":"md"},{"id":2702,"value":"currentTime = new Date()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2704,"value":"yearCaption = currentTime.getFullYear()","pinned":false,"hidden":false,"mode":"ojs"},{"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(\"text\").attr(\"class\", \"x-axis-label\");\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3327,"value":"data = FileAttachment(\"paysMondeShort@13.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2290,"value":"dataOld = FileAttachment(\"paysMondeShort@9.csv\").csv({typed: true}) ","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":2057,"value":"FileAttachment(\"data(2).csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":581,"value":"filter = data2.filter(d => d.Pays === selectReg2 && d.Région2!=\"--\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":3671,"value":"viewof selectReg1 = Inputs.select(reg1Array, {label: \"\", value: reg1Array}) ","pinned":false,"hidden":true,"mode":"ojs"},{"id":20,"value":"viewof selectReg2 = Inputs.select(reg2Array, {label: \"\", value: \"-\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":" #### ${selectReg2} | Estimations 2024","pinned":false,"hidden":false,"mode":"md"},{"id":3567,"value":"#### Tableau","pinned":false,"hidden":false,"mode":"md"},{"id":3987,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3570,"value":"#### Graphique","pinned":false,"hidden":false,"mode":"md"},{"id":3572,"value":"domain = [...new Set(dfLong.map(d=>d.indic))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2858,"value":"viewof selectIndic = Inputs.select(domain, {label: \"\", value: \"Espérance de vie\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3565,"value":"#### Display","pinned":false,"hidden":false,"mode":"md"},{"id":3866,"value":"#### tooltip","pinned":false,"hidden":false,"mode":"md"},{"id":3802,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":3872,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":3876,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":3886,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":3868,"value":"#### plot","pinned":false,"hidden":false,"mode":"md"},{"id":3804,"value":"updatePlot = ({\n duration: 750,\n ease: d3.easeCubicOut\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3806,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":3486,"value":"viewof output = Inputs.radio([\"Tableau\", \"Graphique\"], {value: \"Tableau\"}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":3798,"value":"## filtres et config","pinned":false,"hidden":false,"mode":"md"},{"id":3501,"value":"output2 = output=== \"Tableau\" ? tab : plot","pinned":false,"hidden":false,"mode":"ojs"},{"id":3983,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":1471,"value":"df = data2.filter(d=> selectReg1.includes(d.Région1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1512,"value":"df2b = df2.concat(filter)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1477,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1362,"value":"filterLong = dfLong.filter(d => selectIndic === d.indic )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"max = d3.max(filterLong, d => d.valeur)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1442,"value":"min = d3.min(filterLong, d => d.valeur)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":31,"value":"df2 = df.filter(d=> selectReg2.includes(d.Région2) && d.Pays!=selectReg2 \n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"filterRegion1 = df.filter(d=> selectReg1.includes(d.Région1))","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"region2 = filterRegion1.map (d => d.Région2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"reg2Array = [...new Set(region2)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"region1 = data2.map (d => d.Région1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"reg1Array = [...new Set(region1)]","pinned":false,"hidden":false,"mode":"ojs"},{"id":3583,"value":"#### Minimap","pinned":false,"hidden":false,"mode":"md"},{"id":3585,"value":"viz = require(\"geoviz@0.8.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3588,"value":"worldun = FileAttachment(\"worldUN.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":3601,"value":"world = merge.featureCollection","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":3560,"value":"### CSS","pinned":false,"hidden":false,"mode":"md"},{"id":2783,"value":"$3b","pinned":false,"hidden":false,"mode":"html"},{"id":2757,"value":"$3c","pinned":false,"hidden":false,"mode":"html"},{"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"}],"files":"$W3d","stdlib":"1","titling":"auto"}