21:null 22:["$","title",null,{"children":"Last - Transition démographique dans l’Afrique subsaharienne 1950-2023 FR | Marc Thevenin | Observable"}] 27:T10f1,boxPlot = { const content = htl.html`

${boxScrubber} ${viewof rWidth} ${viewof choix} ${choixG}

* ISF : Nombre moyen d'enfants par femme
** TMI : Risque pour un nouveau né de mourrir avant son premier anniversaire.

Inspiré de D.Tabutin, B.Schoumaker, 2004, « La démographie de l’Afrique au sud du Sahara », Ined, Population, 59 (3-4).

Guide :

Tous les pays : chaque cercle est un pays observé une année donnée entre 1950 et 2023. La droite de régression et le R² indiquent la force de la relation entre Taux de mortalité infantile (TMI) et l'indice synthétique de fécondité (ISF). L'évolution conjointe de ces deux indicateurs peut être suivie dans le temps à l'aide d'une animation ou de trois graphiques pour les années 1950,1980 et 2023.
Un pays : le cercle avec un contour noir représente l’année en cours. Avec l'animation, les cercles rétrécissent au cours du temps à hauteur du nombre d'années qui le sépare de l'année courante. L'année 1980 (cercle blanc) sert également de repère.

Source : World Population Project, Nations Unies.

`; return fullscreen(content, "boxPlot", {target:".plot", inBox: true, lang:"fr", title:"La transition démographique en Afrique subsaharienne", fsMax: "clamp(900px, 30vw, 1200px)"}); } 28:Tdb6,plotReg = { const w = rWidth; const height = w>900 ? 0.55*w : w>600 ? 0.65*w : 330; const margin = {top: w>600 ? 50 : 30, right: w>600 ? 40 : 30, bottom: w>600 ? 50 : 30, left: w>600 ? 50 : 30}; const fontSize = "clamp(11px,2cqw,15px)"; const tooltip = d3.select("body").append("div") .style("position", "fixed") .style("pointer-events", "none") .style("background", "white") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("padding", "6px 10px") .style("font-family", "poppins, sans-serif") .style("font-size", "13px") .style("color", "#222330") .style("box-shadow", "0 2px 6px rgba(0,0,0,.15)") .style("opacity", 0) .style("z-index", 9999); invalidation.then(() => tooltip.remove()); const colorDot = d3.scaleOrdinal() .domain(domain) .range(range); const xScale = d3.scaleLinear() .domain([0,250]) .range([margin.left, w - margin.right]); const yScale = d3.scaleLinear() .domain([0,9]) .range([height - margin.bottom, margin.top]); const svg = d3.create("svg") .attr("width", w) .attr("height", height) .style("font-family", "Poppins, sans-serif"); // Texte avec Année et valeur R2 svg.append("text") .attr("x", xScale(205)) .attr("class", "plot-year") .attr("y", yScale(1.6)) .style("font-family","poppins") .style("font-size",fontSize); // Axes svg.append("g") .attr("transform", `translate(0,${height-margin.bottom})`) .call(d3.axisBottom(xScale).tickValues([0, 50, 100, 150, 200,250])) .style("font-family","poppins") .style("font-size",fontSize); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale).tickValues([0,1 ,2 ,3, 4,5,6,7,8,9])) .style("font-family","poppins") .style("font-size",fontSize); // Grilles svg.append("g") .attr("class", "grid-y") .attr("transform", `translate(${margin.left},0)`) .call( d3.axisLeft(yScale) .tickValues([0, 1, 2, 3, 4,5,6,7,8,9]) .tickSize(-(w - margin.left - margin.right)) .tickFormat("") ) .selectAll("line") .attr("stroke", "#ddd"); svg.append("g") .attr("class", "grid-x") .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3.axisBottom(xScale) .tickValues([ 50, 100, 150, 200,250]) .tickSize(-(height - margin.top - margin.bottom)) .tickFormat("") ) .selectAll("line") .attr("stroke", "#ddd"); // Labels axes svg.append("text") .attr("class", "x-label") .attr("x", margin.left + (w - margin.left - margin.right) / 2) .attr("y", height - 5) .attr("text-anchor", "middle") .style("font-size", fontSize) .text("Taux de mortalité infantile (pour 1 000)** "); svg.append("text") .attr("class", "y-label") .attr("x", margin.left - 5) .attr("y", margin.top - 8) .attr("text-anchor", "start") .style("font-size", fontSize) .text("Indice Synthétique de Fécondité*"); // Droite de régression svg.append("path") .attr("class","regression") .attr("fill","none") .attr("stroke","#414141") .attr("stroke-width",2); // Pays svg.append("g") .attr("class","points"); // Eléments attachés au SVG svg.node().xScale = xScale; svg.node().yScale = yScale; svg.node().colorDot = colorDot; svg.node().tooltip = tooltip; return svg.node(); }29:T737,dotsReg = { const svg = plotReg; const xScale = svg.xScale; const yScale = svg.yScale; const colorDot = svg.colorDot; const tooltip = svg.tooltip; const t = d3.select(svg).transition() .duration(800) .ease(d3.easeCubicOut); // Points (pays) d3.select(svg) .select(".points") .selectAll("circle") .data(df, d => d.pays) .join( enter => enter.append("circle") .attr("r", 0) .attr("cx", d => xScale(d.tmi)) .attr("cy", d => yScale(d.icf)) .attr("stroke", "white") .attr("fill", d => colorDot(d.region)), update => update, exit => exit .transition(t) .attr("r", 0) .remove() ) .style("cursor", "pointer") .on("mousemove", (event, d) => tooltip .style("opacity", 1) .style("left", event.clientX + 10 + "px") .style("top", event.clientY - 10 + "px") .html(` ${d.region}
${d.pays}
ISF: ${d.icf.toFixed(1).replace(".",",")} enfants
TMI: ${d.tmi.toFixed(1).replace(".",",")}‰ `) ) .on("mouseleave", () => tooltip.style("opacity", 0)) .transition(t) .attr("cx", d => xScale(d.tmi)) .attr("cy", d => yScale(d.icf)) .attr("r", width>900 ? 8 : width>600 ? 6 : 4); // Régression const [xMin,xMax] = d3.extent(df,d=>d.tmi); const lineGen = d3.line() .x(d=>xScale(d.x)) .y(d=>yScale(reg.predict(d.x))); d3.select(svg) .select(".regression") .datum([{x:xMin},{x:xMax}]) .transition(t) .attr("d",lineGen); // Année et R² const txt = d3.select(plotReg).select(".plot-year"); txt.html(""); txt.append("tspan") .text(annee); txt.append("tspan") .attr("x", txt.attr("x")) .attr("dy", "1.2em") .text(`R² = ${reg.r2.toFixed(3).replace(".", ",")}`); }2a:T1113,plotPays = { const w = rWidth; const height = w>900 ? 0.55*w : w>600 ? 0.65*w : 330; const margin = {top: w>600 ? 40 : 30, right: w>600 ? 50 : 30, bottom: w>600 ? 50 : 30, left: w>600 ? 30 : 20}; const fontSize = "clamp(11px,2cqw,15px)"; const tooltip = d3.select("body").append("div") .style("position", "fixed") .style("pointer-events", "none") .style("background", "white") .style("border", "1px solid #ccc") .style("border-radius", "4px") .style("padding", "6px 10px") .style("font-family", "poppins, sans-serif") .style("font-size", "13px") .style("color", "#222330") .style("box-shadow", "0 2px 6px rgba(0,0,0,.15)") .style("opacity", 0) .style("z-index", 9999); invalidation.then(() => tooltip.remove()); const tooltip1980 = d3.select("body").append("div") .style("position", "fixed") .style("pointer-events", "none") .style("background", "#414141") .style("border", "1px solid #777") .style("border-radius", "6px") .style("padding", "8px 12px") .style("font-family", "Poppins, sans-serif") .style("font-size", "13px") .style("color", "white") .style("box-shadow", "0 2px 8px rgba(0,0,0,.25)") .style("opacity", 0) .style("z-index", 9999); invalidation.then(() => tooltip1980.remove()); const colorDot = d3.scaleOrdinal() .domain(domain) .range(range); const xScale = d3.scaleLinear() .domain([0,250]) .range([margin.left, w - margin.right]); const yScale = d3.scaleLinear() .domain([0,9]) .range([height - margin.bottom, margin.top]); const svg = d3.create("svg") .attr("width", w) .attr("height", height) .style("font-family", "Poppins, sans-serif"); // Axes svg.append("g") .attr("transform", `translate(0,${height-margin.bottom})`) .call(d3.axisBottom(xScale).tickValues([0, 50,100, 150, 200,250])) .style("font-family","poppins") .style("font-size",fontSize); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale).tickValues([0,1, 2,3, 4,5, 6,7,8,9])) .style("font-family","poppins") .style("font-size",fontSize); // Axes ticks svg.append("g") .attr("class", "grid-y") .attr("transform", `translate(${margin.left},0)`) .call( d3.axisLeft(yScale) .tickValues([0, 1, 2, 3, 4,5,6,7,8,9]) .tickSize(-(w - margin.left - margin.right)) .tickFormat("") ) .selectAll("line") .attr("stroke", "#ddd"); svg.append("g") .attr("class", "grid-x") .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3.axisBottom(xScale) .tickValues([50,100, 150,200,250]) .tickSize(-(height - margin.top - margin.bottom)) .tickFormat("") ) .selectAll("line") .attr("stroke", "#ddd"); // Labels axes svg.append("text") .attr("class", "x-label") .attr("x", margin.left + (w - margin.left - margin.right) / 2) .attr("y", height - 5) .attr("text-anchor", "middle") .style("font-size", fontSize) .text("Taux de mortalité infantile (pour 1 000)**"); svg.append("text") .attr("class", "y-label") .attr("x", margin.left - 5) .attr("y", margin.top - 8) .attr("text-anchor", "start") .style("font-size", fontSize) .text("Indice Synthétique de fécondité*"); // Eléments liés au svg svg.node().xScale = xScale; svg.node().yScale = yScale; svg.node().colorDot = colorDot; svg.node().tooltip = tooltip; svg.node().tooltip1980 = tooltip1980; svg.append("g") .attr("class", "history"); svg.append("g") .attr("class", "current-ring"); svg.append("g") .attr("class", "points"); // Légende intégrée au graphique const legend = makeLegend(); const lw = +legend.getAttribute("width"); const lh = +legend.getAttribute("height"); const lm = w > 600 ? 12 : 10, pad = w > 600 ? 6 : 4; const lx = (w - margin.right) - lw - lm; const ly = (height - margin.bottom) - lh - lm; svg.append("rect") .attr("class", "legend-bg") .attr("x", lx - pad).attr("y", ly - pad) .attr("width", lw + 2 * pad).attr("height", lh + 2 * pad) .attr("fill", "white").attr("fill-opacity", 0.85) .style("pointer-events", "none"); legend.setAttribute("x", lx); legend.setAttribute("y", ly); svg.node().appendChild(legend); svg.node().legend = legend; return svg.node(); }2b:T245d,dotsPays = { const svg = plotPays; const previousYear = svg.previousYear ?? annee2; svg.previousYear = annee2; const xScale = svg.xScale; const yScale = svg.yScale; const colorDot = svg.colorDot; const tooltip = svg.tooltip; const tooltip1980 = svg.tooltip1980; const t = d3.select(svg).transition() .duration(800) .ease(d3.easeCubicOut); // Suppression ancien pays avec transition d3.select(svg) .selectAll(".history circle, .points circle") .filter(d => d && d.pays !== selectPays) .interrupt() .transition() .duration(300) .attr("opacity", 0) .attr("r", 0) .remove(); // Paramètres années précédentes const allYears = [ ...dfFilter1.map(d => d.year), ...dfFilter2.map(d => d.year) ]; const years = d3.extent(allYears); const opacityScale = d3.scaleLinear() .domain(years) .range([1, 1]); const radiusScale = d3.scaleSqrt() .domain(years) .range([ 1.5, rWidth > 900 ? 14 : rWidth > 600 ? 10 : 8 ]); // Cercles années précédentes d3.select(svg) .select(".history") .selectAll("circle") .data(dfFilter1, d => d.pays + "-" + d.year) .join( enter => enter.append("circle") .attr("cx", d => xScale(d.tmi)) .attr("cy", d => yScale(d.icf)) .attr("r", d => radiusScale(d.year)) .attr("stroke", "white") .attr("stroke-opacity", 0.8) .attr("fill", d => colorDot(d.region)) .attr("fill-opacity", 0) .attr("opacity", 0) .call(enter => enter.transition() .duration(400) .attr("opacity", 1) .attr("fill-opacity", d => opacityScale(d.year)) ), update => update .attr("cx", d => xScale(d.tmi)) .attr("cy", d => yScale(d.icf)) .attr("r", d => radiusScale(d.year)) .attr("fill-opacity", d => opacityScale(d.year)), exit => exit .transition() .duration(200) .attr("opacity",0) .attr("r",0) .remove() ) .style("cursor","pointer") .on("mousemove", (event,d)=>tooltip .style("opacity",1) .style("left",event.clientX+10+"px") .style("top",event.clientY-10+"px") .html(` ${d.region}
${d.pays}
Année : ${d.year}
ISF : ${d.icf.toFixed(1).replace(".",",")} enfants
TMI : ${d.tmi.toFixed(1).replace(".",",")}‰ `) ) .on("mouseleave",()=>tooltip.style("opacity",0)); // CERCLE ANNEE DU PLAYER => année courante d3.select(svg) .select(".points") .selectAll("circle") .data(dfFilter2, d => d.pays) .join( enter => enter.append("circle") .attr("cx", d => xScale(d.tmi)) .attr("cy", d => yScale(d.icf)) .attr("r", rWidth > 900 ? 16 : rWidth > 600 ? 12 : 9 ) .attr("fill",d => colorDot(d.region)) .attr("fill-opacity",0.5) .attr("stroke","black") .attr("stroke-width",2), update => update .transition() .duration(Math.abs(annee2 - previousYear) <= 1 ? 350 : 0) .ease(d3.easeCubicOut) .attr("cx", d => xScale(d.tmi)) .attr("cy", d => yScale(d.icf)) .attr("fill", d => colorDot(d.region)) .attr("opacity",50) .attr("stroke", "black"), exit => exit .interrupt() .transition() .duration(200) .attr("opacity",0) .attr("r",0) .remove() ) .style("cursor","pointer") .on("mousemove",(event,d)=>tooltip .style("opacity",1) .style("background", colorDot(d.region)) .style("color", "white") .style("border-color", "#414141") .style("left",event.clientX+10+"px") .style("top",event.clientY-10+"px") .html(` ${d.region}
${d.pays}
Année : ${d.year}
ISF : ${d.icf.toFixed(1).replace(".",",")} enfants
TMI : ${d.tmi.toFixed(1).replace(".",",")}‰ `) ) .on("mouseleave",()=>tooltip .style("opacity",0) .style("background","white") .style("color","#222330") .style("border-color","#ccc") ) .transition(t) .attr("cx",d=>xScale(d.tmi)) .attr("cy",d=>yScale(d.icf)); // L'année courante reste au-dessus d3.select(svg) .select(".points") .raise(); // Positionnement des étiquettes : décalage en pixels (indépendant de l'échelle) const small = rWidth <= 600; const fs = small ? 11 : 14; const L = small ? 28 : 44; // longueur du trait en px (année courante) const L80 = small ? 30 : 46; // longueur du trait en px (1980) const k = Math.SQRT1_2; const [yMax, yMin] = yScale.range(); // bas et haut du graphique const xLeft = xScale.range()[0]; // x, y : centre du cercle ; r : rayon ; sy : +1 (vers le bas) ou -1 (vers le haut) // len : longueur du trait ; side : -1 (gauche), +1 (droite), 0 (vertical), sinon automatique function labelPos(x, y, r, sy, len = L, side) { const sx = side ?? (x > rWidth * 0.65 ? -1 : 1); const kx = sx === 0 ? 0 : k; // vertical : pas de décalage horizontal const ky = sx === 0 ? 1 : k; let dy = sy; const endY = y + dy * (r + len) * ky; if (endY > yMax - 6 || endY < yMin + 6) dy = -dy; return { sx, dy, start: [x + sx * r * kx, y + dy * r * ky], end: [x + sx * (r + len) * kx, y + dy * (r + len) * ky] }; } // Affichage de l'année courante (annee + trait) const current = dfFilter2[0]; if (current) { const x0 = xScale(current.tmi); const y0 = yScale(current.icf); const p = labelPos(x0, y0, rayons.head, +1); const dur = Math.abs(annee2 - previousYear) <= 1 ? 350 : 0; const labelGroup = d3.select(svg) .selectAll(".year-label") .data([current]); labelGroup.join( enter => { const g = enter.append("g") .attr("class","year-label"); g.append("path") .attr("class","year-link") .attr("fill","none") .attr("stroke","#414141") .attr("stroke-width",1); g.append("text") .attr("class","year-text") .attr("font-weight","bold") .attr("font-family","Poppins, sans-serif"); return g; }, update => update ); d3.select(svg) .select(".year-link") .transition() .duration(dur) .ease(d3.easeCubicOut) .attr("d", d3.line()([p.start, p.end])); d3.select(svg) .select(".year-text") .attr("font-size", fs) .attr("text-anchor", p.sx > 0 ? "start" : "end") .text(annee2) .transition() .duration(dur) .ease(d3.easeCubicOut) .attr("x", p.end[0] + p.sx * 3) .attr("y", p.end[1] + 4); // ordre des calques d3.select(svg) .select(".current-ring") .lower(); d3.select(svg) .select(".points") .raise(); }; // HIGHLIGHT DE L'ANNEE 1980 const y1980 = dfFilter2[0]; const r1980 = radiusScale(1980); if ( y1980 && annee2 >= 1980 && y1980.tmi1980 != null && y1980.icf1980 != null) { // position du cercle const xm = xScale(y1980.tmi1980); const ym = yScale(y1980.icf1980); // Position du texte : en haut à gauche, à droite si pas assez de place à gauche // Exception : La Réunion => à la verticale (au-dessus du cercle) const textW = small ? 30 : 38; const fitsLeft = xm - (r1980 + L80) * k - textW > xLeft; const vertical = /r[ée]union/i.test(selectPays); const side = vertical ? 0 : (fitsLeft ? -1 : +1); const p80 = labelPos(xm, ym, r1980, -1, L80, side); const g1980 = d3.select(svg) .selectAll(".year1980") .data([y1980]); g1980.join( enter => { const g = enter.append("g") .attr("class","year1980") .attr("opacity",0); g.append("path") .attr("class","year1980-link") .attr("fill","none") .attr("stroke","#777") .attr("stroke-width",1); g.append("circle") .attr("class","year1980-point") .attr("r",r1980) .attr("fill","white") .attr("stroke","#414141") .attr("stroke-width",.8); g.select(".year1980-point") .style("cursor","pointer") .on("mousemove",(event,d)=>tooltip1980 .style("opacity",1) .style("left",event.clientX + 10 + "px") .style("top",event.clientY - 10 + "px") .html(` ${d.regionFr}
${d.paysFr}
Année : 1980
ISF : ${d.icf1980.toFixed(1).replace(".",",")} enfants
TMI : ${d.tmi1980.toFixed(1).replace(".",",")}‰ `) ) .on("mouseleave",()=>tooltip1980.style("opacity",0)); g.append("text") .attr("class","year1980-text") .attr("font-family","Poppins, sans-serif"); g.transition() .duration(2000) .ease(d3.easeCubicOut) .attr("opacity",1); return g; }, update => update ); // cercle d3.select(svg) .select(".year1980-point") .attr("r", r1980) .attr("cx", xm) .attr("cy", ym); // trait d3.select(svg) .select(".year1980-link") .attr("d", d3.line()([p80.start, p80.end])); // année d3.select(svg) .select(".year1980-text") .attr("font-size", small ? 10 : 13) .attr("text-anchor", p80.sx > 0 ? "start" : p80.sx < 0 ? "end" : "middle") .attr("x", p80.end[0] + p80.sx * 3) .attr("y", p80.sx === 0 ? p80.end[1] + (p80.dy < 0 ? -4 : 12) : p80.end[1] + 4) .text("1980"); } else { d3.select(svg) .select(".year1980") .remove(); }} 2c:T932,makeLegend = () => { const refs = [1960, 1990]; const R = rayons.head; const fs = rayons.small ? 10 : 12; // taille de police const gap = fs + 1; // écart vertical minimal entre labels const cx = R + 2, xEnd = cx + R + 10; const w = xEnd + 6 + fs * 2.8; // largeur calculée sur « 2023 » en gras const h = 2 * R + 10, baseY = h - 4; const svg = d3.create("svg").attr("width", w).attr("height", h) .style("font-family", "Poppins, sans-serif").style("overflow", "visible"); const root = svg.append("g"); function update(year, duration = 150) { const items = [ { key: "now", label: year, r: R, now: true }, ...(year > 1960 ? refs.filter(y => year >= y && year !== y) .map(y => ({ key: y, label: y, r: rayons.at(y, year), now: false })) : []) ].sort((a, b) => b.r - a.r); // du plus gros au plus petit // position des labels : sommet du cercle, poussé vers le bas si trop proche du précédent let prev = -Infinity; items.forEach(d => { d.top = baseY - 2 * d.r; d.ly = Math.max(d.top, prev + gap); prev = d.ly; }); const tr = s => s.transition().duration(duration).ease(d3.easeLinear); root.selectAll("g.item") .data(items, d => d.key) .join( enter => { const g = enter.append("g").attr("class", "item").attr("opacity", 0); g.append("circle").attr("cx", cx).attr("fill", "none"); g.append("path").attr("fill", "none").attr("stroke", "#999"); g.append("text").attr("x", xEnd + 6).attr("font-size", 12); g.transition().duration(300).attr("opacity", 1); return g; }, update => update, exit => exit.transition().duration(200).attr("opacity", 0).remove() ) .each(function (d) { const g = d3.select(this); g.select("circle") .attr("stroke", d.now ? "#555" : "#999") .attr("stroke-width", d.now ? 1.8 : 1) .call(tr) .attr("cy", baseY - d.r).attr("r", d.r); g.select("path") .call(tr) .attr("d", `M${cx},${d.top} H${cx + R * 0.6} L${xEnd},${d.ly}`); g.select("text") .text(d.label) .attr("font-weight", d.now ? "bold" : "normal") .call(tr) .attr("y", d.ly + 4); }); } update(1950, 0); const node = svg.node(); node.update = update; return node; }2d:T62f,plotPaysSm = Plot.plot({ width:rWidth, marginBottom: rWidth>900 ? 70 : rWidth>600 ? 50 : 40, marginRight: rWidth>900 ? 50 : rWidth>600 ? 40 : 30, marginLeft: rWidth>900 ? 60 : rWidth>600 ? 50 : 30, [key]: {label: null, tickFormat: "d"}, x: {label: "Taux de mortalité infantile (pour 1 000)**", labelArrow:false, labelAnchor:"center", grid:true, domain:[0,250]}, y: {label: "Indice synthétique de fécondité*", labelArrow:false, labelAnchor:"center", grid:true, domain:[0,9]}, color: {legend: false, domain: domain,range: range}, marks: [ Plot.frame(), Plot.dot(dfSm,{filter: d=> region.includes(d.region) ,[key]: "year",x:"tmi",y:"icf", fill:"region", r: rWidth>900 ? 5 : rWidth>600 ? 4 : 3, stroke:"black", strokeWidth:.5, channels: { region: {value: "region", label:""}, pays: {value: "pays" , label: ""}, tmi: {value: "tmi" , label: "TMI :"}, icf: {value: "icf" , label: "ISF :"} }, tip: {format: {fx: false, fy:false, x:false,y: false, fill:false, region:true,pays:true, tmi: d=> `${d.toFixed(1).replace(".",",")}`, icf: d=> `${d.toFixed(1).replace(".",",")}` }, strokeWidth:0} }), Plot.linearRegressionY(dfSm2, {[key]:"year", x: "tmi", y: "icf", stroke: "black", ci:0}), Plot.text(r2Year, {[key]:"year", x:158,y:0.5, text: d => `R² = ${d.r2.toFixed(2).replace(".", ",")}`, textAnchor:"start" }) ] })2e:Tde9, 2f:[{"id":"a7b29dbcb563958130c0154f1f8c4a5a4e0f9cf0b2666dc43cadf6041138ec6ed5b2afac56e79a672a24de5da33f12e81fd769937b80355cf8c1b673332ddda6","href":"https://static.observableusercontent.com/files/a7b29dbcb563958130c0154f1f8c4a5a4e0f9cf0b2666dc43cadf6041138ec6ed5b2afac56e79a672a24de5da33f12e81fd769937b80355cf8c1b673332ddda6","name":"data.csv","type":"text/csv","lastModified":1786011271144.766,"size":397761},{"id":"146119709348ba35d7d602a7525359d662091ede518cc93191ac0042c2478cb1d129a38485f134ceb44054bdf257fc84867ebaa17d3a4121ae53e59e836b6d87","href":"https://static.observableusercontent.com/files/146119709348ba35d7d602a7525359d662091ede518cc93191ac0042c2478cb1d129a38485f134ceb44054bdf257fc84867ebaa17d3a4121ae53e59e836b6d87","name":"nov1.gif.jpg","type":"image/jpeg","lastModified":1786010965472.88,"size":106097}] 25:{"id":"a1dfb16c5c4b6b97","slug":"embed-transition-demographique-dans-l-afrique-subsaharienne-1950-2023-fr","title":"Last - Transition démographique dans l’Afrique subsaharienne 1950-2023 FR","thumbnail":"661ae2ffc1cd7c1c271c13ad22c46e1455d7cff56dc8b4b3b0e123ff64cc8c51","access_level":"public","create_time":"$D2026-10-02T05:51:45.243Z","update_time":"$D2026-10-13T14:46:37.387Z","view_time":null,"first_public_time":"$D2026-10-13T14:41:02.992Z","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":"pro_2026","bio":""},"version":873,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b5b022ef44e3d3a2","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/ff86d75fca849a58a73d37988818fed6fa039e41541174c8654ac020ffc491f5","tier":null,"bio":""}],"members":[{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"pro_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"37b2969b7f97346f","slug":"transition-demographique","title":"transition démographique","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"type":"notebook","body":{"titling":"auto","title":"Last - Transition démographique dans l’Afrique subsaharienne 1950-2023 FR","cells":[{"id":216,"value":"# Last - Transition démographique dans l'Afrique subsaharienne 1950-2023 FR","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"$27","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"boxScrubber = choix === \"Tous les pays\" && sm===false\n ? htl.html`${viewof annee}`\n : choix === \"Tous les pays\" && sm===true ? \"\"\n : htl.html`${viewof annee2}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"html`Graphique d'origine\n

\n${graphOrigine}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"yearCaption = new Date().getFullYear()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"## Display, Inputs et légende","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"choixG = {\n dotsReg;\n dotsPays;\n\nreturn choix===\"Tous les pays\" && sm===false ?\nhtml`

${viewof sm}

${viewof region}

${plotReg}`:\n\nchoix===\"Tous les pays\" && sm===true ?\nhtml`

${viewof sm}

${viewof region}

${plotPaysSm}`:\n\nhtml`

${viewof region}

${viewof selectPays}

\n ${plotPays}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"#### graph tous pays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"viewof annee = scrubberIned(numbers, {\n delay: 200,\n format: d=> `Année ${d}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"viewof choix = radioIned({\n title: \"Suivre :\",\n direction: \"row\", // \"column\" par défaut\n list: [\"Tous les pays\", \"Un pays\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"viewof region = legIned(domain,range, {shape: \"dot\", swatchWidth:30, fontSize:\"clamp(11px,2cqw,14px)\", selectAll:false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"#### graph un pays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"viewof selectPays = selectIned({list:domainPays})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"viewof annee2 = scrubberIned(numbers, {\n delay: 200,\n format: d=> `Année ${d}`\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"viewof sm = toggleIned({ label: \"Comparaison 1950➜1990➜2023\", value: false })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":51,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#33c081\", //vert\n \"#074dff\", //bleu\n \"#522673\", //mauve\n \"#ffb322\", //jaune\n \"#222330\", //black\n \"#d1d1d1\" //gris\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"data1 = FileAttachment(\"data.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":44,"value":"data = data1.map(d=>({ \ntmi: d.tmi,\nicf:d.icf,\npays:d.paysFr,\nregion: d.regionFr,\nyear: d.year,\nyear1980: d.year1980!=null ? d.year1980 : \"\",\nyear2000: d.year2000!=null ? d.year2000 : \"\", \ntmi1980: d.tmi1980,\ntmi2000: d.tmi2000, \nicf1980: d.icf1980,\nicf2000: d.icf2000, \n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"domain = [... new Set(data.map(d=> d.region))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"range = [pal100[0],\"#5182ff\",pal100[4],pal100[5]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"numbers = Array.from({length: 74}, (_, i) => i+1950)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"df= data.filter(d=> d.year===annee && region.includes(d.region))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"reg = linearRegression(df, d => d.tmi, d => d.icf)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"anneeR2 = html`${annee}
R² = ${reg.r2.toFixed(3)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"## Graphique 1 : tous les pays + lm","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"$28","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$29","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"## Suivi de la trajectoire d'un pays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"domainPays = [...new Set(df.map(d=>d.pays))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"dfFilter1 = data.filter(d=> d.year d.year===annee2 && selectPays===d.pays)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"dfFilterYear = data.filter(d=> d.year===annee2 && selectPays===d.pays)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"$2a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$2b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"rayons = {\n const w = rWidth;\n const hist = w > 900 ? 14 : w > 600 ? 10 : 8;\n return {\n head: w > 900 ? 16 : w > 600 ? 12 : 9,\n hist,\n small: w <= 600,\n at: (year, current) =>\n d3.scaleSqrt().domain([1950, current]).range([1.5, hist])(year)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"$2c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"legendePaysUpdate = {\n const svg = plotPays;\n svg.legend.update(\n annee2,\n Math.abs(annee2 - (svg.legendPrev ?? annee2)) <= 1 ? 150 : 0\n );\n svg.legendPrev = annee2;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"## Small multiple tous les pays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"dfSm = data.map(d=>({\ntmi:d.tmi,\nicf: d.icf,\npays: d.pays,\nregion: d.region,\nyear: d.year\n})).filter(d=> d.year===1950 || d.year===1990 || d.year===2023)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"dfSm2 = dfSm.filter(d=> region.includes(d.region))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"r2Year = d3.groups(dfSm2, d => d.year).map(([year, rows]) => ({\n year,\n r2: linearRegression(rows, d => d.tmi, d => d.icf).r2\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"key = rWidth>600 ? \"fx\" : \"fy\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"## Fonctions & input","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"import {legend, cssLegend, toggle, cssToggle} from \"@wsthevenin/mtinput\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"//cssLegend","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"import {legIned} from \"@wsthevenin/mtinput\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"import {selectIned, radioIned,toggleIned, scrubberIned} from '@mthevenin/inputined'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"viewof W = scrubberIned(d3.range(1950, 2024), {\n title: \"Année\",\n delay: 20\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"graphOrigine = FileAttachment(\"nov1.gif.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"function linearRegression(data, xAccessor, yAccessor) {\n const rows = data.filter(d => xAccessor(d) != null && yAccessor(d) != null);\n const xs = rows.map(xAccessor);\n const ys = rows.map(yAccessor);\n\n// droite de regression\n \n const xMean = d3.mean(xs);\n const yMean = d3.mean(ys);\n let num = 0, den = 0;\n for (let i = 0; i < xs.length; i++) {\n num += (xs[i] - xMean) * (ys[i] - yMean);\n den += (xs[i] - xMean) ** 2;\n }\n const slope = num / den;\n const intercept = yMean - slope * xMean;\n\n // Calcul du R²\n const ssTot = d3.sum(ys, y => (y - yMean) ** 2);\n\n const ssRes = d3.sum(rows, d => \n (yAccessor(d) - (slope * xAccessor(d) + intercept)) ** 2\n );\n\n const r2 = 1 - ssRes / ssTot;\n \n\n \n return {slope, intercept, predict: (x) => slope * x + intercept, r2};\n\n\n\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$2e","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":195,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"## Fullscreen et rWidth","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"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":612,"value":"viewof rWidth = rWidthView({fsMax: \"clamp(1100px, 60vw, 1500px)\", selector: \".plot\", invalidation})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"2"}} 26:"$25:body"