25:["$","title",null,{"children":"Le Réchauffement des températures en France | Jérémy Bon | Observable"}] 49:Ta5e,Depuis plus de 30 ans, le [**GIEC**](https://www.ipcc.ch/languages-2/francais/). (**G**roupe d'experts **I**ntergouvernemental sur l'**E**volution du **C**limat regroupant 198 pays) étudie l'évolution du climat ainsi que les causes et les effets qu'elle provoque. Il travaille également sur des solutions permettant de limiter l’ampleur du réchauffement et donc la gravité de ses impacts. Le but affiché est aussi de se préparer et d'anticiper ces changements. Ces recherches sont condensées dans des rapports faisant l'état des lieux des connaissances les plus avancées. Cette production scientifique sert de référence pour les négociations internationales sur le climat. Elle est aussi fondamentale pour alerter les décideurs et la société civile. En France, de nombreuses équipes de recherche travaillent et contribuent à ces rapports. 8 ans après le dernier rapport, le GIEC a sorti courant 2022 le [sixième rapport](https://www.ipcc.ch/report/ar6/wg2/downloads/report/IPCC_AR6_WGII_FullReport.pdf) dont voici le [résumé pour les décideurs](https://www.ipcc.ch/report/ar6/wg2/downloads/report/IPCC_AR6_WGII_SummaryForPolicymakers.pdf). L'outil le plus connu pour mesurer le réchauffement climatique est l'étude des températures. Les objectifs sont fixés par rapport au niveau préindustriel. Par exemple, les accords de Paris signés en 2015 entre 1,5 et 2 degrés. Selon les derniers engagements de la COP26 cet objectif ne sera malheureusement pas rempli. Il faudrait en effet baisser de 30% les émissions globales en gaz à effet de serre. L'objectif qui a été déterminé est lui de 7,5%. Depuis l'ère préindustrielle (1850-1900), la température globale du globe a déjà augmenté de 1,1 degré. Cela peu sembler peu à première vue. Mais c'est seulement des temprératures moyennes au niveau du globe. Chaque degré vient mettre à mal un équilibre climatique fragile sur notre planète et renforce l'apparition d'évènements climatique extrême. Voici quelques exemples des conséquences d'une augmentation de 2 degrés de la température mondiale: * La totalité des récifs coralliens risque de disparaître si le réchauffement atteint les 2 °C * En Suisse, 90 % glaciers pourraient disparaître avec un réchauffement de 2 °C * À chaque demi-degré supplémentaire, 10 millions d’habitants de plus confrontés à la montée des eaux * Vers une disparition de la banquise l’été en Arctique si la hausse des températures dépasse les 1,5 °C *"Il y a des lois de la Nature que nous ne devons pas briser"*, Hans-Otto Pörtner, scientifique et coprésident du Groupe de travail II du GIEC 4a:T6fd,Les deux premiers graphiques sont reliés tandis que les deux derniers sont indépendants. Le premier graphique est une carte de la France avec les anciennes régions. Il est possible de sélectionner une prédiction correspondant à l'un des scénarios de référence qui impactera aussi le graphique suivant. Pour le graphique suivant il est possible de sélectionner une région en cliquant sur la carte. La France est mise par défaut et il est possible d'y revenir en cliquant sur le bouton reset. Le graphique suivant affichera alors les données de la région sélectionnée. Le second graphique est en réalité double. Il faut sélectionner soit *Stripes* soit *Histrogramme*. Chaque bande de *Stripes* est coloriée selon une échelle qui va de bleu à rouge correspondant aux températures minimum et maximum dans la période observée (1901-2100 si un scénario est sélectionné 1901-2021 sinon). C'est la même chose dans l'histogramme à ceci près que la taille de la bande est proportionnelle à la différence entre la moyenne sur l'année et la moyenne des températures de la période 1901-2021. Pour les *Climate Spirals* chaque point correspond à l'écart entre la température d'un mois sur une année donnée par rapport à la moyenne des températures du même mois sur la période 1901-2021. Le dernier graphique représente l'évolution des températures moyennes en France selon les prédictions médianes de chaque scénarios. Il est possible de mettre en surbrillance les scénarios avec leurs prédictions à 10 et 90%(La médiane étant le plus probable, les scénarios sont également construits avec des intervalles de 10 à 90%. On aurait donc 90% de chance d'être en dessous de la valeur à 90% et 10% d'être en dessous de la valeur à 10% ).4b:T11d5,circle = { const years = data2.map(e => e.year); const minYear = Math.min(...years); const maxYear = Math.max(...years); const nbYear = maxYear - minYear + 1; const values = data2.map(e => e.T); const minValue = Math.min(...values); const maxValue = Math.max(...values); const months = [ 'Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec' ]; const angles = d3.range(0, 360, 360 / months.length).map(e => e - 360 / 4); const angleMonths = d3.zip(angles, months); const floorValue = Math.floor(minValue); const capValue = Math.floor(maxValue) + 1; const minDomain = floorValue; const maxDomain = capValue + 0.5; const shift = minDomain; const refCircles = [ { value: 0 - shift, text: '+0°C' }, { value: 1.5 - shift, text: '+1.5°C' }, { value: 2 - shift, text: '+2.0°C' } ]; // console.log(`minValue = ${minValue}, maxValue = ${maxValue}`); // console.log(`floorValue = ${floorValue}, capValue = ${capValue}`); // console.log(`minDomain = ${minDomain}, maxDomain = ${maxDomain}`); // console.log(`shift = ${shift}`); const dataFull = data2.map((d, i) => { return { angle: (i * 2 * Math.PI) / 12, radius: d.T - shift, year: d.year, month: d.month }; }); const width = 900, height = 800, radius = Math.min(width, height) / 2 - 30; const r = d3 .scaleLinear() .domain([minDomain - shift, maxDomain - shift]) .range([0, radius]); const line = d3 .radialLine() .angle(function(d) { return d.angle; }) .radius(function(d) { return r(d.radius); }); const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("display", "block"); const ref = svg .append('g') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); const gr = ref .append('g') .attr('class', 'r axis') .selectAll('g') .data(refCircles) .enter() .append('g'); gr.append('circle').attr('r', function(d) { return r(d.value); }); gr.append('text') .attr('y', function(d) { return -r(d.value) - 4; }) .attr('transform', 'rotate(0)') .style('text-anchor', 'middle') .text(function(d) { return d.text; }); const ga = ref .append('g') .attr('class', 'a axis') .selectAll('g') .data(angleMonths) .enter() .append('g') .attr('transform', function(d) { return 'rotate(' + d[0] + ')'; }); ga.append('line').attr('x2', radius); ga.append('text') .attr('x', radius + 6) .attr('dx', '.0em') .attr('dy', '.0em') .attr('transform', function(d) { return d[0] < 180 && d[0] > 0 ? 'rotate(-90 ' + (radius + 6) + ',0)' : 'rotate(90 ' + (radius + 6) + ',0)'; }) .style('text-anchor', 'middle') .style('font-size', 15) .text(function(d) { return d[1]; }); const arrPath = d3.range(nbYear).map(() => ref.append('path')); const dot = ref.append('circle'); const date = ref .append('text') .attr('dy', '.35em') .style('text-anchor', 'middle') .style('font-size', '35px'); const chunkData = function(data) { const dataLocal = data.slice(0); const chunkInit = dataLocal.splice(0, 12); const chunks = [chunkInit]; while (dataLocal.length) { let chunk = dataLocal.splice(0, 12); let lastChunk = chunks[chunks.length - 1]; let lastElt = lastChunk[lastChunk.length - 1]; chunk.unshift(lastElt); chunks.push(chunk); } return chunks; }; const chunkDataPad = function(data, nbArray) { let chunks = chunkData(data); for (let i in d3.range(nbArray - chunks.length)) chunks.push([]); return chunks; }; const updatePlot = function(n) { const data = dataFull.slice(0, +n + 1); const lineEnd = data[data.length - 1]; const point = d3.pointRadial(lineEnd.angle, r(lineEnd.radius)); const chunks = chunkDataPad(data, nbYear); for (const [i, path] of arrPath.entries()) { path .datum(chunks[i]) .attr('class', 'line') .attr('stroke', () => { return d3.rgb(d3.interpolateRdYlBu((nbYear-i) / nbYear)); }) .attr('d', line); } dot .attr('class', 'dot') .attr('cx', point[0]) .attr('cy', point[1]) .attr('r', 5) .attr('fill', 'black'); date.text(lineEnd.year); }; updatePlot(0); return Object.assign(svg.node(), { update: updatePlot }); }4c:T541,{ const svg = d3.select(DOM.svg(width, 40)); const margin = ({top: 20, right: 30, bottom: 30, left: 40}) yield svg.node(); // Rearrange legend produced by d3-svg-legend to align labels horizontally // next to swatches function rearrangeLegendCells(cells, horizontalGap=10, verticalGap=10, rightMargin=100) { let xPos = 0; let yPos = 0; let chartWidth = width - margin.left - margin.right - rightMargin; cells.forEach((el, i) => { if (i === 0) return; if (xPos < chartWidth) { const lastElWidth = cells[i-1].getBBox().width; xPos = xPos + lastElWidth + horizontalGap; } else { xPos = 0; const lastElHeight = cells[i-1].getBBox().height; yPos = lastElHeight + verticalGap; } el.setAttribute('transform', `translate(${xPos}, ${yPos})`); }); } // Create legend for the Line data const scaleLine = d3.scaleOrdinal() .domain(legendLabels .map(d => d.name) ) .range(legendLabels .map(d => d.color) ); const legendOrdinalLine = d3Legend.legendColor() .shapePadding(10) .labels(legendLabels.map(d => d.label)) .scale(scaleLine); const gLine = svg.append("g").call(legendOrdinalLine); const cellsLine = Array.from(gLine.node().querySelectorAll('.cell')); rearrangeLegendCells(cellsLine); }4d:T535,datahistpred={if (scen.label=="Reference"){return;} else if (scen.label=="SSP1-1.9"){return d3.csv("https://raw.githubusercontent.com/JeremyBon/France_Climate_Visuclass_project/main/data/ok_tas_timeseries_annual_cmip6_ssp119_ensemble_2015-2100_medianFRA%20(1).csv",d3.autoType)} else if (scen.label=="SSP1-2.6"){return d3.csv("https://raw.githubusercontent.com/JeremyBon/France_Climate_Visuclass_project/main/data/ok_tas_timeseries_annual_cmip6_ssp126_ensemble_2015-2100_medianFRA%20(1).csv",d3.autoType)} else if (scen.label=="SSP2-4.5"){return d3.csv("https://raw.githubusercontent.com/JeremyBon/France_Climate_Visuclass_project/main/data/ok_tas_timeseries_annual_cmip6_ssp245_ensemble_2015-2100_medianFRA%20(1).csv",d3.autoType)} else if (scen.label=="SSP3-7.0"){return d3.csv("https://raw.githubusercontent.com/JeremyBon/France_Climate_Visuclass_project/main/data/ok_tas_timeseries_annual_cmip6_ssp370_ensemble_2015-2100_medianFRA%20(1).csv",d3.autoType)} else if (scen.label=="SSP5-8.5"){return d3.csv("https://raw.githubusercontent.com/JeremyBon/France_Climate_Visuclass_project/main/data/ok_tas_timeseries_annual_cmip6_ssp585_ensemble_2015-2100_medianFRA%20(1).csv",d3.autoType)} }4e:T1256, carte= (fond,data)=>{ const dataf=data.filter(d=>d.Year==year) const height = 600; const projection = d3.geoConicConformal() .center([2.454071, 46.279229]) .scale(2800); const max = d3.max(data, function(d) { const values = Object.values(d).slice(1); // On récupère toutes les valeurs de l'objet sauf la première colonne (Year) return d3.max(values, function(v) { return parseFloat(v); }); // On retourne le maximum des valeurs, en les transformant en nombres flottants }); const min = d3.min(data, function(d) { const values = Object.values(d).slice(1); // On récupère toutes les valeurs de l'objet sauf la première colonne (Year) return d3.min(values, function(v) { return parseFloat(v); }); // On retourne le maximum des valeurs, en les transformant en nombres flottants }); var color = d3.scaleSequential() .interpolator(t=>d3.interpolateRdYlBu(1-t)) .domain([min,max]) ; for (var j = 0; j < fond.features.length; j++) { var region = fond.features[j].properties.nom // TODO // find permet d’eviter de faire une boucle sur toutes les donnees fond.features[j].properties.value = dataf[0][region]; } const tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "#ccc") .style("border-radius", "2px") .style("padding", "0.5em") .text("test"); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const g = svg.append("g"); const path = d3.geoPath().projection(projection); g.selectAll("path") .data(fond.features) .join("path") .attr("d", path) .style("stroke", "white") .style("fill", function (d) { //on prend la valeur recupere plus haut const value = d.properties.value; if (value) { return color(value); } else { // si pas de valeur alors en gris return "#ccc"; } }) .on('mouseover', function(e, d) { tooltip.style('visibility', 'visible'); tooltip.text(d.properties.nom + '/ T_mean (°C) : ' + d.properties.value) }) .on('mousemove', function(e, d) { tooltip.style("top", (e.pageY - 10) + "px") .style("left", (e.pageX + 10) + "px") }) .on('mouseout', function(e, d) { tooltip.style('visibility', 'hidden'); }) .on("click", function(e,d) { //window.open("https://www.google.com/search?q=" + d.properties.nom); mutable Reg= d.properties.nom }); // création de la légende const legendGroup = g.append("g") .attr("transform", "translate(20, 20)"); // création de la légende const legend = legendGroup.append("svg") .attr("class", "legend") .attr("width", 200) .attr("height", 40); // ajout du dégradé de couleur à la légende legend.append("defs") .append("linearGradient") .attr("id", "gradient") .selectAll("stop") .data(color.ticks().map((t, i, n) => ({ offset: `${(100 * i) / n.length}%`, color: color(t) }))) .enter().append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color) // ajout du rectangle avec le dégradé de couleur legend.append("rect") .attr("width", 200) .attr("height", 20) .style("fill", "url(#gradient)"); // ajout des valeurs min et max de température à la légende legend.append("text") .attr("class", "legend-text") .attr("x", 0) .attr("y", 35) .text(min+"°C"); legend.append("text") .attr("class", "legend-text") .attr("x", 135) .attr("y", 35) .text(max+"°C"); // Ajouter le titre svg.append("text") .attr("x", width /5*2) .attr("y", height-50) .attr("text-anchor", "middle") .text("Température en France observée (1901-2021) et prédite (2022-2100)") .style("font-size", 30 + "px") svg.append("text") .attr("x",100) .attr("y", height/2) .attr("text-anchor", "middle") .text(year) .style("font-size", 50 + "px") return svg.node(); }4f:Tb22,stripes= (data)=>{ const temp=data.map(d=>d[Reg]) const domain = d3.extent(temp) const data_year = data.map(d=>d["Year"]) const width = 400, height = 100, margin = {top: 20, right: 30, bottom: 30, left: 40}; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const boundedWidth = width -margin.left - margin.right const boundedHeight = height - margin.top -margin.bottom const mean=d3.mean(temp) const colorScale = d3 .scaleDiverging(t=>d3.interpolateRdYlBu(1-t)) .domain([domain[0], mean, domain[1]]) .clamp(true) var zipped = d3.zip(temp,data_year); var dataf = d3.map(zipped, function(d) { return { T: d[0], year: d[1] }; }) const tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "#ccc") .style("border-radius", "2px") .style("padding", "0.5em") .text("test"); const len=temp.length svg.selectAll(".bar") .data(dataf) .enter().append("rect") .attr("class", "bar") .attr("x", (d, i)=> margin.left+i/len*(boundedWidth)) .attr("y", margin.top) .attr("width", 1/len*(boundedWidth)) .attr("height", boundedHeight) .attr("fill", "green") .style('stroke',"none") .attr("fill", d => colorScale(d.T)) .on('mouseover', function(e, d) { tooltip.style("visibility", "visible"); tooltip.text(d.year+": "+ d.T+"°C (Différence: "+formatter(d.T-mean)+"°C)") }) .on('mousemove', function(e, d) { tooltip.style("top", (e.pageY - 10) + "px") .style("left", (e.pageX + 10) + "px"); }) .on('mouseout', function(e, d) { tooltip.style('visibility', 'hidden'); }) const xScale = d3.scaleLinear() .domain(d3.extent(dataf.map(d=>d.year))) .range([margin.left, boundedWidth+margin.left]) /* Draw axis */ const xAxisGenerator = d3.axisBottom(xScale) .ticks(data.length / 10) .tickFormat(d3.format('.0f')) const xAxis = svg.append('g') .call(xAxisGenerator) .style('transform', `translateY(${boundedHeight + margin.top}px)`) .selectAll('.tick text') .style('text-anchor', 'end') .style("font-size", 5 + "px") const xAxisLabel = svg.append('text') .attr('x', boundedWidth / 2) .attr('y', boundedHeight + 50) .style("font-size", 10 + "px") .html('Année') .attr('class', 'axis-label') // Ajouter le titre svg.append("text") .attr("x", width /2) .attr("y", margin.top /5* 3) .attr("text-anchor", "middle") .text("Warming Stripes, E. Hawkins, 2018") .style("font-size", 15 + "px") return svg.node() }50:T1417,hist= (data)=>{ const temp=data.map(d=>d[Reg]) const domain = d3.extent(temp) const result = [] const data_year = data.map(d=>d["Year"]) const mean=d3.mean(data.filter(d=>d.Year<=2021).map(d=>d[Reg])) temp.map(d=>d-mean).forEach(d => { if (d < 0) { result.push([0,d]); } else { result.push([d, 0]); } }) const width = 400, height = 150, margin = {top: 20, right: 30, bottom: 10, left: 40}; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const boundedWidth = width -margin.left - margin.right const boundedHeight = height - margin.top -margin.bottom const colorScale = d3 .scaleDiverging(t=>d3.interpolateRdYlBu(1-t)) .domain([domain[0], mean , domain[1]]) .clamp(true) const yScale = d3.scaleLinear() .domain([(domain[0]-mean),(domain[1]-mean)]) .range([boundedHeight + margin.top, margin.top]) console.log(yScale(-1),yScale(0),yScale(1)) var zipped = d3.zip(result,data_year,temp); var dataf = d3.map(zipped, function(d) { return { T: d[2], year: d[1], dif: d[0] }; }) const tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "#ccc") .style("border-radius", "2px") .style("padding", "0.5em") .text("test"); const len=temp.length svg.selectAll(".bar") .data(dataf) .enter().append("rect") .attr("class", "bar") .attr("x", (d, i)=> margin.left+i/len*(boundedWidth)) .attr("y", d=>yScale(d.dif[0])) .attr("width", 1/len*(boundedWidth)) .attr("height", d=>yScale(d.dif[1])-yScale(d.dif[0])) .attr("fill", "green") .style('stroke',"none") .attr("fill", d => colorScale(d.T)) .on('mouseover', function(e, d) { tooltip.style("visibility", "visible"); tooltip.text(d.year+": "+formatter(d.T-mean)+"°C") }) .on('mousemove', function(e, d) { tooltip.style("top", (e.pageY - 10) + "px") .style("left", (e.pageX + 10) + "px"); }) .on('mouseout', function(e, d) { tooltip.style('visibility', 'hidden'); }) const xScale = d3.scaleLinear() .domain(d3.extent(dataf.map(d=>d.year))) .range([margin.left, boundedWidth+margin.left]) /* Draw axis */ const xAxisGenerator = d3.axisBottom(xScale) .ticks(data.length / 10) .tickFormat(d3.format('.0f')) .tickSize(0) const xAxis = svg.append('g') .call(xAxisGenerator) .call(g => g.select(".domain").remove()) .style('transform', `translateY(${boundedHeight + margin.top}px)`) .selectAll('.tick text') .style('text-anchor', 'end') .style("font-size", 5 + "px") .select(".domain") .attr("stroke-width", 0); const xAxisLabel = svg.append('text') .attr('x', -boundedWidth / 2) .attr('y', boundedHeight + 50) .style("font-size", 10 + "px") .html('Year') .attr('class', 'axis-label') // Ajouter l'axe Y const yAxisGenerator = d3.axisLeft(yScale) const yAxis = svg.append('g') .call(yAxisGenerator) .attr('transform', `translate(${margin.left}, 0)`) .selectAll('.tick text') .style("font-size", 5 + "px") // Ajouter le titre de l'axe Y svg.append("text") .attr("transform", "rotate(-90)") .attr("y", margin.left / 3) .attr("x", 0 - (boundedHeight / 3*2)) .attr("text-anchor", "middle") .text("Temperature (°C)") .style("font-size", 10 + "px") .attr('class', 'axis-label'); // Ajouter le titre svg.append("text") .attr("x", width /2) .attr("y", margin.top /5* 3) .attr("text-anchor", "middle") .text("Différence par rapport à la moyenne des Températures(1901-2021)") .style("font-size", 10 + "px") svg.append("line") .attr("x1", margin.left) .attr("x2", boundedWidth + margin.left) .attr("y1", yScale(0)) .attr("y2", yScale(0)) .attr("stroke", "black") .attr("stroke-width", 1); // Ajouter le titre de l'axe Y svg.append("text") .attr("y", yScale(0)) .attr("x",boundedWidth + margin.left+19) .attr("text-anchor", "middle") .text(formatter(mean)+'°C') .style("font-size", 7 + "px") .attr('class', 'axis-label'); // const yAxisGrid = d3.axisLeft(yScale) //.tickSize(-boundedWidth) //.tickFormat("") //const xAxisGrid = d3.axisBottom(xScale) //.tickSize(-boundedHeight) //.tickFormat("") //const yAxisGridLines = svg.append('g') //.attr('class', 'grid') //.call(yAxisGrid) //.attr('transform', `translate(${margin.left}, 0)`) //.selectAll('line') //.style('stroke', '#ccc') //.style('stroke-opacity', '0.2') // .style('shape-rendering', 'auto') //const xAxisGridLines = svg.append('g') //.attr('class', 'grid') // .call(xAxisGrid) //.attr('transform', `translate(0, ${boundedHeight+margin.top})`) //.selectAll('line') //.style('stroke', '#ccc') //.style('stroke-opacity', '0.2') //.style('shape-rendering', 'auto') return svg.node() }51:T17c9,timeline=(dataset)=>{ //Constantes const height=500 const width=800 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const margin = ({top: 20, right: 30, bottom: 30, left: 40}) const ymin=8 const ymax=20 const xmin=1995 const xmax=2100 //scales const x = d3.scaleTime() .domain([xmin, xmax]) .range([margin.left, width - margin.right]) const y = d3.scaleLinear() .domain([ymin, ymax]).nice() .range([height - margin.bottom, margin.top]) //axes const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0).tickFormat(d3.format("d"))) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickSizeInner(-width).tickPadding(10)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("font-size", "1rem") ) .call(g => g.selectAll(".tick line") .style("stroke", "#ddd") // couleur de gris plus claire .style("stroke-width", "1px")) // épaisseur de la ligne de grille en pixels) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); //lignes //couleurs const t = svg.transition() .duration(750); const colors = d3.scaleOrdinal() .domain(legendLabels.map(d => d.name)) .range(legendLabels.map(d => d.color)); const line = d3.line() //.defined(d => !isNaN(d)) .x((d) => x(d.date)) .y(d => y(d.value)); const area = d3.area() //.defined(d => !isNaN(d)) .x((d) => x(d.date)) .y0(d => y(d.min)) .y1(d => y(d.max)) const lines = svg.append("g") .attr("fill", "none") .attr("stroke-width", 4.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .selectAll("path") .data(line_data) .join( enter => enter.append('path') //.style("mix-blend-mode", "multiply") .attr("d", d => line(d)) .attr("stroke", d => colors(d[0].name)) .call(enter => enter.transition(t) .attr('opacity',d=> d[0].opa)), update => update .attr("stroke", d => colors(d[0].name)) .call(update => update.transition(t)), exit => exit .attr("stroke", 'red') .call(exit => exit.transition(t) .attr("opacity", 0) .remove()) ); const areas = svg.append("g") //// .attr("filter", "url(#constantOpacity)") .selectAll("path") .data(envelope_data) .join("path") .attr("d", d => area(d)) .attr("fill-opacity",d=>d[0].opa) .attr("fill", d => colors(d[0].name)) const avg = svg.append('g') .attr("stroke", "black") .selectAll("path") .data(envelope_data) .join("path") .attr("d", line([[1, 3], [2, 7], [3, 2], [5, 2]])); //tooltip const tooltip = d3.select(view).select(".tooltip"); tooltip .style('background', 'black') .style('color', 'white') .style('opacity', '0.8') .style("column-count","3") .style("column-fill","balance") .style("font-size","13px") svg .on('mouseover', function(e, d) { tooltip.style("visibility", "visible"); }) .on('mousemove', function(e,d) {moved(e,d)}) .on('mouseout', function(e, d) { tooltip.style('visibility', 'hidden'); }) function moved(e,d) { const xm = x.invert(d3.pointer(e)[0]); const bisectDate = d3.bisector(d => d.date).left; const i1 = bisectDate(data_by_date, xm, 1); if (i1 < 0) return ; const i0 = i1 - 1; if (i0 < 0) return ; const i = xm - data_by_date[i0].date > data_by_date[i1].date - xm ? i1 : i0; const value = data_by_date[i]; if (!value) return; tooltip //.style("left", `${x(value.date) - 20}px`) .html(getTooltip(value)) .style("visibility", "visible") if (value.date<2014) { svg.call(g=>g.selectAll(".circles").remove()); const points = svg.append("g") .attr("class", "circles") .attr("stroke-width", 2) .selectAll("circle") .data(line_data.slice(0,1)) .join("circle") .attr("cx", d=> x(d[i].date)) .attr("cy",d=>y( d[i].value)) .attr("r", 10) .attr("fill", d => colors(d[0].name)) .attr("opacity", 0.3); } else if (value.date==2014) { svg.call(g=>g.selectAll(".circles").remove()); const points = svg.append("g") .attr("class", "circles") .attr("stroke-width", 2) .selectAll("circle") .data(line_data.slice(1)) .join("circle") .attr("cx", d=> x(d[i-19].date)) .attr("cy",d=>y( d[i-19].value)) .attr("r", 10) .attr("fill", d => colors(d[0].name)) .attr("opacity", 0.3); const points2 = svg.append("g") .attr("class", "circles") .attr("stroke-width", 2) .selectAll("circle") .data(line_data.slice(0,1)) .join("circle") .attr("cx", d=> x(d[19].date)) .attr("cy",d=>y( d[19].value)) .attr("r", 10) .attr("fill", d => colors(d[0].name)) .attr("opacity", 0.3) } else{ // Ajout de cercles pour chaque point de données svg.call(g=>g.selectAll(".circles").remove()); const points = svg.append("g") .attr("class", "circles") .attr("stroke-width", 2) .selectAll("circle") .data(line_data.slice(1)) .join("circle") .attr("cx", d=> x(d[i-19].date)) .attr("cy",d=>y( d[i-19].value)) .attr("r", 10) .attr("fill", d => colors(d[0].name)) .attr("opacity", 0.3) } } //titre svg.append("text") .attr("x", width / 2) .attr("y", 18) .attr("text-anchor", "middle") .text( "Prédiction de la Température Moyenne en France (CMIP6)") .style("font-size", "24px"); //fin return svg.node() }52:T15d6,function transformDatabyDate(data) { // Tableau pour stocker les données transformées let transformedData = []; // Boucle sur chaque ligne de données d'entrée data.forEach(function(d) { // Boucle sur chaque mois if (+d.Category<2014) { let row = { date: +d.Category, series: [ { name: "Reference", min:+d["Historical 10-90th Percentile Range (low)"], max:+d["Historical 10-90th Percentile Range (high)"], avg: +d["Hist. Ref. Per.. 1995-2014"] }, { name: undefined, min:undefined, max:undefined, avg: undefined }, { name:undefined, min:undefined, max:undefined, avg: undefined }, { name: undefined, min:undefined, max:undefined, avg: undefined }, { name: undefined, min:undefined, max:undefined, avg: undefined }, { name: undefined, min:undefined, max:undefined, avg: undefined } ] }; transformedData.push(row); } else if (+d.Category<2015){ let row = { date: +d.Category, series: [ { name: "Reference", min:+d["Historical 10-90th Percentile Range (low)"], max:+d["Historical 10-90th Percentile Range (high)"], avg: +d["Hist. Ref. Per.. 1995-2014"] } , { name: "SSP1-1.9", min:+d["SSP1-1.9 10-90th Percentile Range (low)"], max:+d["SSP1-1.9 10-90th Percentile Range (high)"], avg: +d["SSP1-1.9"] }, { name: "SSP1-2.6", min:+d["SSP1-2.6 10-90th Percentile Range (low)"], max:+d["SSP1-2.6 10-90th Percentile Range (high)"], avg: +d["SSP1-2.6"] }, { name: "SSP2-4.5", min:+d["SSP2-4.5 10-90th Percentile Range (low)"], max:+d["SSP2-4.5 10-90th Percentile Range (high)"], avg: +d["SSP2-4.5"] }, { name: "SSP3-7.0", min:+d["SSP3-7.0 10-90th Percentile Range (low)"], max:+d["SSP3-7.0 10-90th Percentile Range (high)"], avg: +d["SSP3-7.0"] }, { name: "SSP5-8.5", min:+d["SSP5-8.5 10-90th Percentile Range (low)"], max:+d["SSP5-8.5 10-90th Percentile Range (high)"], avg: +d["SSP5-8.5"] } ] }; transformedData.push(row); } else{ let row = { date: +d.Category, series: [ { name: undefined, min:undefined, max:undefined, avg: undefined } , { name: "SSP1-1.9", min:+d["SSP1-1.9 10-90th Percentile Range (low)"], max:+d["SSP1-1.9 10-90th Percentile Range (high)"], avg: +d["SSP1-1.9"] }, { name: "SSP1-2.6", min:+d["SSP1-2.6 10-90th Percentile Range (low)"], max:+d["SSP1-2.6 10-90th Percentile Range (high)"], avg: +d["SSP1-2.6"] }, { name: "SSP2-4.5", min:+d["SSP2-4.5 10-90th Percentile Range (low)"], max:+d["SSP2-4.5 10-90th Percentile Range (high)"], avg: +d["SSP2-4.5"] }, { name: "SSP3-7.0", min:+d["SSP3-7.0 10-90th Percentile Range (low)"], max:+d["SSP3-7.0 10-90th Percentile Range (high)"], avg: +d["SSP3-7.0"] }, { name: "SSP5-8.5", min:+d["SSP5-8.5 10-90th Percentile Range (low)"], max:+d["SSP5-8.5 10-90th Percentile Range (high)"], avg: +d["SSP5-8.5"] } ] }; transformedData.push(row); } // Objet pour stocker les valeurs de l'année, du mois et de la valeur // Ajout de l'objet au tableau de données transformées }); return transformedData; }53:T6f4,selectionner=(data,filtre,scenario,opaba,opah)=>{ const change=0 function opadecider(scen){ if ( scenario.includes(scen)) { return opah; } else { return opaba; } } return [ data.map(series => { return { name: series.series[0].name, date: series.date, value: series.series[0][filtre] -change, opa: opadecider(series.series[0].name) } }).filter(d => d["name"] !== undefined), data.map(series => { return { name: series.series[1].name, date: series.date, value: series.series[1][filtre] -change, opa: opadecider(series.series[1].name) } } ).filter(d => d["name"] !== undefined), data.map(series => { return { name: series.series[2].name, date: series.date, value: series.series[2][filtre] -change, opa: opadecider(series.series[2].name) } } ).filter(d => d["name"] !== undefined), data.map(series => { return { name: series.series[3].name, date: series.date, value: series.series[3][filtre] -change, opa: opadecider(series.series[3].name) } } ).filter(d => d["name"] !== undefined), data.map(series => { return { name: series.series[4].name, date: series.date, value: series.series[4][filtre] -change, opa: opadecider(series.series[4].name) } } ).filter(d => d["name"] !== undefined), data.map(series => { return { name: series.series[5].name, date: series.date, value: series.series[5][filtre] -change, opa: opadecider(series.series[5].name) } } ).filter(d => d["name"] !== undefined) ] }54:[{"id":"78d95314d5a959d25d2d296aed78d3fdec5bc4d1d28ae5b10f5ee6dd5629dd43b6cff302c7816e2a815706bfd31d61dcefffecec70a4091cf20b1b5a2f086a7b","href":"https://static.observableusercontent.com/files/78d95314d5a959d25d2d296aed78d3fdec5bc4d1d28ae5b10f5ee6dd5629dd43b6cff302c7816e2a815706bfd31d61dcefffecec70a4091cf20b1b5a2f086a7b","name":"proj1.txt","type":"text/plain","lastModified":1676881014684.069,"size":1633875},{"id":"43d2a1212f12741d2ed6a092aa7dd2d3dec7185ff1c88e1709c16b89bc78b7bdb28a17a09ddf1d8d60368a8a94c24c7738ac097751ff65064773cca753077fdc","href":"https://static.observableusercontent.com/files/43d2a1212f12741d2ed6a092aa7dd2d3dec7185ff1c88e1709c16b89bc78b7bdb28a17a09ddf1d8d60368a8a94c24c7738ac097751ff65064773cca753077fdc","name":"proj3.txt","type":"text/plain","lastModified":1676886778342.813,"size":1633875},{"id":"6ba99de9950c7b60dc50688deadba6e5f89819b9ba974434f7f7342cfe9eb1c01fd0bd4834dc5e4d041ff8651a1a228f1c8d597a5eb3fb63aa94a5016a6320b2","href":"https://static.observableusercontent.com/files/6ba99de9950c7b60dc50688deadba6e5f89819b9ba974434f7f7342cfe9eb1c01fd0bd4834dc5e4d041ff8651a1a228f1c8d597a5eb3fb63aa94a5016a6320b2","name":"proj2.txt","type":"text/plain","lastModified":1676886778344.347,"size":1633875},{"id":"a28d62b3079fce11aa748427d38b8edba3b462885306e34340834a769358e6600a21764b3855b92dc87209aca805c6e5088afbb9ea866363922da6b9c51a7454","href":"https://static.observableusercontent.com/files/a28d62b3079fce11aa748427d38b8edba3b462885306e34340834a769358e6600a21764b3855b92dc87209aca805c6e5088afbb9ea866363922da6b9c51a7454","name":"countries.json","type":"application/json","lastModified":1676906708838.587,"size":278433},{"id":"c65b14795674a44759c7ee63357912a65c0a1d770481fae4e591fd5d8a59d01e2d3100c1750715a527a47bfecb26341a2d56a881fb83405e6500c8493c521abd","href":"https://static.observableusercontent.com/files/c65b14795674a44759c7ee63357912a65c0a1d770481fae4e591fd5d8a59d01e2d3100c1750715a527a47bfecb26341a2d56a881fb83405e6500c8493c521abd","name":"tas_timeseries_annual_cru_1901-2021_FRA (3)@2.csv","type":"text/csv","lastModified":1677939644264.545,"size":24245},{"id":"a9cb33549a6022d9657e2a5d7d73b63dcbe610fe63d18b8ad2537f0e66009afe7ec8e6e6adfecb10dd1d88d1eced0202a5b520b0a41fdd03ad46726ccdc779c3","href":"https://static.observableusercontent.com/files/a9cb33549a6022d9657e2a5d7d73b63dcbe610fe63d18b8ad2537f0e66009afe7ec8e6e6adfecb10dd1d88d1eced0202a5b520b0a41fdd03ad46726ccdc779c3","name":"333431239_733279991809553_990965208984013268_n@1.jpg","type":"image/jpeg","lastModified":1678054500555.461,"size":159170},{"id":"0e0fb9036165268c6ce575920b0bd19936ee37121fc515d99904800016b43b1618aad4b3295dc38c6dde9a356aa38f3ec4c647fc1c20998fe1923d28f3350e5c","href":"https://static.observableusercontent.com/files/0e0fb9036165268c6ce575920b0bd19936ee37121fc515d99904800016b43b1618aad4b3295dc38c6dde9a356aa38f3ec4c647fc1c20998fe1923d28f3350e5c","name":"333002667_170106835794605_6369151132992516022_n@1.jpg","type":"image/jpeg","lastModified":1678054500636.971,"size":159908},{"id":"a3c6f3b70edb02f72782fded91e21aa174bb3800ed49818376678f469d4e9fba1b8c30a217f2ef2e0ecd60c835f03aee8cb818a20067e66216c4c95b50a194f3","href":"https://static.observableusercontent.com/files/a3c6f3b70edb02f72782fded91e21aa174bb3800ed49818376678f469d4e9fba1b8c30a217f2ef2e0ecd60c835f03aee8cb818a20067e66216c4c95b50a194f3","name":"Capture d-écran 2023-03-13 205258.png","type":"image/png","lastModified":1678737213994.928,"size":160573}] 29:{"id":"c97420275547465d","slug":null,"title":"Le Réchauffement des températures en France","thumbnail":"52367c09afb232a258d7d1a668f05f1ca3de812c27d33f5e35d800eeac402038","access_level":"public","create_time":"$D2023-02-19T09:27:53.051Z","update_time":"$D2023-03-13T21:02:10.338Z","view_time":null,"first_public_time":"$D2023-02-19T09:27:53.051Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"36e90d6d40b7988c","login":"jeremybon","name":"Jérémy Bon","avatar_url":"https://avatars-next.observableusercontent.com/c1e0b5c45bc1ac7d74d0b0cd12293708badceb93fe9b302f208e8f8fd87b11c5","tier":"starter_2024","bio":"","following":false},"version":2543,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9526f71aea185f65","login":"jeremybon","name":"Jérémy Bon","avatar_url":"https://avatars-next.observableusercontent.com/c1e0b5c45bc1ac7d74d0b0cd12293708badceb93fe9b302f208e8f8fd87b11c5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"9526f71aea185f65","login":"jeremybon","name":"Jérémy Bon","avatar_url":"https://avatars-next.observableusercontent.com/c1e0b5c45bc1ac7d74d0b0cd12293708badceb93fe9b302f208e8f8fd87b11c5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"32e9c5ee9e1d94a8","slug":"temperature-alerte","title":"Temperature Alerte","owner":{"id":"36e90d6d40b7988c","login":"jeremybon","name":"Jérémy Bon"}},"type":"notebook","body":{"titling":"auto","title":"Le Réchauffement des températures en France","cells":[{"id":0,"value":"# Le Réchauffement des températures en France","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2468,"value":"## *Jérémy Bon*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2435,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2081,"value":"Les données proviennent du [World Bank Group Climate Change Knowledge Portal](https://climateknowledgeportal.worldbank.org/download-data) qui se source à diifférents endroits. \n\nLes données historiques proviennent de :\n\n*Harris, I., Osborn, T.J., P. et al. Version 4 of the CRU TS monthly high-resolution gridded\nmultivariate climate dataset. Sci Data 7, 109 (2020). https://doi.org/10.1038/s41597-020-0453-3*\n\net les données prédites du modèle construit pour le sixième rapport du GIEC (**CMIP6**) : \n\n*The Coupled Model Intercomparison Project, v. 6 – CMIP6: Eyring, V., Bony, S., Meehl,\nG. A., Senior, C. A., Stevens, B., Stouffer, R. J., and Taylor, K. E., 2016: Overview of the Coupled Model\nIntercomparison Project Phase 6 (CMIP6) experimental design and organization, Geosci. Model Dev., 9,\n1937-1958, DOI: https://doi.org/10.5194/gmd-9-1937-2016*\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2470,"value":"### Les différents scénarios du GIEC\n\n\nLe travail mené par les experts se base sur 5 scénarios, qui caractérisent chacun une trajectoire socio-économique de référence (appelés SSP pour « Shared Socioeconomic Pathways ») avec chacun leurs évolutions sociales, économiques, politiques et technologiques propres. Les augmentations de températures sont sur un horizon 2100 et sont calculés par rapport à la période de référence 1850-1900.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2476,"value":"FileAttachment(\"Capture d-écran 2023-03-13 205258.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2472,"value":"### Notice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2479,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":717,"value":"button = {\n const button = html``;\n button.onclick = () => mutable Reg= \"France\";\n \n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2534,"value":"d3.min(datahistfi.map(d=>d.Year))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2324,"value":"viewof year = slide({\n \n min: d3.min(datahistfi.map(d=>d.Year)), \n max: d3.max(datahistfi.map(d=>d.Year)), \n step: 1, \n value: 2000,\n title: \"Année de la carte\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2261,"value":"viewof scen = Inputs.radio(legendLabelsglobal , {value: legendLabelsglobal[0], \n label: html`Scénarios`,\n format: x => html`${x.name}`}\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"carte(fond,datahistfi)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"\"Region sélectionnée : \"+Reg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1068,"value":"viewof graph = Inputs.radio([\"Stripes\", \"Histogramme\"], {value:\"Stripes\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"leshist(datahistfi)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2488,"value":"## Climate Spirals","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1658,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1613,"value":"viewof dateselector = {\n const data = d3.range(data2.length);\n const format = e => {\n const d = data2[e];\n const m = new Date(`${d.year}-${d.month}`).toString().split(' ')[1];\n circle.update(e);\n return `${d.year} ${m}`;\n };\n const p = Player(data, {\n width: 500,\n autoplay: true,\n initial: 0,\n delay: 150,\n loop: false,\n format\n });\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2212,"value":"view = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2214,"value":"timeline(line_data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2218,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2221,"value":"viewof opachoice = Inputs.checkbox(legendLabels , {value: [\"red\"], \n label: html`Scénarios`,\n format: x => html`${x.name}`}\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2135,"value":"### Global","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":768,"value":"mutable Reg=\"France\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2265,"value":"legendLabelsglobal = [\n \n {\n name: \"Sans prédiction\",\n label: \"Reference\",\n color: \"#A9A9A9\",\n },\n\n {\n name: \"SSP1-1.9\",\n label: \"SSP1-1.9\",\n color: \"#00BFFF\"\n,\n },\n {\n name: \"SSP1-2.6\",\n label: \"SSP1-2.6\",\n color: \"#FFD133\",\n }, \n {\n name: \"SSP2-4.5\",\n label: \"SSP2-4.5\",\n color: \"#FFA420\",\n },\n \n {\n name: \"SSP3-7.0\",\n label: \"SSP3-7.0\",\n color: \"#63100F\",\n },\n \n {\n name: \"SSP5-8.5\",\n label: \"SSP5-8.5\",\n color: \"#2E1C08\",\n }\n]\n\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2276,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2129,"value":"### Graph 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":516,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":528,"value":"datahist=d3.csv(\"https://raw.githubusercontent.com/JeremyBon/France_Climate_Visuclass_project/main/data/ok_tas_timeseries_annual_cru_1901-2021_FRA.csv?token=GHSAT0AAAAAAB7CUYAXWDGWJDG5IA6XI3GSZAD44FQ\",d3.autoType)\n//.then((d) => {\n //d.forEach(e => {\n //\n //e.Year=parseYear(e.Year)\n //})\n //return d\n//})\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"fond=d3.json(\"https://raw.githubusercontent.com/gregoiredavid/france-geojson/master/regions-avant-redecoupage-2015.geojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2305,"value":"datahistfi={if (scen.label!==\"Reference\"){return datahist.concat(datahistpred.slice(7)) } else{return datahist}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2144,"value":"### Graph 2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1071,"value":"leshist = (data) => {\n if (graph==\"Stripes\") {return stripes(data)}\n else {return hist(data)}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2140,"value":"#### Graph 2.1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":807,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1122,"value":"formatter = d3.format(\".2f\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2146,"value":"#### Graph 2.2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1064,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2153,"value":"### Graph 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1748,"value":"data2=transformData(newrond)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1725,"value":"function transformData(data) {\n // Tableau pour stocker les données transformées\n let transformedData = [];\n\n // Boucle sur chaque ligne de données d'entrée\n data.forEach(function(d) {\n // Boucle sur chaque mois\n for (let i = 1; i <= 12; i++) {\n // Objet pour stocker les valeurs de l'année, du mois et de la valeur\n let row = {\n year: d.Year,\n month: i,\n T: d[Object.keys(d)[i]]\n };\n // Ajout de l'objet au tableau de données transformées\n transformedData.push(row);\n }\n });\n\n return transformedData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2071,"value":"newrond=round_data_maker(rond,means)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1347,"value":"rond=d3.csv(\"https://raw.githubusercontent.com/JeremyBon/France_Climate_Visuclass_project/main/data/ok_tas_timeseries_monthly_cru_1901-2021_FRA.csv\",d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1465,"value":"round_data_maker=function(data,mean){\n const rep=rond\n for (var i = 0; i < data.length; i++) {\n \n \n // find permet d’eviter de faire une boucle sur toutes les donnees\n \n \n \n \n \n \n rep[i].Year=data[i].Year\n \n rep[i].January=data[i].January-mean[0][1]\n rep[i].February=data[i].February-mean[1][1]\n rep[i].March=data[i].March-mean[2][1]\n rep[i].April=data[i].April-mean[3][1]\n rep[i].May=data[i].May-mean[4][1]\n rep[i].June=data[i].June-mean[5][1]\n rep[i].July=data[i].July-mean[6][1]\n rep[i].August=data[i].August-mean[7][1]\n rep[i].September=data[i].September-mean[8][1]\n rep[i].October=data[i].October-mean[9][1]\n rep[i].November=data[i].November-mean[10][1]\n rep[i].December=data[i].December-mean[11][1]\n }\n return rep\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2069,"value":"means = d3keys(rond[0],rond)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1368,"value":"function d3keys(maps,rond) {\n var keys = [];\n for (var key in maps) keys.push([key,d3.mean(d3.map(rond,d=>d[key]))]);\n keys.shift()\n return keys;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2224,"value":"### Graph 4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2226,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2256,"value":"function getTooltip(d) {\n \n const tooltipLabels = ({\n \"Reference\": \"Reference\",\n \"SSP1-1.9\": \"SSP1-1.9\",\n \"SSP1-2.6\":\"SSP1-2.6\",\n \"SSP2-4.5\":\"SSP2-4.5\",\n \"SSP3-7.0\":\"SSP3-7.0\",\n \"SSP5-8.5\":\"SSP5-8.5\"\n})\n\n const date = d.date;\n const panels = d.series.map((row) => {\n if (opachoice.map(d=>d.name).includes(row.name)) \n {\n return `\n \n

\n ${tooltipLabels[row.name]} :
\n \n 50thPercentile (or Median): ${format(row.avg)} °C
\n \n 10-90th Percentile Range: ${format(row.min)} to ${format(row.max)} °C \n `;\n }\n })\n return `\n ${date}

\n ${panels.join(\" \")}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2231,"value":"legendLabels = [\n \n {\n name: \"Reference\",\n label: \"Modèle de Référence\",\n color: \"#A9A9A9\",\n },\n \n {\n name: \"SSP1-1.9\",\n label: \"SSP1-1.9\",\n color: \"#00BFFF\"\n,\n },\n {\n name: \"SSP1-2.6\",\n label: \"SSP1-2.6\",\n color: \"#FFD133\",\n }, \n {\n name: \"SSP2-4.5\",\n label: \"SSP2-4.5\",\n color: \"#FFA420\",\n },\n \n {\n name: \"SSP3-7.0\",\n label: \"SSP3-7.0\",\n color: \"#63100F\",\n },\n \n {\n name: \"SSP5-8.5\",\n label: \"SSP5-8.5\",\n color: \"#2E1C08\",\n }\n]\n\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2229,"value":"futur=d3.csv(\"https://raw.githubusercontent.com/JeremyBon/France_Climate_Visuclass_project/main/data/ok_projected-mean-temperature_br__france%3B-(ref.-period_-1995-2014)%2C-multi-model-ensemble.xls.csv\", d3.auotype)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2235,"value":"data_by_date=transformDatabyDate(futur)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2238,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2241,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2244,"value":"line_data=selectionner(data_by_date,\"avg\",opachoice.map(d=>d.name),0.1,1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2247,"value":"area_data=selectionner(data_by_date,\"min\",opachoice.map(d=>d.name),0,0.1).concat(selectionner(data_by_date,\"max\",opachoice.map(d=>d.name),0.05,0.1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2249,"value":"envelope_data = {\n const Reference = area_data.filter((arr) => arr[0].name === 'Reference');\n const ssp19 = area_data.filter((arr) => arr[0].name === 'SSP1-1.9');\n const ssp26 = area_data.filter((arr) => arr[0].name === 'SSP1-2.6');\n const ssp45 = area_data.filter((arr) => arr[0].name === \"SSP2-4.5\");\n const ssp70 = area_data.filter((arr) => arr[0].name === \"SSP3-7.0\");\n const ssp85 = area_data.filter((arr) => arr[0].name === \"SSP5-8.5\");\n return [makeEnvelope(Reference), \n makeEnvelope(ssp19), \n makeEnvelope(ssp26), \n makeEnvelope(ssp45), \n makeEnvelope(ssp70), \n makeEnvelope( ssp85)];\n\n\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2253,"value":"makeEnvelope = function (data) {\n const [arr1, arr2] = data;\n const combinedArray = [];\n \n arr1.forEach((item1) => {\n arr2.forEach((item2) => {\n if (item1.date === item2.date) {\n let min;\n let max;\n if (item1.value <= item2.value) {\n min = item1.value;\n max = item2.value;\n } else {\n min = item2.value;\n max = item1.value;\n }\n combinedArray.push({\n name: item1.name,\n date: item1.date,\n min,\n max,\n opa: item1.opa\n });\n }\n });\n });\n \n return combinedArray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2259,"value":"format = d3.format(\"0.1f\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1617,"value":"import { Player } from \"@oscar6echo/player\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1686,"value":"import {style as faStyle} from \"@airbornemint/fontawesome\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1691,"value":"import {disposal} from \"@mbostock/disposal\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"import {table} from \"@tmcw/tables\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2022,"value":"import {caMapCoordinates} from \"@mukhtyar/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2019,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2025,"value":"import {text, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2028,"value":"d3Annotation = require(\"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1689,"value":"faStyle({ solid: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"netcdf = import(\"https://cdn.skypack.dev/netcdfjs@2.0.2?min\").then((d) => d.NetCDFReader)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"import {slider as slide} from \"@lorenries/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"import {rangeSlider} from '@mootari/range-slider@1781'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1999,"value":"d3Legend = require(\"d3-svg-legend\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1770,"value":"cssRadiatChart = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W54","stdlib":"1"}} 24:null