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(); }}