meetup_7_nov

2c:null 2d:["$","title",null,{"children":"Observable: Créez et Publiez votre dataviz sur le web | Alain Ottenheimer | Observable"}] 32:T432,md`## Etape 1: Trouver des données * #### Jeu 1: Historique des températures dans les grandes villes d'Occitanie * #### Jeu 2: Evolution du taux de CO2 dans l'atmosphère

Retrouver les jeux de données sur le GitHub Toulouse-Dataviz et télécharger le fichier CO2_history.csv en local sur votre ordinateur. Dans l'onglet data, cliquer sur le fichier CO2_history.csv puis sur raw. le fichier s'affiche dans le navigateur. Faire un click droit et sélectionner "enregistrer sous...". `33:T52a,co2_chart3 ={ var content = html`

` yield content // Avec c3.js, les données x et y doivent être sous forme de variables indépendantes // La première ligne doit contenir le header var years= []; var co2_rate = ["Evolution du taux de CO2 dans l'atmosphère"]; for (var i=0; i< data_co2_git.length; i++){ years.push(data_co2_git[i]['Date']), co2_rate.push(data_co2_git[i]['CO2']) } var chart = c3({ bindto :'#chart_co2_container2', title: { text: 'Evolution du taux de CO2 dans l\'atmosphère' }, size: { height: 400, width: 950 }, data:{ columns: [co2_rate], }, grid: { x: { show: true }, y: { show: true } }, axis :{ y: { label: 'Taux de CO2 en ppm', max: 400, min: 0 }, x:{ label: 'Date', max: 2100, min: 0, type: 'category', categories :years, tick: { multiline : false, values : ["0","500","1000","1500","1850","1950", "2050"], } } }, zoom: {enabled: true}, point: { show: false } }); d3.select('#chart_co2_container2').style('background-color', "#fff7f3") } 34:T121a,chart2 = { var content = html`

` yield content const svg= d3.select('#chart_co2_container') .append("svg") .attr("class", "svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //const svg = d3.select(DOM.svg(width, height)); //=============================== Axes ==================================== svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); //=============================== Ligne ==================================== svg.append("path") .datum(data_co2_git_filter) .attr("d", line) .attr("fill", "none") .style("stroke", "steelblue") .style("stroke-width", "2px"); //=============================== grille ===================================== svg.append("g") .attr("class", "grid") .attr("transform", `translate(${margin.left},0)`) .call(make_y_gridlines() .tickSize(-width) .tickFormat("") ); svg.append("g") .attr("class", "grid") .attr("transform", `translate(0,${height - margin.bottom})`) .call(make_x_gridlines() .tickSize(-height) .tickFormat("") ) d3.selectAll(".grid") .style("color","lightgrey") .style("stroke-opacity", 0,2); //======================== configuration du gradient de l'aire ================= svg.append("linearGradient") .attr("id", "area-gradient") .attr("gradientUnits", "userSpaceOnUse") .attr("x1", 0).attr("y1", y(270)) .attr("x2", 0).attr("y2", y(400)) .selectAll("stop") .data([ {offset: "0%", color: "white"}, {offset: "20%", color: "lightgray"}, {offset: "50%", color: "red"}, {offset: "75%", color: "black"}, {offset: "100%", color: "black"}, ]) .enter().append("stop") .attr("offset", function(d) { return d.offset; }) .attr("stop-color", function(d) { return d.color; }) .attr("stop-opacity", .8); //================================== aire ===================================== svg.append("path") .data([data_co2_git_filter]) .attr("class", "area") .attr("d", area); d3.selectAll(".area") .style("fill", "url(#area-gradient)") .style("stroke-width", "0px"); //=============================== cercles ==================================== svg.selectAll("dot") .data(data_co2_git_filter) .enter().append("circle") .style("fill", "lightgray") .attr("r",2) .attr("cx", function(d) { return x(d.Date); }) .attr("cy", function(d) { return y(d['CO2']); }) .append("title") .text(function (d) { return "date : "+d.Date+"\nco2 : "+d.CO2+" ppm" }) //======================== Titre axes ===================================== svg.append("text") .attr("y",10) .attr("x",35) .attr("font-size", 14) .style("text-anchor", "start") .text("CO2 en ppm"); svg.append("text") .attr("y",height-margin.bottom+20) .attr("x",width) .attr("font-size", 14) .style("text-anchor", "end") .text("Date"); //======================== Titre graphique ===================================== svg.append("text") .attr("y",height) .attr("x",width/2) .attr("font-size", 14) .style("text-anchor", "middle") .text("Evolution du taux de CO2 dans l'atmosphère"); //======================== Commentaires ===================================== var texts = svg.append("g").selectAll("text").data(events).enter(); texts.append('text') .text(function(d){ return d.text}) .attr('class', 'barsEndlineText') .attr('text-anchor', 'end') .attr("x", function(d){ return x(d.x)}) .attr("y", function(d){ return y(d.an.CO2+d.em);}) .attr("font-size", 14) .attr("fill", function(d) {return color_text(d.an.Date)}) texts.append("line") .attr("x1", function(d){ return x(d.an.Date);}) .attr("y1", function(d){ return y(d.an.CO2);}) .attr("x2", function(d){ return x(d.x)}) .attr("y2", function(d){ return y(d.an.CO2);}) .attr("stroke-width", 1) //.attr("stroke", "black") .attr("stroke", function(d) {return color_text(d.an.Date)}) .attr("stroke-dasharray", "6") return svg; //return svg.node(); }35:T6a1,events = [ {x : 1975, em :0, an : data_co2_git_filter.find(d => d.Date ==1979), text :"En 1979, Haroun Tazieff déclarait que la production de CO2 produirait un effet de serre et éleverait la température de 2 ou 3 degrés"}, {x : 1975,em :0, an : data_co2_git_filter.find(d => d.Date ==1988), text :"En 1988, Le GIEC est créé pour fournir des études sur les changements climatiques et leurs répercussions potentielles."}, {x : 1975,em :0, an : data_co2_git_filter.find(d => d.Date ==1992), text :"En 1992, le sommet de Rio fixe des lignes d’action non contraignantes pour une meilleure gestion de la planète."}, {x : 1975,em :0, an : data_co2_git_filter.find(d => d.Date ==2006), text: "En 2006, Al Gore sort le film 'La vérité qui dérange'"}, {x : 1975,em :0, an : data_co2_git_filter.find(d => d.Date ==2002), text: "En 2002, le président français Jacques Chirac déclarait « Notre maison brûle et nous regardons ailleurs »"}, {x : 1975,em :0, an : data_co2_git_filter.find(d => d.Date ==2015), text :"En 2015 à Paris, 196 pays signent des accords non contraignants pour limiter la hausse de T° bien en dessous de 2 °C"}, {x : 1975,em :-1, an : data_co2_git_filter.find(d => d.Date ==2017), text: "En 2017, les états unis se retirent des accords de Paris."}, {x : 1975,em :1, an : data_co2_git_filter.find(d => d.Date ==2018), text :"En 2018, aucun pays n’est aligné sur les objectifs fixés."}, {x : 1968, em :0,an : data_co2_git_filter.find(d => d.Date ==1972), text :"En 1972, le rapport Meadow souligne les dangers pour la planète de la croissance économique et démographique"}] 36:T14ac,temp_chart = { var content = html`

`; yield content; var height = 1200; var margin = { top: 60, right: 30, bottom: 120, left: 40 }; //var width = Math.max(Math.min(window.innerWidth, 1000), 500) - margin.left - margin.right //var width = Math.max(Math.min(window.innerWidth, 1000), 500) - margin.left - margin.right var gridSizeDay = Math.floor(width / days.length) * 1.2; var gridSizeYear = Math.floor(width / days.length) * 4; var height = gridSizeYear * years.length; var maingroup = d3 .select('#chart_temp_container') .append("svg") .attr("class", "svg") .attr("width", 1600 + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // ====================================== LABEL YEAR ================================ var yearsLabels = maingroup .selectAll(".yearsLabel") .data(years) .enter() .append("text") .attr("font-size", 12) .text(function(d) { return d % 5 == 0 ? d : ""; }) .attr("x", 0) .attr("y", function(d, i) { return i * gridSizeYear; }) .attr("transform", "translate(-4," + gridSizeYear / 2 + ")") .style("text-anchor", "end"); // ====================================== LABEL MONTH ================================ var monthsLabels = maingroup .selectAll(".monthLabel") .data(days) .enter() .append("text") .attr("class", "textmonthLabel") .text(function(d) { return +d % 30 == 0 ? monthName(d) : ""; }) .attr("x", function(d, i) { return (i - 5) * gridSizeDay; }) .attr("font-size", 10) .attr("y", 0) .attr("transform", "translate(" + gridSizeDay / 2 + ", -6)") .style("text-anchor", "end"); var monthBar = maingroup .selectAll(".monthBar") .data([31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334, 365]) .enter() .append("line") .attr("x1", function(d) { return d * gridSizeDay; }) .attr("y1", 0) .attr("x2", function(d) { return d * gridSizeDay; }) .attr("y1", -10) .style("stroke", "blue") .style("stroke-opacity", 1) .style("fill", "blue"); //================================ TEXTE=========================================== maingroup .append("text") .attr("class", "credit") .attr("x", 0) .attr("y", gridSizeYear * (years.length + 1) + 15) .style("text-anchor", "start") .attr("font-size", 10) .text( "Basé sur les données de la NOAA (National Oceanic and Atmosphéric Administration - USA)" ); maingroup .append("text") .attr("class", "title") .attr("x", width / 2) .attr("y", -45) .style("text-anchor", "middle") .text( name + " - Températures journalières minimales de " + minDate + " à " + maxDate ); maingroup .append("text") .attr("class", "subtitle") .attr("x", width / 2) .attr("y", -25) .attr("font-size", 12) .style("text-anchor", "middle") .text("(" + data_temp_filter.length + " mesures)"); //================================ HEATMAP ======================================== var heatMap = maingroup .selectAll(".hour") .data(data_temp_filter) .enter() .append("rect") .attr("x", function(d) { return d.dayYear * gridSizeDay; }) .attr("y", function(d) { return (d.year - 1958) * gridSizeYear; }) .attr("width", gridSizeDay) .attr("height", gridSizeYear) .style("stroke", "none") .style("stroke-opacity", 0) .style("fill", function(d) { return colorScale(d.TMIN); }) .append("title") .text(function(d) { return "date : " + d.date + "\nTempérature : " + d.TMIN + " °C"; }); //==================================== LEGEND =========================================== var legendSize = 5; var legendMap = maingroup .selectAll(".legend") .data(d3.range(minScale, maxScale + 1, 1)) .enter() .append("rect") .attr("x", function(d) { return width / 2.5 + d * legendSize * gridSizeDay; }) .attr("y", gridSizeYear * (years.length + 1) + 50) .attr("width", gridSizeDay * legendSize) .attr("height", gridSizeYear * 2) .style("stroke", "none") .style("stroke-opacity", 0) .style("fill", function(d) { return colorScale(d); }); maingroup .append("text") .attr("class", "legendTitle") .attr("x", width / 2) .attr("y", gridSizeYear * years.length + 50) .attr("font-size", 14) .style("text-anchor", "middle") .text("Echelle des températures"); var legenLabels = maingroup .selectAll(".legendLabel") .data(d3.range(minScale, maxScale + 1, 1)) .enter() .append("text") .attr("font-size", 10) .text(function(d) { return d % 5 == 0 ? d : ""; }) .attr("x", function(d) { return ( width / 2.5 + legendSize * gridSizeDay + d * legendSize * gridSizeDay ); }) .attr("y", gridSizeYear * (years.length + 1) + 80) .attr("transform", "translate(-4," + gridSizeYear / 2 + ")") .attr("font-size", 10) .style("text-anchor", "middle"); return svg; }37:[] 30:{"id":"07fb2b74cce4ef01","slug":"observable-creez-et-publiez-votre-dataviz-sur-le-web","title":"Observable: Créez et Publiez votre dataviz sur le web","thumbnail":"a02a414aff96b8e70c7c5e42ca9e91c4fe4e326ef957d4bddf97f4f39d818841","access_level":"public","create_time":"$D2019-10-15T15:08:59.125Z","update_time":"$D2021-07-22T13:45:51.908Z","view_time":null,"first_public_time":"$D2019-11-12T14:17:48.091Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8abb31dbb05a1a94","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":"starter_2024"},"version":3192,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null}],"members":[{"type":"individual","id":"39f8227195038a1f","login":"aotten","name":"Alain Ottenheimer","avatar_url":"https://avatars-next.observableusercontent.com/c908270df8ca89015b1f236bb9cc9fb2d79a649dbedef18f6cf2290d288650c3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Observable: Créez et Publiez votre dataviz sur le web","cells":[{"id":0,"value":"md`# Observable: Créez et Publiez votre dataviz sur le web\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1685,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1714,"value":"md`## Etape 2: Charger les données locales dans le notebook observable`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof f= html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"data_co2 = d3.csvParse(await Files.text(f))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"md`## Etape 3: Créer une viz avec la librairie VEGA-LITE\n(voir meetup #24 et la [présentation](\"https://observablehq.com/@alainro/introduction-a-vega-lite\") d'Alain Roan sur Vega-Lite). \nC'est simple et rapide....`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1769,"value":"md`

a. Chargement de la librairie.