28:null 29:["$","title",null,{"children":"Graph espérance de vie dans 9 pays ocde FR (3719) | Marc Thevenin | Observable"}] 2e:Tb11,plot = Plot.plot({ marginTop: rWidth>600 ? 40 : 30, marginLeft: rWidth>600 ? 40 : 30, marginBottom: rWidth>500 ? 60 : 35, marginRight: rWidth>600 ? 10 :0, width: rWidth, height: rWidth>900 ? .6*rWidth : rWidth>600 ? 0.7*rWidth : 350, color: {legend: false, domain: ["France", "Allemagne", "Danemark", "Espagne", "Royaume-Uni", "Italie", "Japon", "Suède", "Etats-Unis"], range: range}, x: {tickFormat: "d", tickSize: width>600 ? 10 : 5, ticks: width>600 ? 7 : 3, label: "Année", labelArrow: false, grid: true, domain: [slider[0], slider[1]]}, y: {grid: true, domain: [70,90], label: "Nombre d'années", labelArrow: false, ticks:8}, fx: {label: null, axis: null, padding: paddingFx }, marks: [ Plot.line(filter, { fx: "sexe", x: "annee", y:"edv", z:"index", stroke:"#414141", strokeWidth:.2, curve:"catmull-rom"}), Plot.frame({strokeWidth:.5, stroke: "black"}), Plot.line(filter, {filter: d=> checkbox.includes(d.pays), fx: "sexe", x: "annee", y:"edv", stroke:"pays", curve: "catmull-rom", strokeWidth: d=> d.pays==="France" ? 1.5*strokeW : strokeW, channels: { pays: {value: "pays", label:""}, annee: {value: "annee", label:""}, edv: {value:"edv", label: ""}, flag: {value: "flag", label: ""}, }, tip: {format: {flag: true, pays: true, annee: true, edv: d=> `${d.toFixed(1).replace('.',',')} ans` ,fx: false, y: false, x:false, z: false, stroke: false, strokeWidth: false, annee: "d"}, render(index, scales, values, dimensions, context, next) { 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, strokeWidth:0 }, }), Plot.text(["Femmes"], {fx: ["Femmes"], x: sexPosition, y: 88.5, textAnchor: "middle", className:"label",lineAnchor: "bottom"}), Plot.text(["Hommes"], {fx: ["Hommes"], x: sexPosition, y: 88.5, textAnchor: "middle", className:"label",lineAnchor: "bottom" }), ] })2f:Td4f,boxPlot = htl.html `

${viewof rWidth}

${viewof slider}

${viewof checkbox} ${cssLegend}

${plot}

Source : The Human Mortality Database (HMD).

`30:T9a2, 31:[{"id":"1d5aa7d9d34152c3048a8d6c0d12ad53cbf372da59f687b39eea457aace8af9eee6f5bcfdc2c957cb262ffd6bbbb1ba401ad4a1a94af73dcf5be6896fa8cc7c9","href":"https://static.observableusercontent.com/files/1d5aa7d9d34152c3048a8d6c0d12ad53cbf372da59f687b39eea457aace8af9eee6f5bcfdc2c957cb262ffd6bbbb1ba401ad4a1a94af73dcf5be6896fa8cc7c9","name":"graph.csv","type":"text/csv","lastModified":1786983304300.982,"size":116158}] 2c:{"id":"5113e7bf5fd5b097","slug":null,"title":"Graph espérance de vie dans 9 pays ocde FR (3719)","thumbnail":"c940b5dfc0764dae9332f58f9ac8e0de56377b5bd42c7a1d406836af15cbd9ee","access_level":"public","create_time":"$D2025-08-07T08:11:58.198Z","update_time":"$D2026-09-18T20:53:37.627Z","view_time":null,"first_public_time":"$D2025-08-07T11:04:50.247Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin","avatar_url":"https://avatars-next.observableusercontent.com/6ae55bec6f9ba0bbe9597b60f19a08df8d2f5b06630eb6929919d0306a71b058","tier":"free_2026"},"version":676,"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":"3a9735b59b096842","slug":"comparaison-internationale-mortalite","title":"Comparaison internationale mortalité","owner":{"id":"2982f8baffd2d3ed","login":"mthevenin","name":"Marc Thevenin"}},"type":"notebook","body":{"titling":"auto","title":"Graph espérance de vie dans 9 pays ocde FR (3719)","cells":[{"id":0,"value":"# Graph espérance de vie dans 9 pays ocde FR (3719)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"yearCaption = new Date().getFullYear()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"df = FileAttachment(\"graph.csv\").csv({typed:true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"domain = [...new Set(df.map(d=>d.pays))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"range = [\n \"#0042eb\", //bleu\n \"#ff7aad\", //rose\n \"#d50a00\", //rouge dark\n \"#ff564e\", //rouge \n \"#5cd49e\", //vert\n \"#ffb322\", //jaune\n \"#ac79d3\", //mauve \n \"#678ef3\", // bleu clair\n \"#414141\", //grayL\n\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"maxYear = d3.max(df, d=> d.annee)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"sexPosition = Math.round((slider[0]+slider[1])/2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"##### Espérance de vie à la naissance en France et autres pays de l’OCDE de 1980 à 2024","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"title","database":"$undefined"},{"id":619,"value":"viewof checkbox = legend([\"France\", \"Allemagne\", \"Danemark\", \"Espagne\", \"Royaume-Uni\", \"Italie\", \"Japon\", \"Suède\", \"Etats-Unis\"],range, {shape:\"line\", subdomain: [\"France\", \"Etats-Unis\", \"Japon\", \"Danemark\"]}) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof slider = rangeSlider({\n min: 1980,\n max: maxYear,\n step: 1,\n value: [1980,maxYear],\n label: \"Choisir une période\",\n color: \"black\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"filter = df.filter(d => d.annee>=slider[0] && d.annee<=slider[1] )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"paddingFx = {\n let n;\n if (width>900) {return n=0.08}\n if (width>900) {return n=0.15} \n else {return n=0.18}\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"strokeW = rWidth>600 ? 3 : 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"## Fonctions & css","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"import {rangeSlider} from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$30","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"css","database":"$undefined"},{"id":613,"value":"import {legend, cssLegend} from \"@wsthevenin/mtinput\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"cssLegend","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"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"}],"files":"$W31","stdlib":"1"}} 2d:"$2c:body"