28:null 29:["$","title",null,{"children":"D3.js - Répartition de la population mondiale selon la fécondité FR (last version) | Marc Thevenin | Observable"}] 2e:Te13,boxPlotGraph = htl.html `

${display} ${cssInput} ${cssToggle} ${viewof rWidth}

Inspiré de C.Wilson, G.Pison, La majorité de l'humanité vit dans un pays où la fécondité est basse, Population & sociétés, n°405, octobre 2004.

Source : World Population Project, Nations Unies.

${viewof rWidth}

` 2f:T65a,config = { const mobile = rWidth <= 600; //actuellement min x à 0.5, // const minICF = d3.min(df, d => d.icf); const worldScale = d3.scaleLinear() .domain([2.1, 0.5]) .range(["#d9d9d9", "#212121"]) .clamp(true); const selectedScale = d3.scaleLinear() .domain([2.1, 0.5]) //.range(["#beeed8", "#134830"]) //vert //.range(["#ffb8b5", "#a60800"]) //rouge .range(["#c8d7ff","#002ea4"]) .clamp(true); const isoByCountry = new Map( df.map(d => [d.pays, d.ISO3]) ); const selectedISO = isoByCountry.get(selectP); return { mobile, showReferenceLabels: !mobile, // Courbe principale lineWidth: mobile ? 2.5 : 4, // Courbes de référence refWidth: mobile ? {1950: 0.75, 1980: 1.5, 2000: 2.25} : {1950: 1, 1980: 1.7, 2000: 2.7}, // Durées d'animation duration: mobile ? 200 : 350, // Pays suivi country: { follow: choixPays === true, iso: selectedISO, radius: rWidth>900 ? 12 : rWidth>600 ? 8 : 5, stroke: "#414141", strokeHigh: pal100[3], strokeColor(icf) { return icf >= 2.1 ? this.strokeHigh : this.stroke; }, strokeWidth:0.3 }, // Couleurs colors: { //current: "#002583", current: "#e90b00", reference: pal100[0], area: pal100[0], country: "#b22222", world(icf) { return (icf == null || icf >= 2.1) ? "#ffffff" : worldScale(icf); }, selected(icf) { return (icf == null || icf >= 2.1) ? "#ffffff" : selectedScale(icf); } } }; }30:T1e92,plot = { const {width, height, marginLeft, marginRight, marginTop, marginBottom} = dims; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font: 10px sans-serif; overflow: visible;"); const x = d3.scaleLinear().domain([0.5,9]).range([dims.marginLeft, dims.width - dims.marginRight]) const y = d3.scaleLinear().domain([0,100]).range([dims.height - dims.marginBottom, dims.marginTop]) const lineGen = d3.line().x(d=>x(d.icf)).y(d=>y(d.pPop)).curve(d3.curveStepAfter) const areaGen = d3.area().x(d=>x(d.icf)).y0(y(0)).y1(d=>y(d.pPop)).curve(d3.curveStepAfter) // grid sur y svg.append("g") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.1) .selectAll("line") .data(y.ticks(10)) .join("line") .attr("x1", marginLeft) .attr("x2", width - marginRight) .attr("y1", d => y(d)) .attr("y2", d => y(d)); // axe des x svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(10).tickSizeOuter(0)) .call(g => g.select(".domain").remove()); // axe des y svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(10).tickSizeOuter(0)) .call(g => g.select(".domain").remove()); // label x svg.append("text") .attr("x", width - marginRight) .attr("y", width>600 ? height - marginBottom + 70 : height - marginBottom + 50) .attr("text-anchor", "end") .attr("fill", "currentColor") .text("Indice Conjoncturel de Fécondité"); // label y svg.append("text") .attr("x", marginLeft -30) .attr("y", marginTop - 20) .attr("text-anchor", "start") .attr("fill", "currentColor") .text("% cumulé de la population mondiale"); // courbes de référence fixes (1950, 1980, 2000) const refYears = [ {year: 1950, color: config.colors.reference}, {year: 1980, color: config.colors.reference}, {year: 2000, color: config.colors.reference} ]; svg.append("g") .attr("class", "reference-curves") .selectAll("path") .data(refYears) .join("path") .attr("class", d => `reference-${d.year}`) .attr("fill", "none") .attr("stroke", d => d.color) .attr("stroke-width", d=> config.refWidth[d.year]) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("opacity", 0); // label des années de référence lorsque le player s'arrête svg.append("defs") .append("marker") .attr("id", "arrow-reference") .attr("viewBox", "0 -5 10 10") .attr("refX", 8) .attr("refY", 0) .attr("markerWidth", 5) .attr("markerHeight", 5) .attr("orient", "auto") .append("path") .attr("d", "M0,-5L10,0L0,5") .attr("fill", "#222330"); svg.append("g") .attr("class", "reference-labels") .attr("display", config.showReferenceLabels ? null : "none") .selectAll("g") .data([ { year: 1950, x: 6.4, y: 70, iso: "CHN" }, { year: 1980, x: 5.3, y: 63, iso: "IND" }, { year: 2000, x: 3.5, y: 60, iso: "IND" } ]) .join("g") .attr("class", d => `reference-label-${d.year}`) .attr("opacity", 0) .each(function(d){ const g = d3.select(this); // pour le x2 et le y2 de la courbe const pointLabel = df.find(e => e.year === d.year && e.ISO3 === d.iso); g.append("line") .attr("class", "reference-label-line") .attr("stroke", "#222330") .attr("stroke-width", 2) .attr("x1", x(d.x+0.08)) .attr("x2", x(pointLabel.icf+0.05)) .attr("y1", y(d.y+1)) .attr("y2", y(pointLabel.pPop-5)) .attr("marker-end", "url(#arrow-reference)"); const rect = g.insert("rect") .attr("class", "reference-label-bg") .attr("fill", "white") .attr("stroke","#222330") .attr("stroke-width",.5); const text = g.append("text") .attr("class", "reference-label-text") .attr("x", x(d.x+.1)) .attr("y", y(d.y)) .attr("fill", "#222330") .style("font-family", "poppins,sans-serif") .style("font-size", "clamp(10px,2cqw,13px)") .style("font-weight", 400) .text(d.year); requestAnimationFrame(() => { const bbox = text.node().getBBox(); rect .attr("x", bbox.x - 4) .attr("y", bbox.y - 2) .attr("width", bbox.width + 8) .attr("height", bbox.height + 4) .attr("rx", 3) .attr("opacity", 0.85); }); }); // ruleX : ICF = 2.1 svg.append("line") .attr("x1", x(2.1)) .attr("x2", x(2.1)) .attr("y1", marginTop) .attr("y2", height - marginBottom) .attr("stroke", "currentColor") .attr("stroke-width", 0.8); // ruleX : 0.5 svg.append("line") .attr("x1", x(0.5)) .attr("x2", x(0.5)) .attr("y1", marginTop) .attr("y2", height - marginBottom) .attr("stroke", "currentColor") .attr("stroke-width", 0.8); // ruleY : 0 svg.append("line") .attr("y1", y(0)) .attr("y2", y(0)) .attr("x1", marginLeft) .attr("x2", width - marginRight) .attr("stroke", "currentColor") .attr("stroke-width", 0.8); // --- éléments dynamiques : initialisés à la première année du scrubber (1950) --- const initYear = 1950; const initFilter = df.filter(d => d.year === initYear && d.icf < 2.1).sort((a, b) => a.icf - b.icf); const initFull = df.filter(d => d.year === initYear).sort((a, b) => a.icf - b.icf); const initMaxPop = initFilter.length ? initFilter[initFilter.length - 1].pPop : 0; const initAreaData = initFilter.length ? [...initFilter, {icf: 2.1, pPop: initMaxPop}] : []; // Aire max x=2.1 svg.append("path") .attr("class", "bg-area") .attr("fill", "#001a5e") .attr("opacity", .1) .attr("d", areaGen(initAreaData)); // Courbe principale svg.append("path") .attr("class", "current-line") .attr("fill", "none") .attr("stroke", config.colors.current) .attr("stroke-width", width>600 ? 4 : 2) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", lineGen(initFull)); // Dot pour pays sélectionné svg.append("circle") .attr("class", "selected-country-dot") .attr("r", config.country.radius) .attr("opacity", 0) .attr("pointer-events", "none") .style("stroke-width", width>900 ? 2.5 : width>600 ? 2 : 1); // repère horizontal sur %pop => icf<2.1 // courbe svg.append("line") .attr("class", "rule-maxpop") .attr("x1", marginLeft) .attr("x2", x(2.1)) .attr("y1", y(initMaxPop)) .attr("y2", y(initMaxPop)) .attr("stroke", "currentColor") .attr("stroke-width", 0.5); // le % de max pop svg.append("text") .attr("class", "label-maxpop") .attr("x", x(1.2)) .attr("y", y(initMaxPop)) .attr("text-anchor", "middle") .attr("fill", "#222330") .text(`${initMaxPop.toFixed(1).replace(".", ",")}%`) .style("font-size", "clamp(.6rem, 2cqw, 1rem" ); // --- conteneur relatif englobant le svg, --- const container = d3.create("div") .style("position", "relative") .style("width", "100%"); container.node().appendChild(svg.node()); svg.append("path") .attr("class", "current-hit") .attr("fill", "none") .attr("stroke", "transparent") .attr("stroke-width", 20) .attr("pointer-events", "stroke") .attr("d", lineGen(initFull)); container.node().generators = { X: x, Y: y, line: lineGen, area: areaGen, }; createTooltipICF(container, svg, x, y) container.node().currentData = initFull.filter(d => d.selectTip === 1); //pour toolTip filtre sur petit territoire container.node().labelTimer = null; return container.node(); }31:T1667,createTooltipICF = (container, svg, x, y) => { // TOOLTIP // Fonction : tooltip interactif avec hover + clic + verrouillage // Entrées : container, svg, x, y // Dépendance : container.node().currentData // état du tooltip container.node().tooltipState = null; // null | hover | pinned const tooltip = container.append("div") .attr("class", "tooltip-current") .style("position", "absolute") .style("z-index", 100) .style("background", "#414141") .style("color", "white") .style("padding", "8px 30px 8px 12px") .style("border-radius", "6px") .style("font-family", "Poppins") .style("font-size", "clamp(11px, 2vw, 15px)") .style("pointer-events", "none") .style("white-space", "normal") .style("width", "clamp(180px, 25vw, 280px)") .style("line-height", "1.4") .style("overflow-wrap", "break-word") .style("opacity", 0) .style("box-shadow", "0 3px 10px rgba(0,0,0,0.3)"); // croix const tooltipClose = tooltip.append("span") .text("✕") .style("position", "absolute") .style("top", "5px") .style("right", "8px") .style("font-size", "12px") .style("cursor", "pointer") .style("opacity",0.8) .style("display","none") .on("click", function(event){ event.stopPropagation(); hideTooltip(); }); // contenu const tooltipContent = tooltip.append("div"); // marqueur svg.append("circle") .attr("class", "current-marker") .attr("r", 3.5) .attr("fill", "white") .attr("stroke", "black") .attr("stroke-width", 1) .attr("opacity", 0); const marker = svg.select(".current-marker"); function nearestPoint(event){ const data = container.node().currentData; if (!data || !data.length) return null; const [mx, my] = d3.pointer(event, svg.node()); const tolerance = 25; // zone d'accrochage en pixels let best = null; let bestDist = Infinity; for(let i = 0; i < data.length; i++){ const d = data[i]; const next = data[i+1]; const x0 = x(d.icf); const y0 = y(d.pPop); // segment horizontal const x1 = next ? x(next.icf) : x.range()[1]; let dx = 0; let dy = my - y0; if(mx >= x0 && mx <= x1){ const dist = Math.abs(dy); if(dist < bestDist && dist < tolerance){ bestDist = dist; best = d; } } // segment vertical du stair step if(next){ const xv = x(next.icf); const y1 = y(next.pPop); if( mx >= xv - tolerance && mx <= xv + tolerance && my >= Math.min(y0,y1) - tolerance && my <= Math.max(y0,y1) + tolerance ){ const dist = Math.abs(mx-xv); if(dist < bestDist){ bestDist = dist; best = next; } } } } return best; } // position du point function moveMarker(d){ marker .attr("cx", x(d.icf)) .attr("cy", y(d.pPop)) .attr("opacity",1); } // contenu + couleur function updateTooltip(d, pinned=false){ const seuil = 2.1; const texte = d.icf < seuil ? {pop: d.pPop, comp: "inférieur à"} : {pop: 100 - d.pPop, comp: "supérieur ou égal à"}; tooltipContent.html(`

+ ${d.pays}

En ${d.year}, ${texte.pop.toFixed(1)}% de la population mondiale vivait dans un pays dont l'ICF était ${texte.comp} ${d.icf.toFixed(2)}. `); const tooltipColors = d.icf < seuil ? { fill: pinned ? "#001a5e" : "#414141", text: "white" } : { fill: "white", text: pinned ? "#001a5e" : "#414141" }; tooltip .style("opacity",1) .style("background", tooltipColors.fill) .style("color", tooltipColors.text) .style( "border", pinned ? `1px solid ${tooltipColors.text}` : "none" ) .style("pointer-events", pinned ? "all" : "none"); tooltipClose .style("display", pinned ? "block" : "none"); } // position du tooltip function placeTooltip(event){ const [px, py] = d3.pointer(event, container.node()); const cw = container.node().getBoundingClientRect().width; // rendre le tooltip mesurable même quand il est transparent tooltip .style("visibility","hidden") .style("opacity",1); const tw = tooltip.node().offsetWidth; const th = tooltip.node().offsetHeight; let left = px + 8; if (left + tw > cw) { left = px - tw - 15; } left = Math.max(5, left); const top = py - th - 12 < 0 ? py + 8 : py - th - 12; tooltip .style("left", `${left}px`) .style("top", `${top}px`) .style("visibility","visible") .style("opacity",1); } // Afficher function showTooltip(event, pinned=false){ const d = nearestPoint(event); if(!d){ marker.attr("opacity",0); tooltip.style("opacity",0); return; } moveMarker(d); updateTooltip(d,pinned); placeTooltip(event); } // fermer complètement function hideTooltip(){ container.node().tooltipState = null; tooltip .style("opacity",0) .style("pointer-events","none") .style("background","#414141"); tooltipClose .style("display","none"); marker .attr("opacity",0); } // interactions svg.select(".current-hit").on("mousemove",function(event){ if(container.node().tooltipState==="pinned") return; container.node().tooltipState="hover"; showTooltip(event,false); }) .on("click",function(event){ if(container.node().tooltipState==="pinned"){ hideTooltip(); } else { container.node().tooltipState="pinned"; showTooltip(event,true); } }) .on("mouseleave",function(){ if(container.node().tooltipState==="pinned") return; marker.attr("opacity",0); tooltip.style("opacity",0); }); container.node().hideTooltip = hideTooltip; }32:Tf3e,plotUpdate= { const svg = d3.select(plot); const x = plot.generators.X; const y = plot.generators.Y; const lineGen = plot.generators.line; const areaGen = plot.generators.area; const hideTooltip = plot.hideTooltip; const t = svg.transition().duration(rWidth > 600 ? 350 : 250).ease(d3.easeLinear); const curFull = df.filter(d => d.year === annee).sort((a, b) => a.icf - b.icf); // condition sur l'input choix du pays const country = config.country.follow ? curFull.find(d => d.ISO3 === config.country.iso) : null; function updateReferenceLabels(){ clearTimeout(plot.labelTimer); // disparition immédiate pendant le mouvement svg.selectAll(".reference-labels g") .transition() .duration(200) .attr("opacity",0); // attente d'arrêt plot.labelTimer = setTimeout(()=>{ svg.selectAll(".reference-labels g") .each(function(d){ if(annee >= d.year){ d3.select(this) .transition() .duration(600) .attr("opacity",1); } }); },700); } svg.node().currentData = curFull.filter(d => d.selectTip === 1); //filtre petit territoire pour toolTip if(svg.node().tooltipState==="pinned"){ hideTooltip(); } // courbes des 3 années de référence svg.select(".reference-curves") .selectAll("path") .each(function(d) { const path = d3.select(this); if (annee >= d.year) { const dataRef = df .filter(x => x.year === d.year) .sort((a,b) => a.icf - b.icf); path .attr("d", lineGen(dataRef)) .transition() .duration(500) .attr("opacity", 1) .attr("stroke-width", config.refWidth[d.year]); } else { path .transition() .duration(300) .attr("opacity", 0); } }); const curFilter = filter; // df filtré sur annee && icf<2.1, déjà trié const maxPop = curFilter.length ? curFilter[curFilter.length - 1].pPop : 0; const areaData = curFilter.length ? [...curFilter, {icf: 2.1, pPop: maxPop}] : []; const newAreaD = areaGen(areaData) || ""; const newLineD = lineGen(curFull) || ""; svg.select("path.bg-area") .transition(t) .attrTween("d", function () { const previous = d3.select(this).attr("d"); return ip(previous, newAreaD); }); svg.select("path.current-line") .transition(t) .attrTween("d", function () { const previous = d3.select(this).attr("d"); return ip(previous, newLineD); }); svg.select(".current-hit") .transition(t) .attr("d", newLineD); svg.select("line.rule-maxpop") .transition(t) .attr("y1", y(maxPop)) .attr("y2", y(maxPop)); svg.select("text.label-maxpop") .transition(t) .attr("y", y(maxPop) - 8) .tween("text", function () { const node = this; const previous = parseFloat((node.textContent || "0").replace(",", ".")) || 0; const i = d3.interpolateNumber(previous, maxPop); return (tt) => { node.textContent = `${i(tt).toFixed(1).replace(".", ",")}%`; }; }); // Dot pays sélectionné const dot = svg.select(".selected-country-dot"); if (country) { dot .transition(t) .attr("cx", x(country.icf)) .attr("cy", y(country.pPop)) .attr("r", config.country.radius) .attr( "fill", country.icf < 2.1 ? config.colors.selected(country.icf) : "white" ) .attr( "stroke", country.icf < 2.1 ? config.country.stroke : config.country.strokeHigh ) .attr("stroke-width", 1.5) .attr("opacity", 1); } else { dot .transition(t) .attr("opacity", 0); } svg.select(".bg-area").lower(); svg.select(".current-line").raise(); svg.select(".current-marker").raise(); svg.select(".selected-country-dot").raise(); svg.select(".reference-labels").raise(); updateReferenceLabels(); return svg.node(); }33:T5de,display = html`

Population mondiale selon l'indice conjoncturel de fécondité

${viewof form1}

${viewof choixPays} ${choixPays === true ? viewof selectP : ""}

${rWidth > 600 ? html`

${map === true ? html`

${icfRampUpdate} ${minimapUpdate}

${viewof enlarged}

` : ""} ${plotUpdate}

` : html`

${plot}

${map === true ? html`

${icfRampUpdate}

${minimapUpdate}

` : ""} `} `34:T149e,minimap = { const marginMM = 1; const minimapConfig = { minWidth: 150, maxWidth: 300, widthRatio: rWidth<900 ? 0.35 : 0.3, margin: 0 }; // const widthMM = width <= 600 // ? Math.min(width * 0.85, 360) // : width < 850 // ? Math.max(170, width * 0.28) // : Math.max( // minimapConfig.minWidth, // Math.min(width * minimapConfig.widthRatio, minimapConfig.maxWidth) // ); const widthMM = rWidth <= 600 ? Math.min(rWidth * 0.85, 360) : rWidth < 850 ? Math.max(170, rWidth * 0.28) : Math.min( Math.max( minimapConfig.minWidth, Math.min(rWidth * minimapConfig.widthRatio, minimapConfig.maxWidth) ), 320 // garde-fou pour limiter les débordements sur l'embed (width erroné) ); // projection const projection = d3.geoEqualEarth(); projection.fitWidth(widthMM - marginMM*2, worldun); const pathGen = d3.geoPath(projection); const b = pathGen.bounds(worldun); const heightMM = (b[1][1] - b[0][1]) + marginMM*2+10; const tr = projection.translate(); projection.translate([tr[0] + marginMM, tr[1] + marginMM]); // ISO3 TEST PAYS const selectedISO = config.country.iso; // SVG const svg = d3.create("svg") .attr("width", widthMM) .attr("height", heightMM) .attr("viewBox", [0, 0, widthMM, heightMM]) .attr( "style", "max-width:100%; height:auto; display:block; cursor: grab;" ) .style("background", "#f5f5f5"); const zoomLayer = svg.append("g") .attr("class", "zoom-layer"); // FLOTTE zoomLayer.append("rect") .attr("class", "ocean") .attr("x", 0) .attr("y", 0) .attr("width", widthMM) .attr("height", heightMM) .attr("fill", "#f5f5f5"); // #d9edf2 #eef6f8 #dceff7 // FOND PAYS zoomLayer.append("g") .attr("class", "bg-countries") .selectAll("path") .data(worldun.features, d => d.properties.iso3) .join("path") .attr("d", pathGen) .attr("fill", "white") .attr("stroke", "#414141") .attr("stroke-width", .15); // COUCHE ICF MONDE const initByIso = new Map( df .filter(d => d.year === 1950) .map(d => [d.ISO3, d.icf]) ); const overlayPaths = zoomLayer.append("g") .attr("class", "overlay-countries") .selectAll("path") .data(worldun.features, d => d.properties.iso3) .join("path") .attr("d", pathGen) .attr("fill", d => config.colors.world(initByIso.get(d.properties.iso3))) .attr("stroke", "#414141") .attr("stroke-width", .15) .attr("pointer-events", "none"); // COUCHE PAYS SELECTIONNE const selectedPaths = zoomLayer.append("g") .attr("class", "selected-country") .selectAll("path") .data( worldun.features.filter( d => d.properties.iso3 === selectedISO ) ) .join("path") .attr("d", pathGen) .attr("fill", d => config.colors.selected(initByIso.get(d.properties.iso3))) .attr("stroke-width", config.country.strokeWidth) .attr("stroke", d => { const icf = initByIso.get(d.properties.iso3); return icf >= 2.1 ? config.country.strokeHigh : config.country.stroke; } ) .attr("pointer-events", "none"); // ZOOM const zoomBehavior = d3.zoom() .scaleExtent([1, 5]) .translateExtent([[0, 0], [widthMM, heightMM]]) .on("start", () => svg.style("cursor", "grabbing")) .on("end", () => svg.style("cursor", "grab")) .on("zoom", (event) => { zoomLayer.attr("transform", event.transform); }); svg .call(zoomBehavior) .on("dblclick.zoom", null) .on("dblclick", () => { svg.transition() .duration(400) .call( zoomBehavior.transform, d3.zoomIdentity ); }); const container = d3.create("div") .style("position", "relative") .style("width", `${widthMM}px`); container.node().zoomLayer = zoomLayer; container.node().pathGen = pathGen; //container.node().heightMM = heightMM; container.node().appendChild(svg.node()); // références update container.node().overlaySelection = overlayPaths; container.node().selectedSelection = selectedPaths; container.node().colorFor = config.colors.world; container.node().colorSelectedFor = config.colors.selected; container.node().widthMM = widthMM; container.node().zoomToCountry = function(iso){ //zoom sur pays lorsque sélection const feature = worldun.features.find( d => d.properties.iso3 === iso ); if(!feature) return; const [[x0,y0],[x1,y1]] = pathGen.bounds(feature); const dx = x1 - x0; const dy = y1 - y0; const cx = (x0 + x1) / 2; const cy = (y0 + y1) / 2; // niveau de zoom modéré : pays + voisins const scale = Math.min( 3, Math.max( 1.5, 0.8 / Math.max(dx / widthMM, dy / heightMM) )); const transform = d3.zoomIdentity .translate( widthMM / 2 - scale * cx, heightMM / 2 - scale * cy ) .scale(scale); svg .transition() .duration(700) .call( zoomBehavior.transform, transform ); }; container.node().svg = svg; container.node().zoomBehavior = zoomBehavior; return container.node(); }35:T4ad,minimapUpdate = { const container = minimap; const svg = container.svg; const zoomBehavior = container.zoomBehavior; if (container.lastCountry !== config.country.iso) { container.zoomToCountry(config.country.iso); container.lastCountry = config.country.iso;} const overlay = container.overlaySelection; const selected = container.selectedSelection; const duration = rWidth > 500 ? 350 : 150; const byIso = new Map(dfAnn.map(d => [d.ISO3, d])); if (!config.country.follow) { svg.transition() .duration(duration) .call( zoomBehavior.transform, d3.zoomIdentity ); } // Mise à jour monde (gris) overlay .transition() .duration(duration) .ease(d3.easeLinear) .attr("fill", d => container.colorFor(byIso.get(d.properties.iso3)?.icf)); // Mise à jour pays sélectionné selected .transition() .duration(duration) .style("opacity", config.country.follow ? 1 : 0) .ease(d3.easeLinear) .attr("fill", d => container.colorSelectedFor(byIso.get(d.properties.iso3)?.icf)) .attr("stroke", d => byIso.get(d.properties.iso3)?.icf >= 2.1 ? config.country.strokeHigh : config.country.stroke ); return container; }36:Tb88,icfRamp = { const widthRamp = minimap.widthMM; const heightRamp = 50; const margin = { top: 5, right: 5, bottom: 0, left: 5 }; const svg = d3.create("svg") .attr("width", widthRamp) .attr("height", heightRamp); // échelle horizontale const x = d3.scaleLinear() .domain([0.5, 9]) .range([ margin.left, widthRamp - margin.right - ( width<400 ? 40 : width <= 600 ? 60 : 0) ]); // pays courant const current = df.find( d => d.ISO3 === config.country.iso ); // Fonction pour rampe avec couleurs fill carte et cercles dans plot function drawRamp(y, colorFunction) { const n = 180; const min = 0.5; const max = 9; for (let i = 0; i < n; i++) { const v0 = min + i * (max - min) / n; const v1 = min + (i + 1) * (max - min) / n; svg.append("rect") .attr("x", x(v0)) .attr("y", y) .attr("width", x(v1) - x(v0) + 0.4) .attr("height", 12) .attr("fill", colorFunction(v0)); } // contour svg.append("rect") .attr("x", x(0)) .attr("x", x(0.5)) .attr("width", x(9) - x(0.5)) .attr("y", y) .attr("height", 12) .attr("fill", "none") .attr("stroke", "#414141") .attr("stroke-width", 0.1); // repère 2.1 svg.append("line") .attr("x1", x(2.1)) .attr("x2", x(2.1)) .attr("y1", y) .attr("y2", y + 12) .attr("stroke", "#414141") .attr("stroke-width", 1); } let countryTick = null; // Ramp pays sélectionné (au-dessus) if (choixPays === true && current) { drawRamp(5, config.colors.selected); countryTick = svg.append("line") .attr("class", "country-ramp-tick") .attr("x1", x(current.icf)) .attr("x2", x(current.icf)) .attr("y1", 5) .attr("y2", 17) .attr( "stroke", current.icf >= 2.1 ? config.country.strokeHigh : config.country.stroke ) .attr("stroke-width", 2); } // Rampe monde (en-dessous) drawRamp(17, config.colors.world); // Axe const axis = d3.axisBottom(x) .tickValues([0.5,5, 9]) .tickSize(3) .tickFormat(d => d.toString().replace(".", ",")); const gAxis = svg.append("g") .attr("transform", "translate(0,29)") .call(axis); gAxis.selectAll(".tick text") .style("font-size", width <= 600 ? "9px" : "10px") gAxis.selectAll(".tick") .filter(d => d === 0.5) .select("text") .attr("dx", "4px"); gAxis.select(".tick:last-child text") .attr("text-anchor", "end") .attr("dx", width <= 600 ? "-0px" : "-0px"); gAxis.select(".domain").remove(); svg.append("text") .attr("x", x(2.1) + 4) // légèrement à droite de la barre .attr("y", 26) // centré sur la rampe grise .attr("fill", "#555") .style("font-family", "Poppins, sans-serif") .style("font-size", width <= 600 ? "9px" : "10px") .text("≥2,1"); svg.node().xScale = x; svg.node().countryTick = countryTick; return svg.node(); }37:T1276,cssInput = html` `38:Ta4b,function Scrubber2(values, { format = value => value, initial = 0, direction = 1, delay = null, autoplay = true, loop = true, loopDelay = null, alternate = false } = {}) { values = Array.from(values); const form = html``; let frame = null; let timer = null; let interval = null; function start() { form.b.textContent = "Pause"; if (delay === null) frame = requestAnimationFrame(tick); else interval = setInterval(tick, delay); } function stop() { form.b.textContent = "Play"; if (frame !== null) cancelAnimationFrame(frame), frame = null; if (timer !== null) clearTimeout(timer), timer = null; if (interval !== null) clearInterval(interval), interval = null; } function running() { return frame !== null || timer !== null || interval !== null; } function tick() { if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; if (loopDelay !== null) { if (frame !== null) cancelAnimationFrame(frame), frame = null; if (interval !== null) clearInterval(interval), interval = null; timer = setTimeout(() => (step(), start()), loopDelay); return; } } if (delay === null) frame = requestAnimationFrame(tick); step(); } function step() { form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && running()) stop(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (running()) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); Inputs.disposal(form).then(stop); return form; }39:[{"id":"2dd1e9b4934cc8964a6b9bda5bac633de97aa8680be6bb7421da6296f218cf402e8609d442fc79dc944288f7aa3580cfc959a4477a778d7d5d01bf5440890a6d","href":"https://static.observableusercontent.com/files/2dd1e9b4934cc8964a6b9bda5bac633de97aa8680be6bb7421da6296f218cf402e8609d442fc79dc944288f7aa3580cfc959a4477a778d7d5d01bf5440890a6d","name":"data(6).csv","type":"text/csv","lastModified":1784713857620.708,"size":1391110},{"id":"6cf6298624c0169017e102b439588aa9aa2e7ea39217204ace9e778010aa4276f86e8835cd9dd31a811a6ee0cbe39b7d2b8907d2ea88c090c39ace89bc85094b","href":"https://static.observableusercontent.com/files/6cf6298624c0169017e102b439588aa9aa2e7ea39217204ace9e778010aa4276f86e8835cd9dd31a811a6ee0cbe39b7d2b8907d2ea88c090c39ace89bc85094b","name":"worldun(1).json","type":"application/json","lastModified":1784887705019.323,"size":1117733},{"id":"0dd696175f755f6207a2f500408401291f042f1a382a6f05a23b4452097b3c51136007d98024db2e199b472685166ab8c7d706a5159b15ddfbc99d70e9b2981b","href":"https://static.observableusercontent.com/files/0dd696175f755f6207a2f500408401291f042f1a382a6f05a23b4452097b3c51136007d98024db2e199b472685166ab8c7d706a5159b15ddfbc99d70e9b2981b","name":"worldun.json","type":"application/json","lastModified":1785242972225.612,"size":149018},{"id":"ef5dde4f7407f228ba90f0405373556441272cf56ab87ad01634f295419cf560e104f1f3a537a342bba81daf299bb4b29d5cb379f0a284c0ae26ff6b171e285c","href":"https://static.observableusercontent.com/files/ef5dde4f7407f228ba90f0405373556441272cf56ab87ad01634f295419cf560e104f1f3a537a342bba81daf299bb4b29d5cb379f0a284c0ae26ff6b171e285c","name":"worldun(1)(1).json","type":"application/json","lastModified":1785242080724.058,"size":149021},{"id":"d81f7d29fa25b1afbcdd92751947f332098510cd403110ec8dfc4c02a33ced9868d25411053f5276a48dc86a3364839485c84ae39dd97fbd6bce1fb6fb3b1193","href":"https://static.observableusercontent.com/files/d81f7d29fa25b1afbcdd92751947f332098510cd403110ec8dfc4c02a33ced9868d25411053f5276a48dc86a3364839485c84ae39dd97fbd6bce1fb6fb3b1193","name":"worldun(1)(2).json","type":"application/json","lastModified":1785242142541.051,"size":443081},{"id":"ef5dde4f7407f228ba90f0405373556441272cf56ab87ad01634f295419cf560e104f1f3a537a342bba81daf299bb4b29d5cb379f0a284c0ae26ff6b171e285c","href":"https://static.observableusercontent.com/files/ef5dde4f7407f228ba90f0405373556441272cf56ab87ad01634f295419cf560e104f1f3a537a342bba81daf299bb4b29d5cb379f0a284c0ae26ff6b171e285c","name":"worldun(1)(1)@1.json","type":"application/json","lastModified":1785242623864.598,"size":149021},{"id":"ef5dde4f7407f228ba90f0405373556441272cf56ab87ad01634f295419cf560e104f1f3a537a342bba81daf299bb4b29d5cb379f0a284c0ae26ff6b171e285c","href":"https://static.observableusercontent.com/files/ef5dde4f7407f228ba90f0405373556441272cf56ab87ad01634f295419cf560e104f1f3a537a342bba81daf299bb4b29d5cb379f0a284c0ae26ff6b171e285c","name":"worldunLight.json","type":"application/json","lastModified":1785242751898.385,"size":149021},{"id":"d81f7d29fa25b1afbcdd92751947f332098510cd403110ec8dfc4c02a33ced9868d25411053f5276a48dc86a3364839485c84ae39dd97fbd6bce1fb6fb3b1193","href":"https://static.observableusercontent.com/files/d81f7d29fa25b1afbcdd92751947f332098510cd403110ec8dfc4c02a33ced9868d25411053f5276a48dc86a3364839485c84ae39dd97fbd6bce1fb6fb3b1193","name":"worldUN.json","type":"application/json","lastModified":1785242907600.342,"size":443081},{"id":"4e0b82b0d623c52f392db9e411932c1a48fa23e38b31c8e5ad47f0626b06b32ad79c2cdb8568e2f436f001ce2320480483faeff4a6ea418216fc8ac86ddc37d9","href":"https://static.observableusercontent.com/files/4e0b82b0d623c52f392db9e411932c1a48fa23e38b31c8e5ad47f0626b06b32ad79c2cdb8568e2f436f001ce2320480483faeff4a6ea418216fc8ac86ddc37d9","name":"data.csv","type":"text/csv","lastModified":1785305154705.018,"size":1499705},{"id":"83f6c64feb996aafc141b1af550d550558ad326ca13b6f133e523328d44e45da6eefd13b0ad324f1978e8515c73fde858768b22a7d3c48ddc34acc814fbab06b","href":"https://static.observableusercontent.com/files/83f6c64feb996aafc141b1af550d550558ad326ca13b6f133e523328d44e45da6eefd13b0ad324f1978e8515c73fde858768b22a7d3c48ddc34acc814fbab06b","name":"graphdec.gif.webp","type":"image/webp","lastModified":1785302947184.586,"size":11264}] 2c:{"id":"c4e008760a410445","slug":null,"title":"D3.js - Répartition de la population mondiale selon la fécondité FR (last version)","thumbnail":"5fb8c976fcd59c06315469ad027b910fe3aeea392a4e888f36bcb5418e0ec096","access_level":"public","create_time":"$D2026-07-22T09:50:02.328Z","update_time":"$D2026-09-23T17:05:14.677Z","view_time":null,"first_public_time":"$D2026-07-24T10:04:00.610Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026"},"version":2244,"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":1,"collection":{"id":"bf1cb51cfbf62681","slug":"fecondite-et-population-mondiale","title":"fécondité et population mondiale","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"type":"notebook","body":{"titling":"auto","title":"D3.js - Répartition de la population mondiale selon la fécondité FR (last version)","cells":[{"id":0,"value":"# D3.js - Répartition de la population mondiale selon la fécondité FR (last version)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1263,"value":"html`Graphique d'origine

${graphdecGif}

\n source: Article population et sociétés`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2122,"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":193,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#522673\", //mauve\n \"#0042eb\", //bleu\n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#222330\", //black\n \"#d1d1d1\" //gris\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"yearCaption = new Date().getFullYear()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"data = FileAttachment(\"data.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"df = data.map(d=>({\npays: d.pays,\nyear: d.year,\nyear1950: d.year>=1950 ? 1950 : null,\nyear1980: d.year>=1980 ? 1980 : null, \nyear2003: d.year>=2003 ? 2003 : null, \npPop: d.pPop,\nicf: d.icf,\nISO3: d.ISO3,\nselectTip: d.selectTip \n \n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"filter= df.filter( d=> d.year===annee && d.icf<2.1 )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"### Inputs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1556,"value":"suivre pays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1926,"value":"viewof choixPays = toggle({label:\"Suivre un pays\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1554,"value":"select","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1156,"value":"viewof selectP = Inputs.select([\"France\", \"Italy\",\"Sweden\",\"Poland\",\"Japan\",\"China\",\"Republic of Korea\",\"Thailand\",\"India\",\"Iran (Islamic Republic of)\",\"Türkiye\",\"Tunisia\",\"Somalia\",\"Senegal\",\"Chad\",\"South Africa\", \"Saudi Arabia\", \"United States of America\", \"Mexico\", \"Cuba\", \"Brazil\", \"Colombia\" ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1662,"value":"form pour année et minicarte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1562,"value":"viewof form1 = Inputs.form(\n {\nannee: Scrubber2(numbers, {autoplay: false, loop:false, delay:width>600 ? 350 :200, initial: 2023}),\n//map: Inputs.radio([\"Non\", \"Oui\"], {label: \"Minicarte\", value: \"Non\"}) \nmap: toggle({label: \"Minicarte\"}) \n\n },\n {\ntemplate: (inputs) => htl.html`\n

\n ${inputs.annee}\n

\n ${inputs.map}\n

`\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1950,"value":"//viewof form1.outerHTML","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1613,"value":"// Alias annee \nannee = {return form1.annee}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1637,"value":"map = {return form1.map}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2047,"value":"viewof enlarged = {\n // div plutôt que button : évite la coercion en string du \"value\" natif des