2f:Tceb,boxPlot2 = htl.html `

${viewof serie2} ${viewof slider2} ${viewof select2}

${graph2}

`30:T653,plot1a = Plot.plot({ width, height: width> 500 ? .60*width : 350, marginLeft:70, marginBottom:60, marginRight:30, x: {label:"Année", labelArrow:false, tickFormat:"d", domain: [slider[0], slider[1]], ticks: filter.length>10 ? 10 : filter.length, grid:true}, y: { label: "Population (en millions)", labelArrow:false, domain: [min1a-1,max1a+5], grid: true, ticks: 5, inset:10}, color: {scheme:"Reds"}, marks: [ () => htl.svg` `, Plot.ruleX([1982], {stroke:"#d1d1d1"}), Plot.ruleY([min1a-1], {stroke:"#222330"}), Plot.line(filter,{filter: d=>d.annee<1915, x: "annee", y: d=> d.pop/1000000, stroke: "#ffbbb8", strokeWidth: width>500 ? 5 : 1 }), Plot.line(filter,{filter: d=>d.annee>1919, x: "annee", y: d=> d.pop/1000000, stroke: d=> d.annee>=1982 ? pal100[0] : "#ffbbb8", strokeWidth: width>500 ? 5 : 1 }), Plot.areaY(filter,{filter: d=>d.annee<1915, x: "annee", y1: d=> min1a-1, y2 : d=> d.pop/1000000, strokeWidth: width>500 ? 5 : 1, fill: pal100[0], fillOpacity:.2 }), Plot.areaY(filter,{filter: d=>d.annee>1919, x: "annee", y1: d=> min1a-1, y2 : d=> d.pop/1000000, strokeWidth: width>500 ? 5 : 1, fill: pal100[0], fillOpacity: d=> d.annee<1982 ? 0.2 : 0.4 }), //Plot.areaY(df,{ x: "annee", y1:30, y2 : d=> d.pop>0 ? d.pop/1000000 : null, stroke: "black", fill: "red" }), ] })31:Taf3,plot1b = Plot.plot({ width, height: width> 500 ? .6*width : 350, marginLeft:70, marginBottom:60, x: {tickFormat:"d", // domain: [slider[0], slider[1]], //ticks: filter.length>10 ? 10 : filter.length ticks: [1901,1910,1920,1930,1940,1950, 1960, 1970, 1982, 1990, 2000, 2010,2020] }, y: {tickFormat: d=> d.toLocaleString(), domain: [min1b<0 ? min1b-1 : 0,max1b+1], grid: true, ticks:8}, //color: {scheme:"Rainbow"}, marks: [ Plot.ruleX([1982], {stroke:"#d1d1d1"}), // Plot.ruleX(filter, { x: "annee", y1:0, y2: "accrPop", // stroke: (d) => d.accrPop<0 ? pal100[0] : // d.accrPop>0 && d.accrPop<1 ? "#e3ebff" : // d.accrPop>=1 && d.accrPop<2 ? "#c8d7ff" : // d.accrPop>=2 && d.accrPop<3 ? "#acc4ff" : // d.accrPop>=3 && d.accrPop<4 ? "#91b0ff" : // d.accrPop>=4 && d.accrPop<5 ? "#759cff" : // d.accrPop>=6 && d.accrPop<7 ? "#5a88ff" : // d.accrPop>=7 && d.accrPop<8 ? "#3e75ff" : // d.accrPop>=8 && d.accrPop<9 ? "#2361ff" : pal100[3] , // strokeWidth: width>500 || filter.length<20 ? 2 : 1 }) , // Plot.dot(filter,{ x: "annee", y: "accrPop", fill: (d) => d.accrPop, // fill: (d) => d.accrPop<0 ? pal100[0] : // d.accrPop>0 && d.accrPop<1 ? "#e3ebff" : // d.accrPop>=1 && d.accrPop<2 ? "#c8d7ff" : // d.accrPop>=2 && d.accrPop<3 ? "#acc4ff" : // d.accrPop>=3 && d.accrPop<4 ? "#91b0ff" : // d.accrPop>=4 && d.accrPop<5 ? "#759cff" : // d.accrPop>=6 && d.accrPop<7 ? "#5a88ff" : // d.accrPop>=7 && d.accrPop<8 ? "#3e75ff" : // d.accrPop>=8 && d.accrPop<9 ? "#2361ff" : pal100[3] , // strokeWidth: width>500 || filter.length<20 ? 2 : 1, // stroke: "black", strokeWidth:.5, // r:width>500 ? 3 : 1.5}), Plot.barY(filter, { x: "annee", y: "accrPop", fill: (d) => d.annee>=1982 ? pal100[2] : "#d97db2" , stroke: "white", strokeWidth: width> 600 ? 2 : .5}) , Plot.ruleY([0], {stroke:"#222330"}), Plot.ruleY([0], {x1: serie1==="Depuis 1901 : France hexagonale puis France" ? 1913.5 : null, x2: serie1==="Depuis 1901 : France hexagonale puis France" ? 1919.5 : null, stroke: "white"}), Plot.ruleY([0], {x1: serie1==="Depuis 1901 : France hexagonale puis France" ? 1938.5 :null, x2: serie1==="Depuis 1901 : France hexagonale puis France" ? 1945.5 :null, stroke: "white"}), ] })32:Tcea,boxPlot1 = htl.html `

${viewof serie1} ${viewof slider} ${viewof select1}

${graph1}

`33:T492,plot2a = Plot.plot({ width, height: width> 500 ? .60*width : 350, marginLeft:120, marginBottom: 70, x: {tickFormat:"d", domain: [slider2[0], slider2[1]], grid: true, ticks: filter.length>10 ? 10 : filter.length}, y: {tickFormat: d=> d.toLocaleString(), domain: [min2a,max2a], grid: true, ticks:8}, marks: [ Plot.ruleX([1982], {stroke:"#d1d1d1"}), // naissance Plot.line(filter2,{ x: "annee", y: d=> d.naiss, stroke: "#ffa2c6", strokeWidth: width>500 ? 5 : 1 }), Plot.line(filter2,{ x: "annee", y: d=> d.naiss, stroke: d=> d.annee<1982 ? "#ffa2c6" : d.annee>1982 ? "#ff1c73" : "#ff1c73", strokeWidth: width>500 ? 5 : 1 }), Plot.line(filter2,{ x: "annee", y: d=> d.deces, stroke: "#91b0ff", strokeWidth: width>500 ? 5 : 1}), Plot.line(filter2,{ x: "annee", y: d=> d.deces, stroke: d=> d.annee>= 1982 ? pal100[3] :"#91b0ff" , strokeWidth: width>500 ? 5 : 1}), //Plot.areaY(df,{ x: "annee", y1:30, y2 : d=> d.pop>0 ? d.pop/1000000 : null, stroke: "black", fill: "red" }), ] })34:T6c5,function interval(range = [], options = {}) { const [min = 0, max = 1] = range; const { step = .001, label = null, value = [min, max], format = ([start, end]) => `${start} … ${end}`, color, width = 360, theme, __ns__ = randomScope(), } = options; const css = ` #${__ns__} { /*font: 13px/1.2 var(--sans-serif);*/ font-size: 13px; font-family: poppins, sans-serif; display: flex; align-items: baseline; flex-wrap: wrap; max-width: 100%; width: auto; } @media only screen and (min-width: 30em) { #${__ns__} { flex-wrap: nowrap; width: ${cssLength(width)}; } } #${__ns__} .label { width: 120px; padding: 5px 0 4px 0; margin-right: 6.5px; flex-shrink: 0; } #${__ns__} .form { display: flex; width: 100%; } #${__ns__} .range { flex-shrink: 1; width: 100%; } #${__ns__} .range-slider { width: 100%; } `; const $range = rangeInput({min, max, value: [value[0], value[1]], step, color, width: "100%", theme}); const $output = html``; const $view = html`

${label == null ? '' : html`

${label}`}

${$range}

${$output}

${html` 36:[{"id":"26f5eb8827e4fb0c209c0b6d2ba5777302cc1688ce1075a286f973a888bf2a1b83edc247148390d227d0e8f854bd37085f5cb594cab4d1559cd66839b497616f","href":"https://static.observableusercontent.com/files/26f5eb8827e4fb0c209c0b6d2ba5777302cc1688ce1075a286f973a888bf2a1b83edc247148390d227d0e8f854bd37085f5cb594cab4d1559cd66839b497616f","name":"accroissement population@1.csv","type":"text/csv","lastModified":1776247876780.482,"size":8122}] 2d:{"title":"Nouvelle proposition accroissement de la population (=> pour 2027)","cells":[{"id":0,"value":"# Nouvelle proposition accroissement de la population (=> pour 2027)","pinned":false,"hidden":false,"mode":"md"},{"id":362,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"currentTime = new Date()","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"yearCaption = currentTime.getFullYear()","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"pal100 = [\n \"#ff564e\", //rouge 0\n \"#ff7aad\", //rose 1\n \"#522673\", //mauve 2 \n \"#0042eb\", //bleu 3\n \"#5cd49e\", //vert 4 \n \"#ffb322\", //jaune 5\n \"#4f4f4f\", //gray 6\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"viewof slider = interval([minSerie1,2025],{\n min: minSerie1,\n max: 2025,\n step: 1,\n color: \"#ff362d\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":610,"value":"slider","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"df = FileAttachment(\"accroissement population@1.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"filter = df.filter(d=> slider[0]<=d.annee && slider[1]>=d.annee && d.pop!=null)","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"min1a = d3.min(filter, d=>d.pop/1000000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"max1a = d3.max(filter, d=>d.pop/1000000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"min1b = d3.min(filter, d=>d.accrPop)","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"max1b = d3.max(filter, d=>d.accrPop)","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"viewof serie1 = Inputs.radio([\"Depuis 1982 : France\", \"Depuis 1901 : France hexagonale puis France\"], { value: \"Depuis 1982 : France\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"minSerie1 = serie1 === \"Depuis 1982 : France\" ? 1982 : 1901","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"viewof select1 = Inputs.radio([\"Population\", \"Accroissement\"], { value: \"Population\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"graph1 = select1===\"Population\" ? plot1a : plot1b","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"min2Naiss = d3.min(filter2, d=> d.naiss)","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"min2Dec = d3.min(filter2, d=>d.deces)","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"min2a = d3.min([min2Dec,min2Naiss])","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"max2Naiss = d3.max(filter2, d=>d.naiss)","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"max2Dec = d3.max(filter2, d=>d.deces)","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"max2a = d3.max([max2Dec,max2Naiss])","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"viewof slider2 = interval([minSerie2,2025],{\n min: minSerie2,\n max: 2025,\n step: 1,\n color: \"#ff362d\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":211,"value":"filter2 = df.filter(d=> slider2[0]<=d.annee && slider2[1]>=d.annee)","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"min2b = d3.min(filter2, d=>d.naiss - d.deces)","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"max2b = d3.max(filter2, d=>d.naiss - d.deces)","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"graph2 = select2===\"Naissances et décès\" ? plot2a : select2===\"Solde naturel\" ? plot2b : plot2c","pinned":true,"hidden":false,"mode":"ojs"},{"id":399,"value":"naissances décès","pinned":false,"hidden":false,"mode":"md"},{"id":104,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"solde naturel","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"plot2b = Plot.plot({\nwidth,\n height: width> 500 ? .60*width : 350, \nmarginLeft:120,\nmarginBottom:70,\n \nx: {tickFormat:\"d\", domain: [slider2[0], slider2[1]], grid:true, ticks: filter.length>10 ? 10 : filter.length},\ny: {tickFormat: d=> d.toLocaleString(), domain: [min2b,max2b], grid: true, ticks:8}, \n\n\n \nmarks: [\nPlot.ruleX([1982], {stroke:\"#d1d1d1\"}),\nPlot.ruleY([0], {stroke:\"black\"}), \n \nPlot.line(filter2,{ x: \"annee\", y: d=> d.naiss - d.deces,\n stroke: \"#86dfb7\",\n strokeWidth: width>500 ? 5 : 1 }),\n\nPlot.line(filter2,{ x: \"annee\", y: d=> d.naiss - d.deces,\n stroke: d=> d.annee>= 1982 ? \"#30b479\" : \"#86dfb7\",\n strokeWidth: width>500 ? 5 : 1 }),\n\n \n//Plot.areaY(df,{ x: \"annee\", y1:30, y2 : d=> d.pop>0 ? d.pop/1000000 : null, stroke: \"black\", fill: \"red\" }),\n\n\n\n \n]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"min3 = d3.min(filter2, d=>d.sMig)","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"max3 = d3.max(filter2, d=>d.sMig)","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"solde migratoire","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"plot2c = Plot.plot({\n width,\n height: width> 500 ? .60*width : 350,\nmarginLeft:120,\nmarginBottom:70,\n\nx: {tickFormat:\"d\", domain: [slider2[0], slider2[1]], grid: true, ticks: filter.length>10 ? 10 : filter.length},\ny: {tickFormat: d=> d.toLocaleString(), domain: [min3,max3], grid: true, ticks:8}, \n\n\n \nmarks: [\n\n\n \nPlot.ruleX([1982], {stroke:\"#d1d1d1\"}),\nPlot.ruleY([0], {stroke:\"black\"}), \n \nPlot.line(filter2,{ x: \"annee\", y: d=> d.sMig,\n stroke: \"#ffd990\",\n strokeWidth: width>500 ? 5 : 1}),\n\nPlot.line(filter2,{ x: \"annee\", y: d=> d.sMig,\n stroke: d=> d.annee>= 1982 ? pal100[5] : \"#ffd990\",\n strokeWidth: width>500 ? 5 : 1}),\n \n\nPlot.ruleY([0], {x1:1913.5, x2:1919.5, stroke: \"white\", strokeWidth:5}), \nPlot.ruleY([0], {x1:1938.5, x2:1945.5, stroke: \"white\", strokeWidth:5}), \n \n \n\n//Plot.areaY(df,{ x: \"annee\", y1:30, y2 : d=> d.pop>0 ? d.pop/1000000 : null, stroke: \"black\", fill: \"red\" }),\n\n\n\n \n]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":459,"value":"viewof serie2 = Inputs.radio([\"Depuis 1982 : France\", \"Depuis 1901 : France hexagonale puis France\"], { value: \"Depuis 1982 : France\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"minSerie2 = serie2 === \"Depuis 1982 : France\" ? 1982 : 1901","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"viewof select2 = Inputs.radio([\"Naissances et décès\", \"Solde naturel\", \"Solde migratoire\"], { value: \"Naissances et décès\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"function randomScope(prefix = 'scope-') {\n return prefix + (performance.now() + Math.random()).toString(32).replace('.', '-');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"cssLength = v => v == null ? null : typeof v === 'number' ? `${v}px` : `${v}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"import {rangeInput} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"$35","pinned":true,"hidden":false,"mode":"html"}],"files":"$W36","stdlib":"1","titling":"auto"}