2f:T9db,plot4 = Plot.plot({ width, height: height, marginBottom: mBottom, marginTop: mTop, marginLeft: mLeft, color: {legend: false, domain: domain, range: range}, x: {tickFormat: "d", tickSize: width>500 ? 10 : 5, label: "Year", labelArrow: false, grid: true, domain: [slider[0], slider[1]], ticks: width>800 ? 5 : width>500 ?4 : 3}, y: {grid: true, domain: [minY,maxY+4], label: "Number of years", labelArrow: false, inset: 20, ticks: 5}, fx: {label: null, axis: null, padding: paddingFx }, marks: [ Plot.line(filter, { fx: "sexeFr", x: "annee", y:"n", z:"zoneEn", stroke:"#414141", strokeWidth:.2, curve:"catmull-rom"}), Plot.frame({strokeWidth:.5, stroke: "black"}), Plot.line(filter, {filter: d=> checkbox.includes(d.zoneEn), fx: "sexeFr", x: "annee", y:"n", stroke:"zoneEn", strokeWidth: strokeW, channels: { zone: {value: "zoneEn", label:""}, annee: {value: "annee", label:""}, edv: {value:"n", label: ""}, }, tip: {format: {annee: "d", zone: true, edv: d=> `${d.toFixed(1)} years` ,fx: false, y: false, x:false, z: false, stroke: false, strokeWidth: false, }, render(index, scales, values, dimensions, context, next) { // Filter and highlight the paths with the same *z* as the hovered point. const path = d3.select(context.ownerSVGElement).selectAll("[aria-label=line] path"); if (index.length) { const z = values.z[index[0]]; path.style("stroke", "#d1d1d1") //path.style("stroke-width", 2.9) .filter(([i]) => values.z[i] === z) .style("stroke", null) .raise(); } else path.style("stroke", null); // Render the tip. return next(index, scales, values, dimensions, context); }, fillOpacity: 1, stroke: "black", strokeWidth:1 }, }), Plot.text(["Women"], {fx: ["Femmes"], x: (slider[0]+slider[1])/2, y: maxY+3, textAnchor: "middle", className:"label"}), Plot.text(["Men"], {fx: ["Hommes"], x: (slider[0]+slider[1])/2, y: maxY+3, textAnchor: "middle", className:"label"}), ] })30:Tea4,boxPlot4 = htl.html `

${viewof checkbox} ${viewof slider}
${plot4}

Scope : Metropolitan France.

Source : Calculations by the author based on data from the French Human Mortality Database.

`31:T6a7,filterLegend = ( domain, range, subdomain = null ) => { const defaultChecked = subdomain === null ? domain : subdomain; const value = new Map( domain.map(d => [d, defaultChecked.includes(d)]) ); const _set = () => set( node, [...value].filter(d => d[1]).map(d => d[0]) ); const oninput = e => { value.set(e.target.id, e.target.checked); _set(); }; const selectAll = () => { domain.forEach(d => value.set(d, true)); node.querySelectorAll("input[type=checkbox]") .forEach(cb => cb.checked = true); _set(); }; const selectNone = () => { domain.forEach(d => value.set(d, false)); node.querySelectorAll("input[type=checkbox]") .forEach(cb => cb.checked = false); _set(); }; const node = htl.html`

${domain.map((d, i) => htl.html`

${d}

`)}

`; _set(); return node; }; 32:Taa4,33:[{"id":"aa5363ee8ea0013a9331fe5c98c5c55245ac550d74017e5b0be8d1028d235cdc8de951fdd68e7245e2fd7621f29fa06acd4a9df92e32bb37fc364b46dab5029e","href":"https://static.observableusercontent.com/files/aa5363ee8ea0013a9331fe5c98c5c55245ac550d74017e5b0be8d1028d235cdc8de951fdd68e7245e2fd7621f29fa06acd4a9df92e32bb37fc364b46dab5029e","name":"df@1.csv","type":"text/csv","lastModified":1780379761038.627,"size":18468},{"id":"5b1775973f4002466a3ffbd69a5473d07df4a424a52b7ec4350d4bf61d2967360828c2c6b8a7a8b1db96c08eb4f85d932e6028ac9497ca22a31d2f1d06b7681a","href":"https://static.observableusercontent.com/files/5b1775973f4002466a3ffbd69a5473d07df4a424a52b7ec4350d4bf61d2967360828c2c6b8a7a8b1db96c08eb4f85d932e6028ac9497ca22a31d2f1d06b7681a","name":"df.csv","type":"text/csv","lastModified":1780379707009.393,"size":15437}] 2d:{"title":"Espérance de vie EN (24020)","cells":[{"id":0,"value":"# Espérance de vie EN (24020)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"df = FileAttachment(\"df@1.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"pal100 = [\n \"#ff564e\", //rouge\n \"#ff7aad\", //rose\n \"#522673\", //mauve\n \"#0042eb\", //bleu\n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#4f4f4f\", //gray\n \"#ff362d\", //red dark\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"domain = [...new Set(df.map(d => d.zoneEn))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"range = [pal100[2],pal100[3],pal100[4]]","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"maxYear = d3.max(df, d=> d.annee)","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"viewof slider = rangeSlider({\n min: 1968,\n max: maxYear,\n step: 1,\n value: [1968,maxYear],\n label: \"Choisir une période\",\n color: \"black\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"sexPosition = Math.round((slider[0]+slider[1])/2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"viewof checkbox = filterLegend(domain, range, domain)","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"filter = df.filter(d => d.annee>=slider[0] && d.annee<=slider[1] )","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"minY = d3.min(filter,d=> d.n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"maxY = d3.max(filter,d=> d.n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"### Life expectancy at birth by sex and department type since 1968","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"* Données non disponibles pour les Dom.\nChamp : France hexagonale.\nSource : Calculs de l’autrice à partir des données de la French Human Mortality Database","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"height = {\nlet n; \n if (width>=1000) {return n =0.48*width} \n if (width>=600) {return n =0.55*width}\n if (width>=500) {return n =0.65*width} \n else {return n = 350} \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"mBottom = {\n let n;\n if (width>600) {return n=70} \n if (width>500) {return n=50} \n if (width>400) {return n=40} \n else {return n=40}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"mTop = {\n let n;\n if (width>=400) {return n=45} \n else {return n=20}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":" mLeft = {\n let n;\n if (width>=800) {return n=45}\n if (width>=600) {return n=40} \n if (width>=400) {return n=35} \n else {return n=25}\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"paddingFx = {\n let n;\n if (width>800) {return n=0.1}\n else {return n=0.18}\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"strokeW = {\nlet n; \n if (width>=1200) {return n =3} \n if (width>=700) {return n =2.5}\n if (width>=500) {return n =2} \n if (width>=400) {return n =1.5}\n // if (size>=400 & size<500) {return n = 1.5 }\n else {return n = 1.5} \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"### Fonctions","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {rangeSlider} from \"@mootari/range-slider\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"$32","pinned":true,"hidden":false,"mode":"html"}],"files":"$W33","stdlib":"1","titling":"auto"}