2f:T905,boxPlotGraph = htl.html `

${viewof choix} ${choixG}

* Nombre moyen d'enfants par femme
** 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).

Source : World Population Project, Nations Unies.

`30:Ted0,plotReg = { const w = width; const height = width>1000 ? 0.55*width : width>600 ? 0.65*width : 350; const margin = {top: width>600 ? 50 : 30, right: width>600 ? 60 : 40, bottom: width>600 ? 70 : 40, left: 45}; const fontSize = width > 600 ? "calc(12px + 1vw)" : "calc(12px + .1vw)"; 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, width - 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); // 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(-(width - 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 + (width - 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é*"); // Régions pour nuages svg.append("g") .attr("class","region-clouds") // .attr("opacity", choixPlotReg === "Nuages des régions" ? 1 : 0); svg.append("g") .attr("class","global-cloud"); // Régression toujours visible svg.append("path") .attr("class","regression") .attr("fill","none") .attr("stroke","#414141") .attr("stroke-width",2); // Pays svg.append("g") .attr("class","points") // .attr("opacity", choixPlotReg === "Cercles des pays" ? 1 : 0); // 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(); }31:T94e,{ //penser à virer tout ce qui est relatif au nuage, je n'étais pas convaincu const svg = plotReg; const xScale = svg.xScale; const yScale = svg.yScale; const colorDot = svg.colorDot; const tooltip = svg.tooltip; const t = d3.transition() .duration(800) .ease(d3.easeCubicOut); // DOT 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", "black") .attr("fill", d => colorDot(d.region)), update => update, exit => exit .transition(t) .attr("r", 0) .remove() ) // Tout ce qui suit concerne enter + update .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); d3.select(svg) .select(".points") .interrupt() .transition() .duration(400) .attr("opacity", 1); d3.select(svg) .select(".region-clouds") .interrupt() .transition() .duration(400) .attr("opacity", 1); // 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); 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(".", ",")}`); //Gestion du mode d'affichage avec l'input cercle vs nuage d3.select(svg) .select(".points") .interrupt() .transition() .duration(400) .attr("opacity",1 ); d3.select(svg) .select(".region-clouds") .interrupt() .transition() .duration(400) .attr("opacity",0 ); }32:Teca,plotPays = { const w = width; const height = width>1000 ? 0.55*width : width>600 ? 0.65*width : 350; const margin = {top: width>600 ? 50 : 30, right: width>600 ? 70 : 40, bottom: width>600 ? 70 : 40, left: 45}; const fontSize = width > 600 ? "calc(12px + 1.3vw)" : "calc(12px + .1vw)"; 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, width - 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(-(width - 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 + (width - 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"); return svg.node(); }33:T2013,{ 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.transition() .duration(450) .ease(d3.easeCubicInOut); // 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, width > 900 ? 14 : width > 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", "black") .attr("stroke-opacity", 0.25) .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", width > 900 ? 16 : width > 600 ? 12 : 9 ) .attr("fill","white") .attr("stroke",d => colorDot(d.region)) .attr("stroke-width",2.5), 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", "white") .attr("stroke", d => colorDot(d.region)), 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") .style("left",event.clientX+10+"px") .style("top",event.clientY-10+"px") .html(` ${d.regionFr}
${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(); // Affichage de l'année courante (annee + courbe) const current = dfFilter2[0]; if (current) { const x0 = xScale(current.tmi); const y0 = yScale(current.icf); // Coordonnées const offsetX = width > 600 ? 25 : 15; const offsetY = width > 600 ? 1.15 : 0.8; const x1 = xScale(current.tmi + offsetX); const y1 = yScale(current.icf - offsetY); 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.5); g.append("text") .attr("class","year-text") .attr("font-size",14) .attr("font-weight","bold") .attr("font-family","Poppins, sans-serif"); return g; }, update => update ); d3.select(svg) .select(".year-link") .transition() .duration(Math.abs(annee2 - previousYear) <= 1 ? 350 : 0) .ease(d3.easeCubicOut) .attr("d", d3.line() .x(d=>d[0]) .y(d=>d[1]) .curve(d3.curveBumpX) ([ [x0,y0], [x0 + 30,y0 +20], [x1,y1] ]) ); d3.select(svg) .select(".year-text") .text(annee2) .transition() .duration(Math.abs(annee2 - previousYear) <= 1 ? 350 : 0) .ease(d3.easeCubicOut) .attr("x", x1 + 8) .attr("y", y1 + 5) .text(annee2); // 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 const xl = xScale(y1980.tmi1980 - 20); const yl = yScale(y1980.icf1980 + 0.75); 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.2); g.append("circle") .attr("class","year1980-point") .attr("r",r1980) .attr("fill","white") .attr("stroke","#414141") .attr("stroke-width",1); 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") .attr("font-size",13); 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); // courbe d3.select(svg) .select(".year1980-link") .attr("d", d3.line() .x(d=>d[0]) .y(d=>d[1]) .curve(d3.curveBumpX) ([ [xm,ym], [xm,ym], [xl+27,yl-10] ]) ); //annee d3.select(svg) .select(".year1980-text") .attr("x", xl-5) .attr("y", yl-5) .text("1980"); } else { d3.select(svg) .select(".year1980") .remove(); }} 34:Te3e, 35:[{"id":"146119709348ba35d7d602a7525359d662091ede518cc93191ac0042c2478cb1d129a38485f134ceb44054bdf257fc84867ebaa17d3a4121ae53e59e836b6d87","href":"https://static.observableusercontent.com/files/146119709348ba35d7d602a7525359d662091ede518cc93191ac0042c2478cb1d129a38485f134ceb44054bdf257fc84867ebaa17d3a4121ae53e59e836b6d87","name":"nov1.gif.jpg","type":"image/jpeg","lastModified":1786010965472.88,"size":106097},{"id":"a7b29dbcb563958130c0154f1f8c4a5a4e0f9cf0b2666dc43cadf6041138ec6ed5b2afac56e79a672a24de5da33f12e81fd769937b80355cf8c1b673332ddda6","href":"https://static.observableusercontent.com/files/a7b29dbcb563958130c0154f1f8c4a5a4e0f9cf0b2666dc43cadf6041138ec6ed5b2afac56e79a672a24de5da33f12e81fd769937b80355cf8c1b673332ddda6","name":"data.csv","type":"text/csv","lastModified":1786011271144.766,"size":397761}] 2d:{"title":"New2 - Transition démographique afrique subsaharienne - FR","cells":[{"id":0,"value":"# New2 - Transition démographique afrique subsaharienne - FR\n\n* Inspiré du graphique de D.Tabutin et B.Schoumaker dans population\n* Indice conjoncturel de fécondité et taux de mortalité infantile depuis 1950\n* Choix:\n * Groupe de pays avec droite de regression (dans la version finale transférée enlever les nuages, on garde ici pour un projet futur au cas où)\n * Suivi de la trajectoire d'un pays (à valider car contenu suppléménetaire, encore du polish)","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"html`Graphique d'origine\n

\n${graphOrigine}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"yearCaption = new Date().getFullYear()","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"## Display, Inputs et légende","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"choixG = choix===\"Tous les pays\" ?\nhtml`

${viewof annee} ${viewof region}

${plotReg}` \n: html`

${viewof annee2} ${viewof region} ${viewof selectPays}

${plotPays}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"#### graph tous pays","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"viewof annee = Scrubber(numbers, {autoplay: false, loop:false, delay:200, \n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof choix = Inputs.radio([\"Tous les pays\", \"Un pays\"], {value: \"Tous les pays\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"viewof region = legend(domain,range, {shape: \"line\", swatchWidth:30,})","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"#### graph un pays","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"viewof selectPays = Inputs.select(domainPays, {label: \"Pays :\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"viewof annee2 = Scrubber(numbers, {autoplay: false, loop:false, delay:200,\n value: 1950\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#522673\", //mauve\n \"#074dff\", //bleu\n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#222330\", //black\n \"#d1d1d1\" //gris\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"data1 = FileAttachment(\"data.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":47,"value":"domain = [... new Set(data.map(d=> d.region))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"range = [pal100[0],\"#5182ff\",pal100[4],pal100[5]]","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"numbers = Array.from({length: 74}, (_, i) => i+1950)","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"df= data.filter(d=> d.year===annee && region.includes(d.region))","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"reg = linearRegression(df, d => d.tmi, d => d.icf)","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"anneeR2 = html`${annee}
R² = ${reg.r2.toFixed(3)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"## Graphique 1 : tous les pays + lm","pinned":true,"hidden":false,"mode":"md"},{"id":84,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"## Suivi de la trajectoire d'un pays","pinned":false,"hidden":false,"mode":"md"},{"id":100,"value":"domainPays = [...new Set(df.map(d=>d.pays))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"dfFilter1 = data.filter(d=> d.year d.year===annee2 && selectPays===d.pays)","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"dfFilterYear = data.filter(d=> d.year===annee2 && selectPays===d.pays)","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"### Fonctions & input","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"import {legend, cssLegend, toggle, cssToggle} from \"@wsthevenin/mtinput\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"cssLegend","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"graphOrigine = FileAttachment(\"nov1.gif.jpg\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":22,"value":"$34","pinned":false,"hidden":false,"mode":"html"}],"files":"$W35","stdlib":"1","titling":"auto"}