25:["$","title",null,{"children":"CO2 Emissions & Guilties | Vogelmann | Observable"}] 49:T421,--- ## Intro 🌎 The world is in a climate emergency, **“a code red for humanity”** according to the [UN Secretary General](https://press.un.org/en/2021/sgsm20847.doc.htm). The concentration of greenhouse gas (GHG) emissions in the atmosphere is wreaking havoc across the world and threatening lives, economies, health and food. The world is far from securing a global temperature rise to below 2°C as promised in the [Paris Agreement](https://unfccc.int/sites/default/files/english_paris_agreement.pdf). Many organizations are tracking every aspect of GHG emissions. [Our World In Data](https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions) has one of the most complete sets, with over 70 years worth of more than 50 indicators across 200 countries. An analysis of this data could uncover patterns, inform policy and be used to enlighten the general public. 📌 The **analytical goal** in this project is to **visualize the most polluting countries and their effects** on other cities/countries/regions and biodiversity of the world.4a:T5cd,--- ## Summary 🔍 Based on the visualized data, the main findings of this project are: - ☠**Human deaths**
CO2 emissions cost lives, both directly (deaths by pollution) and indirectly (climate change, disasters, sea level rise). - 🛢**Polluting countries**
China is the most polluting country in the world, and it's also a disproportionate outlier. Its emissions in the last 20 years have been almost as much as the total sum of the emissions of the next three most polluting countries (USA, India and Russia). - 📈**Your country**
CO2-related mortality cares about where you live: certain countries have more deaths related to pollution than others. - ⚖**Climate justice**
There is no climate justice: the most polluting countries do not suffer the consequences in a proportional way. - 🧳**Climate refugees**
We discoverd that there is no official definition of *Climate refugees*; however we can see that there is a large volume of displaced people due to climate-related causes. Disasters accounted for more than 50% of internal displacement in 2021. - 🦎**Biodiversity changes**
Our planet is suffering from an unprecedented loss in biodiversity, mainly in regions such as Africa and South America. - 🌊**Territory changes**
Even with strict CO2 emission reductions, some territories will be lost due to sea level rise. However, with responsible climate policies we still have enough time to save other endangered areas. 4b:T426,**About the context.** Last year 2022, our fossil energy emissions were 36.6 gigatonnes of CO2 (GtCO2) in 2022 (each gigatonne is one billion tons) and the emissions from land use change (crops, deforestation...) were 3, 9 gigatons. Emissions from fossil fuels are 10 times greater than those from land use and deforestation and we are seldom aware of the human lives lost due to these emissions. (Source: [La Vanguardia](https://www.lavanguardia.com/natural/20221111/8602603/pep-canadell-frenar-temperatura-debajo-meta-1-5-oc.html)) **About the data.** *Deathball viz* considers “Deaths from air pollution from fossil fuels” (up to 2015) from [Our World in Data](https://ourworldindata.org/grapher/pollution-deaths-from-fossil-fuels). To visualize the deaths until 2022, a linear interpolation is applied taking into account the number of deaths in 2015 and the mortality rate in 2015 vs 2022 from [UNESCO](https://data.un.org/Data.aspx?d=PopDiv&f=variableID%3A65). Considering these emissions, we ask ourselves, **how many deaths have emissions caused?**4c:T29f0,p5(sketch => { // Dimensiones del canvas: let canvas_width = 1000; let canvas_height = 1000; // Factor de reducción. Agruparemos los muertos de 1000 en 1000 porque los servidores de Observable corren dentro de un Commodore VIC20 y no aguanta dibujarlos todos. const rf = 1000; // Número de regiones. La última vez que miré el mapamundi había 6. const N_regions = 6; // Ahora toca calcular el número de muertos de cada continente. // La idea original era encadenar dos modelos: uno que relaciona Emisiones con temperatura, y otro que relaciona temperatura con número de muertos. Lamentablemente el modelo ha fracasado estrepitosamente (si comparamos los resultados con los datos de la UNESCO)... así que directamente vamos a usar los datos de la UNESCO. // PROBLEMA: Estamos en 2022, y los datos de muertos por emisiones de CO2 más recientes son de 2015-16. // SOLUCIÓN: Como la diferencia es de pocos años, utilizaremos una interpolación lineal teniendo en cuenta el índice de mortalidad en 2015 vs. 2022 y la cantidad de muertos que ha habido en 2015: // // muertos_2022 = ind_mortalidad_2022 * muertos_2015 / ind_mortalidad_2015 <--- (regla de tres de toda la vida) // // Debería ser una aproximación no muy alejada de la realidad, suficiente para este proyecto académico. Lógicamente, si esto fuera una tesis doctoral habría que buscar una aproximación más refinada... si decidiera hacer mi tesis sobre visualización de datos. // Calculamos los muertos para norteamérica: const NA_ind_2015 = base_mortality_rate_by_region.filter(d => d["Country or Area"] == "Northern America" & d["Year(s)"] == 2015)[0]["Value"]; const NA_ind_2022 = base_mortality_rate_by_region.filter(d => d["Country or Area"] == "Northern America" & d["Year(s)"] == 2022)[0]["Value"]; const NA_ded_2015 = deaths_by_pollution_2015_data.filter(d => d["Region"] == "North America")[0]["sum"] const NA_ded = Math.round(NA_ind_2022 * NA_ded_2015 / NA_ind_2015 / rf); // Calculamos los muertos de sudáfrica: const SA_ind_2015 = base_mortality_rate_by_region.filter(d => d["Country or Area"] == "South America" & d["Year(s)"] == 2015)[0]["Value"]; const SA_ind_2022 = base_mortality_rate_by_region.filter(d => d["Country or Area"] == "South America" & d["Year(s)"] == 2022)[0]["Value"]; const SA_ded_2015 = deaths_by_pollution_2015_data.filter(d => d["Region"] == "South America")[0]["sum"]; const SA_ded = Math.round(SA_ind_2022 * SA_ded_2015 / SA_ind_2015 / rf); // Calculamos los muertos de asia: const asia_ind_2015 = base_mortality_rate_by_region.filter(d => d["Country or Area"] == "Asia" & d["Year(s)"] == 2015)[0]["Value"]; const asia_ind_2022 = base_mortality_rate_by_region.filter(d => d["Country or Area"] == "Asia" & d["Year(s)"] == 2022)[0]["Value"]; const asia_ded_2015 = deaths_by_pollution_2015_data.filter(d => d["Region"] == "Asia")[0]["sum"]; const asia_ded = Math.round(asia_ind_2022 * asia_ded_2015 / asia_ind_2015 / rf); // Calculamos los muertos de africa: const africa_ind_2015 = base_mortality_rate_by_region.filter(d => d["Country or Area"] == "Africa" & d["Year(s)"] == 2015)[0]["Value"]; const africa_ind_2022 = base_mortality_rate_by_region.filter(d => d["Country or Area"] == "Africa" & d["Year(s)"] == 2022)[0]["Value"]; const africa_ded_2015 = deaths_by_pollution_2015_data.filter(d => d["Region"] == "Africa")[0]["sum"]; const africa_ded = Math.round(africa_ind_2022 * africa_ded_2015 / africa_ind_2015 / rf); // Calculamos los muertos en oceania: const oceania_ind_2015 = base_mortality_rate_by_region.filter(d => d["Country or Area"] == "Oceania" & d["Year(s)"] == 2015)[0]["Value"]; const oceania_ind_2022 = base_mortality_rate_by_region.filter(d => d["Country or Area"] == "Oceania" & d["Year(s)"] == 2022)[0]["Value"]; const oceania_ded_2015 = deaths_by_pollution_2015_data.filter(d => d["Region"] == "Oceania")[0]["sum"]; const oceania_ded = Math.round(oceania_ind_2022 * oceania_ded_2015 / oceania_ind_2015 / rf); // Calculamos los muertos en europa: const europe_ind_2015 = base_mortality_rate_by_region.filter(d => d["Country or Area"] == "Europe" & d["Year(s)"] == 2015)[0]["Value"]; const europe_ind_2022 = base_mortality_rate_by_region.filter(d => d["Country or Area"] == "Europe" & d["Year(s)"] == 2022)[0]["Value"]; const europe_ded_2015 = deaths_by_pollution_2015_data.filter(d => d["Region"] == "Europe")[0]["sum"]; const europe_ded = Math.round(europe_ind_2022 * europe_ded_2015 / europe_ind_2015 / rf); // Array con numero de muertos, nombre de cada región y sus respectivos colores. Nótese que los índices coinciden: 0 es // Norteamérica en los tres arrays, 1 es Suramérica, etc. const death_array = [NA_ded, SA_ded, asia_ded, africa_ded, europe_ded, oceania_ded]; const region_names = ["N. America", "S. America", "Asia", "Africa", "Europe", "Oceania"]; const region_colors = ["brown", "coral", "crimson", "darkorange", "firebrick", "lightsalmon"]; // Offset y, para el desplazamiento vertical. También crearemos una variable auxiliar offy_old para guardar // el offset anterior; de esta forma, sabremos cuando ha habido un cambio en el slider, y sólo refrescaremos la imagen // cuando se dé este cambio. let offy = 0; let offy_old = -1; // Variables para guardar el slider lateral y su posición let slider; let slider_posx = -110; let slider_posy = canvas_height / 2; // Variable para guardar imagen de persona let person_img; sketch.setup = function() { // Inicialicemos el canvas: sketch.createCanvas(canvas_width, canvas_height); // Creamos el slider y lo anclamos a la izquierda: slider = sketch.createSlider(0, 300, 0, 0.1); slider.position(slider_posx, slider_posy); slider.style("transform","rotate(90deg)"); // Desactivamos el suavizado de la imagen para ahorrar recursos: sketch.noSmooth(); //Queremos que todos los textos estén alineados // al centro de sus coordenadas sketch.textAlign(sketch.CENTER); sketch.frameRate(5); sketch.imageMode(sketch.CENTER); } sketch.preload = function() { // Pre-cargamos la imagen de la persona: person_img = sketch.loadImage(person_image_URL); } sketch.draw = function() { // Guardamos el valor del slider y lo convertimos a offset. offy = -slider.value() * 10; // Solo queremos refrescar la imagen si ha habido algún cambio en el slider: if(offy == offy_old) return; offy_old = offy; // Aplicamos la translación dictada por la variable 'offy': sketch.translate(0,offy); // Las personas de la "bola de muertos" se colocan al azar, pero queremos que // esta posición sea constante en cada frame. Por tanto, establecemos una semilla constante: sketch.randomSeed(42); // Pintamos el fondo de negro: sketch.background(0); // Escribimos el título del gráfico. Todo muy dramático y omnioso. sketch.fill(200); sketch.textSize(20); sketch.text("This past year 2022, we released 36.6 billion tonnes of CO2 into the atmosphere.", canvas_width / 2, 50); sketch.text("How many deaths has this caused world-wide?", canvas_width / 2, 90); // ¡Hora de dibujar la bola de muertos! Establecemos las coordenadas de la bola y su radio: let deathball_center_x = canvas_width / 2 + 30; let deathball_center_y = 330; let deathball_radius = 200; // Dibujamos un circulito que delimite la bola de muertos. sketch.fill(0); sketch.stroke(15); sketch.strokeWeight(2); sketch.circle(deathball_center_x, deathball_center_y, deathball_radius*2+15); sketch.strokeWeight(0); // Pintamos 1.000 fiambres, colocados al azar dentro de la bola: for(let i = 0; i < 1000; i++) { let r = sketch.random(1, deathball_radius); let theta = sketch.random(0, 360) * 3.141592 / 180.0; let cx = deathball_center_x + r * Math.cos(theta); let cy = deathball_center_y + r * Math.sin(theta); sketch.tint(sketch.random(50, 150)); sketch.image(person_img, cx, cy); } // En versiones posteriores podríamos utilizar el motor webgl de p5 para pintar los muñequitos sin que se solapen, teniendo en cuenta la profundiad. // Añadimos los textos de la bola de muertos sketch.fill(255); sketch.stroke(0); sketch.strokeWeight(3); sketch.textSize(40); sketch.text("1k", deathball_center_x + 10, deathball_center_y + 10); sketch.textSize(20); sketch.strokeWeight(0); sketch.fill(200); sketch.text("=", deathball_center_x - deathball_radius - 30, deathball_center_y); sketch.fill(255); sketch.square(deathball_center_x - deathball_radius - 70, deathball_center_y - 10, 7); sketch.text("1 x ", deathball_center_x - deathball_radius - 90, deathball_center_y); // Dibujamos los recuadros de cada una de las regiones: for(let i = 0; i < N_regions; i++) { // Seleccionamos el colorico de cada región: sketch.fill(region_colors[i]); // Elegimos unas coordenadas para iniciar la columna: let col_center_x = 100 + 150*i; // CENTRO X de la columna let col_start_y = 470+150; // INICIO Y de la columna // Escribimos el nombre de la región en el centro de la columna: sketch.text(region_names[i], col_center_x, col_start_y); // Guardamos el maximo de muertos (recuadritos) que hay que pintar: let d_max = parseInt(death_array[i]); // Creamos algunos contadores y variables auxiliares: let cont_dx = 0; // Desp. horiz. let cont_dy = 0; // Desp. vert. let pos_x, pos_y; // Aux. con posición donde hay que pintar el cuadrado // ¡Hora de pintar cuadraditos! for(let d = 0; d <= d_max; d ++) { // Avanzamos los contadores de posición: pos_x = col_center_x - 50 + 10 * cont_dx; pos_y = col_start_y + 30 + 10 * cont_dy; // Avanzamos el contador de desp. horizontal: cont_dx = cont_dx + 1; // Si llegamos al maximo, lo reiniciamos y avanzamos // el contador de desplazamiento vertical. if(cont_dx == 10) { cont_dx = 0; cont_dy = cont_dy + 1; } // NOTA: Sí, soy consciente de que esto sería más eficiente hacerlo con el operador módulo (%) // Pintamos el cuadrado: sketch.square(pos_x, pos_y, 7); } // Escribimos el número de muertos total al final de la columna: sketch.text(String(d_max+1).concat("k"), col_center_x, pos_y + 50); } } })4d:Tb71,p5(sketch => { // Dimensiones del canvas: let canvas_width = 1000; let canvas_height = 750; // Maximo de personas para dibujar en cada bola: let max_persons_to_draw1; let max_persons_to_draw2; // Centro y radio de la bola izquierda: let deathball1_center_x = canvas_width / 3 + 10; let deathball1_center_y = canvas_height / 2 - 10; let deathball1_radius; // Centro y radio de la bola derecha: let deathball2_center_x = canvas_width - 150 ; let deathball2_center_y = canvas_height / 2; let deathball2_radius = 5; // Variable para guardar el objeto de tipo imagen: let person_img; // Función para calcular el radio de cada bola y guardarlo // en las variables correspondientes. sketch.calculate_deathball_radius = function(max_1, max_2) { deathball1_radius = Math.min(400, 3 * max_1); deathball2_radius = Math.min(400, 3 * max_2); } sketch.preload = function() { // Pre-cargamos la imagen de la personita: person_img = sketch.loadImage(person_image_URL); } sketch.setup = function() { // Inicialicemos el canvas: sketch.createCanvas(canvas_width, canvas_height); // Calculamos el máximo de personas a dibujar (lo limitaremos a 10000 para no fundir el observable) max_persons_to_draw1 = max_deaths[1]; max_persons_to_draw2 = max_deaths[3]; sketch.calculate_deathball_radius(max_persons_to_draw1, max_persons_to_draw2); sketch.textAlign(sketch.CENTER); sketch.background(0); sketch.noLoop(); } sketch.draw = function() { sketch.background(0); for(let i = 0; i < Math.min(25000,max_persons_to_draw1)-1; i++) { let r = sketch.random(1, deathball1_radius); let theta = sketch.random(0, 360) * 3.141592 / 180.0; let cx = deathball1_center_x + r * Math.cos(theta); let cy = deathball1_center_y + r * Math.sin(theta); sketch.fill(255); sketch.tint(sketch.random(50, 150)); sketch.image(person_img, cx, cy); } sketch.fill(255); sketch.stroke(0); sketch.strokeWeight(2); sketch.textSize(30); sketch.text("CHINA:\n".concat(String(parseInt(max_persons_to_draw1))).concat(" deaths"),deathball1_center_x + 10, deathball1_center_y + 10); for(let i = 0; i < Math.min(10000, max_persons_to_draw2)-1; i++) { let r = sketch.random(1, deathball2_radius); let theta = sketch.random(0, 360) * 3.141592 / 180.0; let cx = deathball2_center_x + r * Math.cos(theta); let cy = deathball2_center_y + r * Math.sin(theta); sketch.fill(255); sketch.tint(sketch.random(50, 150)); sketch.image(person_img, cx, cy); } sketch.fill(255); sketch.stroke(0); sketch.strokeWeight(2); sketch.textSize(25); sketch.text("TRINIDAD & TOBAGO:\n".concat(String(parseInt(max_persons_to_draw2))).concat(" death"),deathball2_center_x + 20, deathball2_center_y -50); } })4e:Tde9,p5(sketch => { // Dimensiones del canvas: let canvas_width = 1000; let canvas_height = 1000; // Número de fiambres que hay que pintar let max_persons_to_draw; // Número de fiambres pintados let current_persons_drawn = 0; // Variable para guardar la dirección de la imagen de la figura humana let person_img; // Coordenadas de la bola de muertos y variable para guardar su radio: let deathball_center_x = canvas_width / 2 ; let deathball_center_y = canvas_height / 2; let deathball_radius; // Variable de escala de la bola. Una bola de radio exactamente 500 // será una bola que tenga esta cantidad de muertos let person_scale = 20000.0; sketch.calculate_deathball_radius = function() { // Calculamos el radio de la bola usando escala cuadrática (Xaquín la clavó) // Definimos radio máximo y mínimo de las bolas (lo ideal sería escalar indefinidamente, // pero el lienzo y los recursos son limitados). var max_radius = 500; var min_radius = 30; // Calculamos el "percentaje" del total de radio máximo que cubrirá la bola: var percent_of_ball = Math.min(max_persons_to_draw, person_scale) / person_scale; // Retornamos el radio: return Math.max(min_radius, Math.min(max_radius, Math.sqrt( percent_of_ball ) * max_radius)); } sketch.get_death_number_for_selected_country = function() { let data; data = country_deaths_by_fossil_fuel_2015.filter(d => d.Entity == selected_deathball_country)[0]; if(data != "undefined" & data != "NaN") { //return data["Excess mortality from fossil fuels"]; let excess_mortality_2015 = country_deaths_by_fossil_fuel_2015.filter(d => d.Entity == selected_deathball_country)[0]["Excess mortality from fossil fuels"]; let mortality_2022 = base_mortality_per_country.filter(d => d["Country or Area"] == selected_deathball_country & d["Year(s)"] == "2022")[0].Value; let mortality_2015 = base_mortality_per_country.filter(d => d["Country or Area"] == selected_deathball_country & d["Year(s)"] == "2015")[0].Value; let excess_mortality_2022 = mortality_2022 * excess_mortality_2015 / mortality_2015; return excess_mortality_2022; } else return -9999; } sketch.preload = function() { person_img = sketch.loadImage(person_image_URL); } sketch.setup = function() { // Inicialicemos el canvas: sketch.createCanvas(canvas_width, canvas_height); max_persons_to_draw = sketch.get_death_number_for_selected_country(); current_persons_drawn = 0; deathball_radius = sketch.calculate_deathball_radius(); sketch.frameRate(800); sketch.background("black"); sketch.fill(255); } sketch.draw = function() { let r = sketch.random(1, deathball_radius); let theta = sketch.random(0, 360) * 3.141592 / 180.0; let cx = deathball_center_x + r * Math.cos(theta); let cy = deathball_center_y + r * Math.sin(theta); sketch.tint(sketch.random(50, 150)); sketch.image(person_img, cx, cy); sketch.textSize(20); sketch.textAlign(sketch.CENTER); sketch.text(selected_deathball_country.concat(" ⇝ ").concat(String(Math.round(max_persons_to_draw))).concat(" 💀"), canvas_width / 2 + 30, Math.max(20, deathball_center_y - deathball_radius - 30)); current_persons_drawn = current_persons_drawn + 1; // Condición de parada. if(current_persons_drawn >= Math.round(max_persons_to_draw)) sketch.noLoop(); } })4f:Tc88,graph_co2_static = { let selected_variable_co2_static = "CO2"; let selected_countries_5 = ["China", "United States", "India", "Russia", "Japan"]; // Ponemos los datos en un formato decente y que pueda leerse. Lo ideal sería hacerlo fuera de esta celda, // pero prefiero condensarlo todo el máximo posible. let emisions_decent_data = Object.entries(emissions).filter(d => nombres_paises.includes(d[0])) .map(([key, value]) => ( [...value.data.map(d => ({country: key, ...d}))] )).flat() // Establecemos un rango máximo y mínimo de años indicado por el usuario: let min_year = year_slider_cO2_static[0]; let max_year = year_slider_cO2_static[1]; // Creamos un diccionario con los nombres de cada campo que el usuario quiera visualizar: let variables_dictionary = ({ "CO2" : "co2", "CO2 / GDP" : "co2_per_gdp", "CO2 / capita" : "co2_per_capita", "Population" : "population", "GDP" : "gdp" }); // Creamos un diccionario con las etiquetas para cada tipo de dato que el usuario quiera visualizar: let axis_labels_dictionary = ({ "CO2" : "↑ CO2 emisions (absolute GtC)\n", "CO2 / GDP" : "↑ CO2 emisions / GDP (GtC)\n", "CO2 / capita" : "↑ CO2 emisions / capita (GtC)\n", "Population" : "Population\n", "GDP" : "GDP\n" }) // Hacemos el filtrado de los datos: let data_selection = emisions_decent_data.filter(d => selected_countries_5.includes(d.country) & d.year >= min_year & d.year <= max_year); function set_line_color(d) { let colors_dictionary = ({ "China" : "#EE6677", "United States" : "#4477AA", "India" : "#228833", "Russia" : "#ccbb44", "Japan" : "#AA3377" }); return colors_dictionary[d.country]; } // Si no se han seleccionado paises, mostramos un canvas con una advertencia: if(data_selection.length == 0) { const context = DOM.context2d(width, 500); context.clearRect(0, 0, width, 500); context.font = "15px Segoe UI"; //context.fontSize = 10; context.fillText(" ↑↑ Select at least a country from the list above to see its evolution ↑↑" , 20, 500 / 2 ); return context.canvas; } // Dibujamos el plot de línea: return Plot.plot({ height: 500, width : width * 0.8, marginLeft: 50, y: { type: "linear", grid: true, label: axis_labels_dictionary[selected_variable_co2_static], nice : true }, x:{ label: "Year →", grid : true, }, color: { legend: true, //domain: ["China", "United States", "India", "Russia", "Japan"], //range: ["red", "green", "blue", "yellow", "pink"] //scheme: "custom" }, marks: [ Plot.ruleY([0]), //Plot.line(data_selection_back, {x: "year", y: variables_dictionary[selected_variable_co2_static], stroke: "red", strokeWidth: 1}), Plot.line(data_selection, {opacity: 0.85, x: "year", y: variables_dictionary[selected_variable_co2_static], stroke: set_line_color, strokeWidth: 2}), //Plot.text(data_selection, Plot.selectLast({x: 2020,y: variables_dictionary[selected_variable_co2_static],text: "country"})) ], }) }50:T9e0,{ // Ponemos los datos en un formato decente y que pueda leerse. Lo ideal sería hacerlo fuera de esta celda, // pero prefiero condensarlo todo el máximo posible. let emisions_decent_data = Object.entries(emissions).filter(d => selected_countries_co2viz.includes(d[0])) .map(([key, value]) => ( [...value.data.map(d => ({country: key, ...d}))] )).flat() // Establecemos un rango máximo y mínimo de años indicado por el usuario: let min_year = year_slider_cO2[0]; let max_year = year_slider_cO2[1]; // Creamos un diccionario con los nombres de cada campo que el usuario quiera visualizar: let variables_dictionary = ({ "CO2" : "co2", "CO2 / GDP" : "co2_per_gdp", "CO2 / capita" : "co2_per_capita", "Population" : "population", "GDP" : "gdp" }); // Creamos un diccionario con las etiquetas para cada tipo de dato que el usuario quiera visualizar: let axis_labels_dictionary = ({ "CO2" : "↑ CO2 emisions (absolute GtC)\n", "CO2 / GDP" : "↑ CO2 emisions / GDP (GtC)\n", "CO2 / capita" : "↑ CO2 emisions / capita (GtC)\n", "Population" : "Population\n", "GDP" : "GDP\n" }) // Hacemos el filtrado de los datos: let data_selection = emisions_decent_data.filter(d => selected_countries_co2viz.includes(d.country) & d.year >= min_year & d.year <= max_year); // Si no se han seleccionado paises, mostramos un canvas con una advertencia: if(data_selection.length == 0) { const context = DOM.context2d(width, 500); context.clearRect(0, 0, width, 500); context.font = "15px Segoe UI"; //context.fontSize = 10; context.fillText(" ↑↑ Select at least a country from the list above to see its evolution ↑↑" , 20, 500 / 2 ); return context.canvas; } // Dibujamos el plot de línea: return Plot.plot({ height: 500, width : width * 0.8, y: { type: "linear", grid: true, label: axis_labels_dictionary[selected_variable_co2], nice : true }, x:{ label: "Year →", grid : true, }, color: { legend: true, scheme: "dark2" }, marks: [ Plot.ruleY([0]), Plot.line(data_selection, {x: "year", y: variables_dictionary[selected_variable_co2], stroke: "country"}), ], }) } // I used to be a cool guy. I used to code spaceship controllers running on neural networks, fractal visualizers and cool traditional text-based rogue-likes... And now here I am, coding a bloody CO2 visualization at 12AM.51:T40c,**About the data.** The *mirror viz* considers the sum of the “Emissions of all countries during the past 20 years” (from 2022 backwards) from [Our World in Data](https://nyc3.digitaloceanspaces.com/owid-public/data/co2/owid-co2-data.json) and the “Top 10 countries with higher Climate Risk Index (CRI)” from [GermanWatch](https://reliefweb.int/attachments/b6a6928e-214a-3398-bc01-1460f32bb3ad/Global%20Climate%20Risk%20Index%202021_1.pdf). The dataset that was created and cleansed manually. This visualization shows the level of "justice" between the emissions of the 10 most polluting countries and the impacts that they receive. Here, a circle of area 1/2 would correspond to a volume of emissions (or a CRI index) equal to the global the average, a circle of area 1 would be double the global average, and so on. Therefore, there is "climate justice" when both circles coincide. Considering the concept of justice we just defined, we can ask ourselves: **are the most polluting countries the ones that suffer the most?** 52:T159e,// Recordatorio para mí: hemos cambiado los contenidos de emisiones_2022 y ahora es la SUMA de las emisiones totales durante los últimos 20 años a partir de 2022. p5(sketch => { // Definimos las dimensiones del canvas: const canvas_width = 950; const canvas_height = 600; // También un array para guardar los círculos: let mirror_circle_array = []; // Establecemos una escala para el semicirculo superior // Un semicirculo de radio 1/2 se correspondería con un país que tuviera // las emisiones de CO2 justo en la media global. let scaling_factor_co2 = (emisiones_2022["World"] / 195 ) *0.5; // let scaling_factor_co2 = emisiones_2022["United States"]; //Idea 2: establecer el máixmo como las emisiones de USA y dejar china como outlier? // Hacemos lo mismo con la media global de CRI. let scaling_factor_cri = (118 - world_avg_CRI) * 0.5; // La idea para comparar los circulos es la siguiente: si el mundo fuera un lugar justo, un país que tenga emisiones justo en la media debería tener un CRI justo en la media, si emite el doble de la media, su CRI debería ser el doble de la media, etc. En todos estos casos, los dos semicírculos tendrían igual tamaño. La injusticia empieza cuando estos círculos no tienen el mismo tamaño, y hay una disparidad entre la relación según las medias. //Parámetros de los gráficos: let x_anchor = 330; // Coordenada X dónde va a empezar el primer círculo de cada fila let r = 40; // Radio de los círculos, en píxeles let space = r + 150; // Separación entre los paises, en píxeles let topX = 10; // ¿Qué top N de paises queremos mostrar? let y_superior = 200; // Coordenadas y de los círculos superiores let y_inferior = canvas_height - 150; // Coordenadas y de los círculos inferiores let slider; sketch.setup = function() { // Inicialicemos el canvas: sketch.createCanvas(canvas_width, canvas_height); // Desactivamos el suavizado: sketch.noSmooth(); // Al final hay que poner looping para que se pueda recalcular la imagen cada vez que se mueve el slider. // Pondremos un framerate de 4 para que el navegador tenga que re-pintar el frame las menos veces posible. sketch.frameRate(4); // Creamos el slider y lo anclamos al borde superior de la visualización: slider = sketch.createSlider(0, 1200, 0, 0.1); slider.position(canvas_width / 2, 10); // Por cada país, creamos un objeto mirror y lo guardamos al array: for(let i = 0; i < topX; i++) { // Gráfico superior: let nombre_superior = top_10_CO2[i].Entity; let CO2_superior = top_10_CO2[i].CO2; let CRI_superior = top_10_CO2[i].CRI; let CO2_r = CO2_superior / scaling_factor_co2; // CO2_superior / CO2_mean * 0.5; let CRI_r = (118 - CRI_superior) / scaling_factor_cri;//(118 - CRI_superior) / CRI_mean * 0.5; let mc = new MirrorCircle(sketch, nombre_superior, x_anchor + i*space, y_superior, r, CO2_r, CRI_r, Math.round(CO2_superior), CRI_superior); sketch.append(mirror_circle_array, mc); // Gráfico inferior: let nombre_inferior = top_10_CRI[i].Entity; let CO2_inferior = top_10_CRI[i].CO2; let CRI_inferior = top_10_CRI[i].CRI; CO2_r = CO2_inferior / scaling_factor_co2; CRI_r = (118 - CRI_inferior) / scaling_factor_cri; mc = new MirrorCircle(sketch, nombre_inferior, x_anchor + i*space, y_inferior, r, CO2_r, CRI_r, Math.round(CO2_inferior), CRI_inferior); sketch.append(mirror_circle_array, mc); } } sketch.draw = function() { // Repintamos de blanco todo el lienzo: sketch.background(255); // Aplicamos una translación según el valor del slider: let slider_val = slider.value(); sketch.translate(-slider_val, 0); // Recorremos el array de círculos y pintamos cada uno: for(let i = 0; i < mirror_circle_array.length; i++) mirror_circle_array[i].display(); // Pintamos el título del gráfico superior: sketch.textAlign(sketch.LEFT); sketch.textSize(20); sketch.fill(0); sketch.text("Most polluting \ncountries", 20, y_superior - 100); sketch.textSize(14); sketch.text("(total emissions since 2002)", 20, y_superior- 55) sketch.textAlign(sketch.CENTER); // Y el título del gráfico inferior: sketch.textAlign(sketch.LEFT); sketch.textSize(20); sketch.fill(0); sketch.text("Countries with \nhigher CRI", 20, y_inferior - 100); sketch.textAlign(sketch.CENTER); // Texto de los semicirculos superiores: sketch.textAlign(sketch.LEFT); sketch.strokeWeight(2); sketch.stroke(0, 30); sketch.line(0, y_superior, canvas_width + (space + r) * topX, y_superior); sketch.stroke(255, 130); sketch.fill("darkorange"); sketch.textSize(12); sketch.text("CO2 emissions (GtC) \n(2002-2022)", 50, y_superior - 20); sketch.stroke(255, 10); sketch.fill("maroon"); sketch.text("Current CRI index", 50, y_superior + 15); // Texto de los semicirculos inferiores: sketch.textAlign(sketch.LEFT); sketch.strokeWeight(2); sketch.stroke(0, 30); sketch.line(0, y_inferior, canvas_width + (space + r) * topX, y_inferior); sketch.stroke(255, 130); sketch.fill("darkorange"); sketch.textSize(12); sketch.text("CO2 emissions (GtC) \n (2002-2022)", 50, y_inferior - 20); sketch.stroke(255, 10); sketch.fill("maroon"); sketch.text("Current CRI index", 50, y_inferior + 15); } })53:T473,**About the findings** * **China** is the one that emits the most CO2, due in large part to the export of consumer goods and its great dependence on coal. The United States in second place, for being the first industrial and commercial power in the world. (Source: [Climate Selectra](https://climate.selectra.com/es/huella-carbono/paises-contaminantes)) * **Germany** is not shown, but it is the only European country to be in the top 10, due to its heavy reliance on coal. Thus, ¼ of the CO2 emissions of the European Union come from Germany. (Source: [Climate Selectra](https://climate.selectra.com/es/huella-carbono/paises-contaminantes)) * **Japan** and **India** are both two of the most polluting countries and two of the countries that most suffer the consequences of climate change. However, their CRI should be much higher in order to have some semblance of climate justice. * None of the other countries with the higher CRI have a significant impact on climate change. Therefore, we can conclude that **there is no climate justice**: the guilty do not suffer the consequences of their emissions in a fair and proportional way. 54:T229d,p5(sketch => { // Nota: Xaquín sugirió cambiar el grueso de cada uno de los ríos. Lo intenté, pero me cargué la visualización en el proceso // (aún no sé muy bien cómo ni por qué) así que he decidido dejarlo como está. // We define the number of climate refugees for each region. // Source: https://www.internal-displacement.org/database/displacement-data (divided by 1000) let global_africa_inventory = [2113,1,24689,2550,141,0]; let global_asia_inventory = [465,1087,122930,65166,268,1]; let global_europe_inventory = [0,0,639,43,135,0]; let global_na_inventory = [0,27,2157,8117,3130,0]; let global_sa_inventory = [10,50,8163,9837,37,0]; let global_oceania_inventory = [5,0,7618,45021,99,0]; // I really wanted to read these from a .csv, but I've run out of time and I had to hard-code them. // Canvas dimensions: let canvas_width = 1000; let canvas_height = 600; // This variable will store a Counter object: let n; // This visualization is resource-demanding, and some computers might have problems // when running it. Therefore, we will not start the visualization until the reader // presses a start button. let started = false; let start_button; // We will also have a button to stop the simulation (i.e. restart this sketch) let stop_button; // Person/particle generators: let africa_persongenerator, asia_persongenerator, europe_persongenerator, na_persongenerator, sa_persongenerator, oceania_persongenerator; // Each person generator will have an associated path that their person/particles will follow. This variables // will store these paths. let africa_path, asia_path, europe_path, na_path, sa_path, oceania_path; // I don't have the slightest clue what this variable was supposed to do, but I'm too afraid to delete it: let pos = 86; sketch.setup = function() { // Let's initialize the canvas: sketch.createCanvas(canvas_width, canvas_height); //Create a counter object. This will store the total number of displaced people, and the // number of people of each class (displaced due to wildfires, drought, etc): n = new Counter(sketch); // The visualization is very resource consuming as it is, so we will deactivate // the anti-aliasing. sketch.noSmooth(); // Also, limit the fps to 24. sketch.frameRate(24); // Create the start button: start_button = sketch.createButton("Begin the \n exodus ►"); start_button.mouseClicked(sketch.startButton); start_button.size(240,100); start_button.position(canvas_width/2-120,canvas_height/2-50); start_button.style("font-family", "Bodoni"); start_button.style("font-size", "32px"); let inv_ret = new InventoryRetriever(sketch); let end_x = canvas_width -200; let africa_inventory = [];//global_africa_inventory;//[2113254,1400,24688983,2549654,140612,0]; sketch.arrayCopy(global_africa_inventory, africa_inventory); africa_path = new Path(sketch); africa_path.addPoint(5, pos); //africa_path.addPoint(150, pos); africa_path.addPoint(300, pos); //africa_path.addPoint(450, (canvas_height / 2 - pos) / 2); africa_path.addPoint(600, canvas_height / 2); africa_path.addPoint(end_x, canvas_height / 2); africa_persongenerator = new PersonParticleGenerator(sketch, 0, pos, africa_path, africa_inventory, n); let asia_inventory = [];//global_asia_inventory;//[464940,1086802,122929929,65166039,268439,810]; sketch.arrayCopy(global_asia_inventory, asia_inventory); asia_path = new Path(sketch); asia_path.addPoint(5, pos*2); asia_path.addPoint(300,pos*2); asia_path.addPoint(600, canvas_height / 2); asia_path.addPoint(end_x, canvas_height / 2); asia_persongenerator = new PersonParticleGenerator(sketch, 5, pos*2, asia_path, asia_inventory,n); asia_persongenerator.flux = 15; let europe_inventory = [];//global_europe_inventory;//[0,51,638234,42536,135014,0]; sketch.arrayCopy(global_europe_inventory, europe_inventory); europe_path = new Path(sketch); europe_path.addPoint(5, pos*3); europe_path.addPoint(300, pos*3); europe_path.addPoint(600, canvas_height / 2); europe_path.addPoint(end_x, canvas_height / 2); europe_persongenerator = new PersonParticleGenerator(sketch, 5, pos*3, europe_path, europe_inventory,n); europe_persongenerator.energy_max = 250; europe_persongenerator.flux = 1; let na_inventory = [];//global_na_inventory;//[0,26525,2157148,8116934,3129925,0]; sketch.arrayCopy(global_na_inventory, na_inventory); na_path = new Path(sketch); na_path.addPoint(5, pos*4); na_path.addPoint(300, pos*4); na_path.addPoint(600, canvas_height / 2); na_path.addPoint(end_x, canvas_height / 2); na_persongenerator = new PersonParticleGenerator(sketch, 5, pos*4, na_path, na_inventory,n); na_persongenerator.energy_max = 100; na_persongenerator.flux = 2; let sa_inventory = [];//global_sa_inventory;//[9843,49908,8162635,9837019,36780,0]; sketch.arrayCopy(global_sa_inventory, sa_inventory); sa_path = new Path(sketch); sa_path.addPoint(5, pos*5); sa_path.addPoint(300, pos*5); sa_path.addPoint(600, canvas_height / 2); sa_path.addPoint(end_x, canvas_height / 2); sa_persongenerator = new PersonParticleGenerator(sketch, 5, pos*5, sa_path, sa_inventory,n); sa_persongenerator.energy_max = 100; let oceania_inventory = [];//global_oceania_inventory;//[5400,316,7617964,45020864,98979,0]; sketch.arrayCopy(global_oceania_inventory, oceania_inventory); oceania_path = new Path(sketch); oceania_path.addPoint(5, pos*6); oceania_path.addPoint(300, pos*6); oceania_path.addPoint(600, canvas_height / 2); oceania_path.addPoint(end_x, canvas_height / 2); oceania_persongenerator = new PersonParticleGenerator(sketch, 5, pos*6, oceania_path, oceania_inventory,n); sa_persongenerator.energy_max = 100; }; sketch.startButton = function() { started = true; start_button.remove(); stop_button = sketch.createButton("Stop ✖"); stop_button.mouseClicked(sketch.stopButton); stop_button.size(70,30); stop_button.position(canvas_width-73,3); stop_button.style("font-family", "Bodoni"); stop_button.style("font-size", "16px"); } sketch.stopButton = function() { started = false; stop_button.remove(); sketch.setup(); } sketch.draw = function() { sketch.background(200); if(!started) return; africa_persongenerator.run(); asia_persongenerator.run(); europe_persongenerator.run(); na_persongenerator.run(); sa_persongenerator.run(); oceania_persongenerator.run(); //path.display(); let x = canvas_width - 400; let y = canvas_height / 2 - 50; let w = 230; let h = 100; let c1 = sketch.color(200, 200, 200, 0); let c2 = sketch.color(200, 200, 200, 255); sketch.strokeWeight(2); for (let i = x; i <= x + w; i++) { let inter = sketch.map(i, x, x + w, 0, 1); let c = sketch.lerpColor(c1, c2, inter); sketch.stroke(c); sketch.line(i, y, i, y + h); } sketch.fill(0); sketch.stroke(255); sketch.strokeWeight(2); sketch.textSize(20); sketch.text("AFRICA", 5, pos); sketch.text("ASIA", 5, pos*2); sketch.text("EUROPE", 5, pos*3); sketch.text("N. AMERICA", 5, pos*4); sketch.text("S. AMERICA", 5, pos*5); sketch.text("OCEANIA", 5, pos*6); sketch.text("Between 2008-2021", canvas_width - 350, 190); sketch.stroke(0); sketch.text(String(n.n).concat("k people"), canvas_width - 350, 215); sketch.stroke(255); sketch.text("had to flee their homeland", canvas_width - 350, 240); sketch.text("due to climate-related disasters", canvas_width - 350, 265); sketch.fill(255,255,0); sketch.stroke(50,50,0); sketch.text(String(n.drought).concat("k left due to drought."), canvas_width - 400, 400); sketch.fill(255,170,0); sketch.stroke(50,10,0); sketch.text(String(n.ext_temp).concat("k left due to extreme temperatures."), canvas_width - 400, 425); sketch.fill(0,170,255); sketch.stroke(0,10,50); sketch.text(String(n.flood).concat("k left due to floods."), canvas_width - 400, 450); sketch.fill(170, 85, 255); sketch.stroke(10,5,50); sketch.text(String(n.storm).concat("k left due to storms."), canvas_width - 400, 475); sketch.fill(255, 0, 0); sketch.stroke(50,0,0); sketch.text(String(n.wildfire).concat("k left due to wildfires."), canvas_width - 400, 500); sketch.fill(170, 255, 255); sketch.stroke(10,50,50); sketch.text(String(n.svc).concat("k left due to severe winter conditions."), canvas_width - 400, 525); }; })55:T4f8,

Global planet living index

**About the context.** Humans are not the only living beings who suffer the consequences of CO2 emissions. Global warming is one of the major contributors to the loss of biodiversity, especially in regions such as Africa, where the increasing droughts leave most animal populations without access to freshwater and food sources. **About the data.** The *Global viz* considered [The Global living planet index](https://www.livingplanetindex.org/) (GLPI, or LPI), an indicator of the current state of the world's biodiversity that shows the evolution in size of nearly 10.000 vertebrate populations from all world regions with respect to their original size in 1970. The Zoological Society of London and the WWF manage this index and have been updating its value once a year since 1970. Considering the loss or increase of biodiversity around our planet, we ask ourselves, **how has the LPI changed with respect to 1970?** ℹ️ *This visualization shows the variation of the GLPI between the years 1970-2017, since no data exists for the years after 2017.*56:T2549,{ // NOTA: habría sido mejor automatizar la creación de los círculos y los textos mediante objetos y bucles. No obstante, al haber // sólo cinco, ha sido más immediato hacerlo así. var scaler = 80; var africa_glpi = glpi_raw.filter(d => d.Entity == "Africa" && d.Year == String(year_slider_glpi)); var africa_size = africa_glpi["0"].living_planet_index_average * scaler; var africa_value = String(parseInt(africa_glpi["0"].living_planet_index_average)); var eurasia_glpi = glpi_raw.filter(d => d.Entity == "Europe and Central Asia" && d.Year == String(year_slider_glpi)); var eurasia_size = eurasia_glpi[0].living_planet_index_average * scaler; var eurasia_value = String(parseInt(eurasia_glpi["0"].living_planet_index_average)); var na_glpi = glpi_raw.filter(d => d.Entity == "North America" && d.Year == String(year_slider_glpi)); var na_size = na_glpi[0].living_planet_index_average * scaler; var na_value = String(parseInt(na_glpi["0"].living_planet_index_average)); var sa_glpi = glpi_raw.filter(d => d.Entity == "Latin America and the Caribbean" && d.Year == String(year_slider_glpi)); var sa_size = sa_glpi[0].living_planet_index_average * scaler; var sa_value = String(parseInt(sa_glpi["0"].living_planet_index_average)); var asia_glpi = glpi_raw.filter(d => d.Entity == "Asia and Pacific" && d.Year == String(year_slider_glpi)); var asia_size = asia_glpi[0].living_planet_index_average * scaler; var asia_value = String(parseInt(asia_glpi["0"].living_planet_index_average)); // Backup proyección anterior: /*const map = vl.markGeoshape({fill:"lightgrey", stroke: "lightgrey"}) .data(vl.topojson(countries_url_glpi).feature("countries1")) .width(1000) .height(600)*/ const map = vl.layer( vl.markGeoshape({fill: 'azure'}) .data(vl.sphere()), vl.markGeoshape({fill:"lightgrey", stroke: "mediumgrey"}) .data(vl.topojson(countries_url_glpi).feature("countries1")) .width(1000) .height(800) ) let point_color = "#172d00"; ///// AFRICA ///////// const africa_ref = vl.markPoint({filled: true, opacity: 0.3, color : "red"}) .data(africa_glpi) .encode(vl.y().value(400), vl.x().value(550), vl.size().value(100*scaler) ) const africa_point = vl.markPoint({filled: true, opacity: 1, color : point_color}) .data(africa_glpi) .encode(vl.y().value(400), vl.x().value(550), vl.size().value(africa_size) ) const africa_text = vl.markText({filled: true, opacity: 1, color : "white"}) .data(africa_glpi) .encode(vl.y().value(400), vl.x().value(550), vl.size().value(20), vl.text().value(africa_value.concat("%")) ) const africa_rule = vl.markRect({opacity: 1, color : point_color}) .data(africa_glpi) .encode( vl.x().value(551), vl.y().value(400), vl.x2().value(549), vl.y2().value(500), ) const africa_label = vl.markText({filled: true, opacity: 1, color : "black"}) .data(africa_glpi) .encode(vl.y().value(515), vl.x().value(550), vl.size().value(20), vl.text().value("AFRICA") ) ///// EURASIA ///////// let eurasia_x = 630; let eurasia_y = 250; const eurasia_ref = vl.markPoint({filled: true, opacity: 0.3, color : "red"}) .data(eurasia_glpi) .encode(vl.y().value(eurasia_y), vl.x().value(eurasia_x), vl.size().value(100*scaler) ) const eurasia_point = vl.markPoint({filled: true, opacity: 1, color : point_color}) .data(eurasia_glpi) .encode(vl.y().value(eurasia_y), vl.x().value(eurasia_x), vl.size().value(eurasia_size) ) const eurasia_text = vl.markText({filled: true, opacity: 1, color : "white"}) .data(eurasia_glpi) .encode(vl.y().value(eurasia_y), vl.x().value(eurasia_x), vl.size().value(20), vl.text().value(eurasia_value.concat("%")) ) const eurasia_rule = vl.markRect({opacity: 1, color : point_color}) .data(eurasia_glpi) .encode( vl.x().value(eurasia_x-1), vl.y().value(eurasia_y-1), vl.x2().value(eurasia_x + 1), vl.y2().value(130), ) const eurasia_label = vl.markText({filled: true, opacity: 1, color : "black"}) .data(eurasia_glpi) .encode(vl.x().value(eurasia_x), vl.y().value(130 - 14), vl.size().value(20), vl.text().value("EUROPE & CENTRAL ASIA") ) ///// NORTH A. ///////// let na_x = 250; let na_y = 270; const na_ref = vl.markPoint({filled: true, opacity: 0.3, color : "red"}) .data(na_glpi) .encode(vl.y().value(na_y), vl.x().value(na_x), vl.size().value(100*scaler) ) const na_point = vl.markPoint({filled: true, opacity: 1, color : point_color}) .data(na_glpi) .encode(vl.y().value(na_y), vl.x().value(na_x), vl.size().value(na_size) ) const na_text = vl.markText({filled: true, opacity: 1, color : "white"}) .data(na_glpi) .encode(vl.y().value(na_y), vl.x().value(na_x), vl.size().value(20), vl.text().value(na_value.concat("%")) ) const na_rule = vl.markRect({opacity: 1, color : point_color}) .data(na_glpi) .encode( vl.x().value(na_x-1), vl.y().value(na_y-1), vl.x2().value(na_x + 1), vl.y2().value(130), ) const na_label = vl.markText({filled: true, opacity: 1, color : "black"}) .data(na_glpi) .encode(vl.x().value(na_x), vl.y().value(130 - 14), vl.size().value(20), vl.text().value("NORTH & CENTRAL AMERICAS") ) ///// SOUTH A. ///////// let sa_x = 350; let sa_y = 460; const sa_ref = vl.markPoint({filled: true, opacity: 0.3, color : "red"}) .data(sa_glpi) .encode(vl.y().value(sa_y), vl.x().value(sa_x), vl.size().value(100*scaler) ) const sa_point = vl.markPoint({filled: true, opacity: 1, color : point_color}) .data(sa_glpi) .encode(vl.y().value(sa_y), vl.x().value(sa_x), vl.size().value(sa_size) ) const sa_text = vl.markText({filled: true, opacity: 1, color : "white"}) .data(sa_glpi) .encode(vl.y().value(sa_y), vl.x().value(sa_x), vl.size().value(20), vl.text().value(sa_value.concat("%")) ) const sa_rule = vl.markRect({opacity: 1, color : point_color}) .data(sa_glpi) .encode( vl.x().value(sa_x), vl.y().value(sa_y-1), vl.x2().value(sa_x - 105), vl.y2().value(sa_y + 1), ) const sa_label_1 = vl.markText({filled: true, opacity: 1, color : "black"}) .data(na_glpi) .encode(vl.x().value(sa_x - 200), vl.y().value(sa_y - 15), vl.size().value(20), vl.text().value("SOUTH AMERICA") ) const sa_label_2 = vl.markText({filled: true, opacity: 1, color : "black"}) .data(na_glpi) .encode(vl.x().value(sa_x - 200), vl.y().value(sa_y + 27 - 15), vl.size().value(20), vl.text().value("& CARIBBEAN") ) ///// ASIA + PACIFIC ///////// let asia_x = 800; let asia_y = 350; const asia_ref = vl.markPoint({filled: true, opacity: 0.3, color : "red"}) .data(asia_glpi) .encode(vl.y().value(asia_y), vl.x().value(asia_x), vl.size().value(100*scaler) ) const asia_point = vl.markPoint({filled: true, opacity: 1, color : point_color}) .data(asia_glpi) .encode(vl.y().value(asia_y), vl.x().value(asia_x), vl.size().value(asia_size) ) const asia_text = vl.markText({filled: true, opacity: 1, color : "white"}) .data(asia_glpi) .encode(vl.y().value(asia_y), vl.x().value(asia_x), vl.size().value(20), vl.text().value(asia_value.concat("%")) ) const asia_rule = vl.markRect({opacity: 1, color : point_color}) .data(asia_glpi) .encode( vl.x().value(asia_x-1), vl.y().value(asia_y), vl.x2().value(asia_x +1), vl.y2().value(asia_y + 100), ) const asia_label = vl.markText({filled: true, opacity: 1, color : "black"}) .data(asia_glpi) .encode(vl.x().value(asia_x), vl.y().value(asia_y + 115), vl.size().value(20), vl.text().value("ASIA & OCEANIA") ) return vl.layer(map, africa_ref, africa_point, africa_rule, eurasia_ref, eurasia_point, eurasia_rule, na_ref, na_point, na_rule, sa_ref, sa_point, sa_rule, asia_ref, asia_point, asia_rule, africa_text, eurasia_text, na_text, sa_text, asia_text, africa_label, eurasia_label, na_label, sa_label_1, sa_label_2, asia_label ).project(vl.projection('naturalEarth1')).render() }57:T484,

Coral bleaching events

**About the context. ** Because of climate change, sea temperatures increase; when water is too warm, corals will lose the algae living in their tissues causing the coral to turn white. Corals not always survive a bleaching event, and it always leaves a mark on the ecosystem.
**About the data. ** The first recorded coral bleaching date from 1970; in 1980 scientists started also calculating the severity of these bleaching events. Considering the [summary of all registered coral bleaching events since 1980](https://ourworldindata.org/grapher/coral-bleaching-events?country=~OWID_WRL), we ask ourselves, **what is the severity of the events that have affected the corals?** * The ${textcolor('light orange', '#fea372')} bars indicate the number of **moderate bleaching events** (≤30% surface bleaching). * The ${textcolor('dark red', '#a51122')} bars indicate the number of **severe bleaching events** (>30% surface bleaching). 58:T562,{ // References: https://observablehq.com/@vega/vega-lite-cartographic-projections // Canvas dimensions: const map_width = width; const map_height = map_width / 1.618; // Let's create the earth map object: //const countries_url = "https://unpkg.com/world-atlas@2/countries-110m.json"; const map = vl.layer( vl.markGeoshape({fill: 'azure'}) .data(vl.sphere()), vl.markGeoshape({fill:"lightgrey", stroke: "lightgrey"}) .data(vl.topojson(world).feature('countries')) .width(map_width) .height(map_height) ) const bleaching_event_points = vl.markPoint({filled : true, opacity : 1, size : 100}) .data(coralbleaching_occurrences_raw.filter(d => d.YEAR >= year_slider_coral[0] & d.YEAR <= year_slider_coral[1])) .encode( vl.latitude().fieldQ("LAT"), vl.longitude().fieldQ("LON"), vl.tooltip("LOCATION"), vl.color() .fieldN("BLEACHING_SEVERITY") .scale({ domain: ["Severity Unknown", "No Bleaching", "Low", "Medium", "HIGH"], range: ["gray", "#fea372", "#da434f", "#8a0000", "#5e3c99"] }), //vl.tooltip().fieldN('LOCATION') ) return vl.layer(map, bleaching_event_points) .project(vl.projection('naturalEarth1').scale(zoom_slider_coral).center(x_slider_coral, y_slider_coral)) .width(map_width) .height(map_height) .render(); }59:T5c7,**About the data.** *Sea viz* uses data from the [EEA](https://www.eea.europa.eu/data-and-maps/daviz/projected-global-mean-sea-level#tab-dashboard-01) to show the average global sea level rise up to year 2100. After that, the visualization uses linear interpolation to approximate the sea level between the value of 2100 and the projected level in 2300 according to [NASA](https://earthobservatory.nasa.gov/images/148494/anticipating-future-sea-levels ). The visualization can be customized through 2 filters: **year** and the **emission reduction scenario**. The scenarios are based on [Representative Concentration Pathways (RCPs)](https://en.wikipedia.org/wiki/Representative_Concentration_Pathway), which provide a set of possible scenarios with different levels of greenhouse gas emissions and global warming. * **Current (RCP 8.5)**: "bussiness as usual". Current emission rate without policies to reduce them, which would increase the temperature (with respect to pre-industrial average) to 3.5-4 ºC by 2100. * **Moderate (RCP 4.5)**: intermediate scenario. Emissions start declining around 2040 and reach 50% in 2100, which would limit the temperature rise to 2-3 ºC by 2100. * **Strict (RCP 2.6)**: very strict emission scenario. Emissions start declining now, and reach zero in 2100, which in the simulations offers a possibility of limiting global warming below 2ºC by 2100. Considering the NASA projections, **which territories are vulnerable to sea level rise?**5a:T17f0,p5(sketch => { // Dimensiones del canvas: let canvas_width = 800; let canvas_height = 500; let data_for_current_year; let last_year_selected = 0; let current_year_selected = 0; let current_RCP; let last_RCP = ""; let sea_color = "#6daabcdd"; let venice_img, flamenco_img, manhattan_img, fish1_img, fish2_img, fish3_img, fish4_img, beach_img, maldives_img, marshall_img; sketch.preload = function() { venice_img = sketch.loadImage(venice_image_URL); flamenco_img = sketch.loadImage(flamenco_image_URL); manhattan_img = sketch.loadImage(manhattan_image_URL); fish1_img = sketch.loadImage(fish1_image_URL); fish2_img = sketch.loadImage(fish2_image_URL); fish3_img = sketch.loadImage(fish3_image_URL); fish4_img = sketch.loadImage(totally_ordinary_image_URL); beach_img = sketch.loadImage(beach_image_URL); maldives_img = sketch.loadImage(maldives_image_URL); marshall_img = sketch.loadImage(marshall_image_URL); } sketch.setup = function() { // Inicialicemos el canvas: sketch.createCanvas(canvas_width, canvas_height); } sketch.draw = function() { current_year_selected = viewof year_slider_sea.valueAsNumber; if(viewof climate_scenario_selection.value == "Strict (RCP 2.6)") current_RCP = "RCP2.6:number"; else if(viewof climate_scenario_selection.value == "Moderate (RCP 4.5)") current_RCP = "RCP4.5:number"; else if(viewof climate_scenario_selection.value == "Current (RCP 8.5)") current_RCP = "RCP8.5:number"; if(current_year_selected == last_year_selected & current_RCP == last_RCP) return; last_year_selected = current_year_selected; last_RCP = current_RCP sketch.background("azure"); sketch.fill(0); sketch.stroke(0); let elevation; sketch.textAlign(sketch.LEFT); //World's coastal beaches average elevation, according to: https://www.researchgate.net/figure/Examples-of-estimated-beach-elevation-by-different-estimation-methods-Bold-values_tbl1_326283014 elevation = 0.65; sketch.image(beach_img, 1, canvas_height - 207); sketch.rect(0, canvas_height - 100 * elevation, canvas_width + 5, canvas_height + 5); sketch.fill(255); sketch.text("World's beaches avg. \nelevation (0.65m)", 15, canvas_height - 100*elevation + 15); sketch.fill(0); // Venice & Ebro Delta silhouette: elevation = 1; sketch.rect(200, canvas_height - 100 * elevation, canvas_width + 5, canvas_height + 5); sketch.fill(255); sketch.text("Venice\n(1m)", 210, canvas_height - 85); sketch.image(venice_img, 210, canvas_height - 215); sketch.image(flamenco_img, 300, canvas_height - 175); sketch.text("Ebro delta\n(~1m)", 300, canvas_height - 85); sketch.fill(0); // Maldives islands: elevation = 1.5; sketch.rect(400, canvas_height - 100*elevation, canvas_width + 5, canvas_height + 5); sketch.fill(255); sketch.image(maldives_img, 410, canvas_height - 100*elevation - 139); sketch.text("Maldives\n(1.5m avg.)", 410, canvas_height - 100 * elevation + 15); sketch.fill(0); // Marshall islands elevation = 1.8; sketch.image(marshall_img, 515, canvas_height - 100*elevation - 132); sketch.rect(500, canvas_height - 100*elevation, canvas_width + 5, canvas_height + 5); sketch.fill(255); sketch.text("Marshall Islands\n(~1.8m avg.)", 510, canvas_height - 100 * elevation + 15); sketch.fill(0); // Lower Manhattan elevation = 2.1; sketch.image(manhattan_img, 610, canvas_height - 150*elevation - 10); sketch.rect(610, canvas_height - 100*elevation, canvas_width + 5, canvas_height + 5); sketch.fill(255); sketch.text("Lower Manhattan \n(2.1m)", 620, canvas_height - 100 * elevation + 15); sketch.fill(0); let sea_level = 3; // If the year is before 2100, we will use NASA's predictions: if(current_year_selected <= 2100) { data_for_current_year = sea_level_data.filter(d => d["year:year"] == (current_year_selected))[0]; sea_level = data_for_current_year[current_RCP]; } // If year is beyond 2100, we will use linear interpolation from there one our "model" guess is as good as NASA's: else{ let sea_level_2100 = parseFloat(sea_level_data.filter(d => d["year:year"] == "2100")[0][current_RCP]); if(current_RCP == "RCP8.5:number") sea_level = sea_level_2100 + (RCP_85_final-sea_level_2100) / 200 * (parseInt(current_year_selected) - 2100); else if(current_RCP == "RCP4.5:number") sea_level = sea_level_2100 + (RCP_45_final-sea_level_2100) / 200 * (parseInt(current_year_selected) - 2100); else sea_level = sea_level_2100 + (RCP_26_final-sea_level_2100) / 200 * (parseInt(current_year_selected) - 2100); } sketch.strokeWeight(1); sketch.fill(100); sketch.stroke(100); sketch.textAlign(sketch.CENTER); sketch.text(String(sketch.round(sea_level, 2)).concat("m"), canvas_width / 2, canvas_height - 100 * sea_level - 3); sketch.text("Current year: ".concat(String(current_year_selected)), canvas_width / 2, 30); //sketch.text(sketch.round(sea_level, 2), canvas_width / 2, 60); sketch.fill(sea_color);//(0,170,255, 150); sketch.stroke(180,210,255); sketch.image(fish1_img, 300, canvas_height - sea_level * 100 + 175); sketch.image(fish1_img, 700, canvas_height - sea_level * 100 + 210); sketch.image(fish2_img, 110, canvas_height - sea_level * 100 + 200); sketch.image(fish3_img, 500, canvas_height - sea_level * 100 + 70); sketch.image(fish3_img, 450, canvas_height - sea_level * 100 + 300); sketch.image(fish3_img, 75, canvas_height - sea_level * 100 + 60); sketch.image(fish4_img, 725, canvas_height - sea_level * 100 + 310); sketch.rect(-5, canvas_height - 100 * sea_level, canvas_width + 5, canvas_height + 5); } })5b:T81f,*Ideas that did not work, datasets that could be explored further, etc:* 1. We wanted to add some visualizations about the north pole thaw and the loss of polar bear populations [using this dataset](http://psc.apl.uw.edu/research/projects/arctic-sea-ice-volume-anomaly/data/). The idea was to represent the ice volume as an iceberg picture (with a cute bear on top) that changed its size according to the data. However, we run out of time to implement it. Shame. 2. The original idea for the Deathball visualization was to use a mathematical model that related CO2 emissions to temperature increase (using the [Very, very simple climate model](https://scied.ucar.edu/interactive/simple-climate-model) formulas) and then relate the temperature increase to the number of deaths by using the [MCC model in this paper](https://www.nature.com/articles/s41467-021-24487-w). Although we managed to build a prototype, the death count was astoundingly higher that it sould be (humanity would have gone extinct in a few years, which unfortunately won't happen). We suspect we messed up when calculating the partial derivatives of the MCC formulation; however, we did not want to waste time hunting this error, and we decided to use UNESCO's data from 2015. 3. Similarly, we considered the idea of using a [mathematical model to calculate the sea level rise](http://roperld.com/science/GlobalWarmingPrediction.htm). However, given the poor results of the death count model, we decided that it was better to just use data. 4. We are aware that the dataset management is *a mess*. In a more serious project we should try to unify some of them. For example, CRI, deathcount and CO2 datasets could be unified manually if we were given some more time to work on this notebook. 5. We also tried to implement all the suggestions that were made during the feedback class. We did manage to code most of them, but we're still missing two that would require more working hours: changing the volume of the rivers in the displacement visualization, and adding filter buttons in the line visualization. 5c:T887,max_deaths = { let unique_countries = [...new Set(country_deaths_by_fossil_fuel_2015.map(item => item["Entity"]))]; // Algunos elementos no son propiamente paises, sino entidades, colectivos o regiones. Creamos una lista negra con algunos de ellos, // los cuales podrian salir como maximos (y no nos interesa) let country_blacklist = ["World", "Europe", "Africa", "North America", "Asia", "Oceania", "Asia (excl. China)"] let max_death = 0; let max_death_country_name = "Kingdom of Ascalon"; let min_death = 99999; let min_death_country_name = "Kingdom of Ascalon"; for(let i = 0; i < unique_countries.length-1; i++) { let country_name = unique_countries[i]; if(country_blacklist.includes(country_name)) continue; let data = base_mortality_per_country.filter(d => d["Country or Area"] == country_name)[0]; if(typeof data !== "undefined" & typeof data !== "NaN") { // Calculamos el numero de muertos en 2022: let excess_mortality_2015 = country_deaths_by_fossil_fuel_2015.filter(d => d.Entity == country_name)[0]["Excess mortality from fossil fuels"]; let mortality_2022 = base_mortality_per_country.filter(d => d["Country or Area"] == country_name & d["Year(s)"] == "2022")[0].Value; let mortality_2015 = base_mortality_per_country.filter(d => d["Country or Area"] == country_name & d["Year(s)"] == "2015")[0].Value; let excess_mortality_2022 = mortality_2022 * excess_mortality_2015 / mortality_2015; if(max_death < excess_mortality_2022) { max_death = excess_mortality_2022; max_death_country_name = country_name } // Calculamos el mínimo de muertos. Ignoramos los paises sin muertos (pues nos interesará hacer una comparación de volumen): if(min_death > excess_mortality_2022 & excess_mortality_2022 > 0) { min_death = excess_mortality_2022; min_death_country_name = country_name; } } } return [max_death_country_name, max_death, min_death_country_name, min_death]; }5d:T79d,// Classe MirrorCircle, necesaria para el gráfico mirror class MirrorCircle { constructor(p5, name, x, y, radius, up_percent, down_percent, up_text, down_text) { // Objeto p5, para acceder a los métodos de pintura: this.p5 = p5; // Nombre del país this.name = name; // Coordenadas del centro del círculo this.x = x; this.y = y; // Radio máximo del círculo: this.r = radius; // Radio del semicírculo inferior y superior this.up_radius = Math.sqrt(up_percent ) * radius; this.down_radius = Math.sqrt(down_percent ) * radius; // Texto del semicirculo superior e inferior this.up_text = up_text; this.down_text = down_text; } display() { this.p5.textAlign(this.p5.CENTER); this.p5.textSize(11); // Dibujamos el semicirculo inferior: this.p5.strokeWeight(1); this.p5.fill("crimson"); this.p5.stroke("maroon"); this.p5.arc(this.x, this.y, this.down_radius, this.down_radius, 0, 3.141592); this.p5.stroke(0); this.p5.text(this.down_text, this.x, this.y + (this.r / 2 + 15)); // Dibujamos el semicirculo superior: this.p5.fill("orange"); this.p5.stroke("orangered"); this.p5.arc(this.x, this.y, this.up_radius, this.up_radius, 3.141592, 0); this.p5.stroke(0); this.p5.fill("orangered") this.p5.text(this.up_text, this.x, this.y - (this.r / 2 + 5)); // Dibujamos la "rejilla" del círculo this.p5.strokeWeight(2); this.p5.stroke(0,10); this.p5.noFill(); this.p5.circle(this.x, this.y, this.r); this.p5.strokeWeight(1.25); this.p5.circle(this.x, this.y, Math.sqrt(0.5 ) * this.r); // Pintamos el nombre del país this.p5.fill(110); this.p5.textSize(16); this.p5.strokeWeight(0); /*if(this.up_radius > 1.5 * this.r) { this.p5.strokeWeight(0.5); this.p5.stroke("black"); }*/ this.p5.text(this.name, this.x, this.y - this.r - 10); } }5e:T572,class PersonParticle { constructor(p5, x, y, path_obj, color, n, disaster_index) { this.p5 = p5; this.n = n; this.disaster_index = disaster_index; this.position = this.p5.createVector(x,y); this.color = color; let path = path_obj.points; this.points = []; for (let i = 0; i < path.length; i++) { let point = path[i].copy(); point.x = point.x + this.p5.random(-10, 10); point.y = point.y + this.p5.random(-10, 10); this.points.push(point); } } run() { this.update(); this.display(); } update() { let destination = this.points[0]; let direction_x = destination.x - this.position.x; let direction_y = destination.y - this.position.y; let modulus = this.p5.sqrt(direction_x * direction_x + direction_y * direction_y); let desp = this.p5.createVector(direction_x / modulus, direction_y / modulus); desp.mult(4); this.position.add(desp); if(this.position.dist(destination) < 2) { this.points.shift(); } } display() { this.p5.strokeWeight(0); this.p5.fill(this.color); this.p5.ellipse(this.position.x, this.position.y, 5, 5); } hasArrived() { if(this.points.length == 0) { this.n.increase(); this.n.increase_disaster(this.disaster_index); return true; } return false; } }5f:T651,class PersonParticleGenerator { constructor(p5, x, y, associated_path, inventory, n) { this.p5 = p5; this.n = n; this.origin = this.p5.createVector(x,y); this.associated_path = associated_path; this.persons = []; this.inventory = inventory; this.energy = 0; this.energy_max = 1; this.flux = 5; } run() { this.persons = this.persons.filter(person => { person.run(); return !person.hasArrived(); }); this.energy = this.energy + this.p5.deltaTime; if(this.energy >= this.energy_max) { this.energy = 0; for(let i = 0; i < this.flux; i++) this.addParticle(); } } addParticle() { let total = this.inventory.reduce((a, b) => a + b, 0); if(total <= 0) return; let pick = this.p5.random(0,total); let index_selection = -1; let acum = 0; for(let i = 0; i < this.inventory.length; i++) { index_selection = index_selection + 1; if(pick <= this.inventory[i] + acum && this.inventory[i] > 0) break; acum = acum + this.inventory[i]; } this.inventory[index_selection] = this.inventory[index_selection] - 1; let palette = [this.p5.color(255, 255, 0),this.p5.color(255, 170, 0),this.p5.color(0, 170, 255),this.p5.color(170, 85, 255),this.p5.color(255, 0, 0),this.p5.color(170, 255, 255)]; let r = 40; let x = this.origin.x; let y = this.origin.y; this.persons.push(new PersonParticle(this.p5, x, y, this.associated_path, palette[index_selection],this.n, index_selection)); } }60:T6cc,| Name| Explanation | Graphic type | Tools | Done? | - | - | - | - | - | | Deathball (region) | CO2 emissions and the deaths has it caused on each region | Semi-interactive, 2d | Javascript + p5 | ✅ | Deathball (extrema) | Country with max deaths vs country with min | Static, 2d | Javascript + p5 | ✅ | Deathball (explorer) | Select a country and see the number of deaths | Interactive, 2d | Javascript + p5 | ✅ | Most polluting countries | Line graph w/ CHN, USA, IND, RU, JP, last 20 years | Semi-interactive , 2d | Javascript + Plot | ✅ | Line (form. Cloud) | CO2 emissions by country| Interactive 2d | Javascript + Plot | ✅ | Net | CO2 emissions, population and GDP by continent| Interactive 2d | Javascript | ❌ Won't do; section removed | Mirror | CO2 emissions and guilties by CRI| Non-interactive 2d | Javascript + p5 | ✅ | River | Climate refugees and type of disaster by continent | Static 2d | Javascript + p5 | ✔️ Would need some additional work, but we don't have time. | Ice | Historical thaw | Interactive 2d | Javascript | ❌ Won't do; section removed | Global living planet index (Regions) | Show the evolution of the GLPI per region | Interactive, 2d | Javascript + VL | ✅ | Coral bleaching (Hist.) | Coral bleaching events histogram | Static, 2d | Javascript + Plot | ✅ | Coral bleaching (Globe) | All coral bleaching events since 1960 | Interactive, 2.5d | Javascript + VL | ✅ | Sea | Emblematic territories/areas vulnerable to sea level rise | Interactive 2d | Javascript + p5 | ✅ | Lifeball | Number of deaths if global emissions decrease | Interactive dd | Javascript + Processing | ❌ Cannot be done. Our predictor model failed in the worst way possible, therefore we cannot build this.61:[{"id":"96cbdb5aaefff8937728f8481da0c763b6b7bafd71b8754c4f640e07f9057e7ba6f394d80721170276542ef82851e02bcfa2e4b70ee1457f8ae18f96ae37e2bc","href":"https://static.observableusercontent.com/files/96cbdb5aaefff8937728f8481da0c763b6b7bafd71b8754c4f640e07f9057e7ba6f394d80721170276542ef82851e02bcfa2e4b70ee1457f8ae18f96ae37e2bc","name":"03.jpg","type":"image/jpeg","lastModified":1675545796615.729,"size":205028},{"id":"993522cb06c42e8539332efd1fed3f17344e5c9a80bcb314d8ef1b18549f4daa23e782a29c54aee28fa334adefbabd575771391d0d9210d455abe0ed67ad3454","href":"https://static.observableusercontent.com/files/993522cb06c42e8539332efd1fed3f17344e5c9a80bcb314d8ef1b18549f4daa23e782a29c54aee28fa334adefbabd575771391d0d9210d455abe0ed67ad3454","name":"UNData_mort_rate.csv","type":"text/csv","lastModified":1675545796615.729,"size":491},{"id":"516f058db68bdb70af3ebed768e32ad975c3c76635d433c9e422d63fc2ee1abf00e340b6e70e70ede846a51bdd3aec0708ebe9aebdde73bac92d18755f6c4215","href":"https://static.observableusercontent.com/files/516f058db68bdb70af3ebed768e32ad975c3c76635d433c9e422d63fc2ee1abf00e340b6e70e70ede846a51bdd3aec0708ebe9aebdde73bac92d18755f6c4215","name":"UN_death2015_data_grouped.csv","type":"text/csv","lastModified":1675545796615.729,"size":106},{"id":"22690fa455a5aa60288e557c5993568425548f8dd263c99c1990f1053990b13975d8aec314e7c5f29eb0af773ebd65c4ab44d10f723b61ca9ca7a50c0072b0ca","href":"https://static.observableusercontent.com/files/22690fa455a5aa60288e557c5993568425548f8dd263c99c1990f1053990b13975d8aec314e7c5f29eb0af773ebd65c4ab44d10f723b61ca9ca7a50c0072b0ca","name":"person.png","type":"image/png","lastModified":1675545796615.729,"size":1630},{"id":"2c2426385cd7333dcffd1b94c733a269e4f910f0640ef189fe01f97483cacd8674d914cfc5baf2e6c72cfc32128d5d3713a69fe0aac48f0000f3b0178b74a170","href":"https://static.observableusercontent.com/files/2c2426385cd7333dcffd1b94c733a269e4f910f0640ef189fe01f97483cacd8674d914cfc5baf2e6c72cfc32128d5d3713a69fe0aac48f0000f3b0178b74a170","name":"base_mortality_per_country.csv","type":"text/csv","lastModified":1675545796615.729,"size":23118},{"id":"1cf5de0f5df298f883279244f0fef49a9158a21b405dced9c28767fbee5d0e7222bbf8f3acb9420ec330d40fb8e02d2d5f2ac780d8b17ea8587c9149046d2fa0","href":"https://static.observableusercontent.com/files/1cf5de0f5df298f883279244f0fef49a9158a21b405dced9c28767fbee5d0e7222bbf8f3acb9420ec330d40fb8e02d2d5f2ac780d8b17ea8587c9149046d2fa0","name":"coral-bleaching-events.csv","type":"text/csv","lastModified":1675545796615.729,"size":4682},{"id":"7b1aa98eadd3dd746f06d2ebe9d924728f3f26551af1c6761b4da5f0729b545e4bc32ac3529ed57e3fec747c72931f67fc301ea71edde580cf19f6862ed59271","href":"https://static.observableusercontent.com/files/7b1aa98eadd3dd746f06d2ebe9d924728f3f26551af1c6761b4da5f0729b545e4bc32ac3529ed57e3fec747c72931f67fc301ea71edde580cf19f6862ed59271","name":"coral_bleaching_flattened_cleaned.csv","type":"text/csv","lastModified":1675545796615.729,"size":1881723},{"id":"3cf94f44e596eab1262d2a955901cdb49d3b56ac18e9395e71da7d2ec4f79975da41ef5567888692673173678bb352601f782931394d88c34052114f460072a6","href":"https://static.observableusercontent.com/files/3cf94f44e596eab1262d2a955901cdb49d3b56ac18e9395e71da7d2ec4f79975da41ef5567888692673173678bb352601f782931394d88c34052114f460072a6","name":"country_deaths_by_fossil_fuels_2015.csv","type":"text/csv","lastModified":1675545796615.729,"size":4423},{"id":"c1aa38772711d035b1213a2bd49803fd00394348a6510aaffc052bdf9355647e7b6bd01f78a1a485f82fbd56e81de49c6aa919d4248b766848b2944b78b62dcf","href":"https://static.observableusercontent.com/files/c1aa38772711d035b1213a2bd49803fd00394348a6510aaffc052bdf9355647e7b6bd01f78a1a485f82fbd56e81de49c6aa919d4248b766848b2944b78b62dcf","name":"global-living-planet-index.csv","type":"text/csv","lastModified":1675545796615.729,"size":21197},{"id":"6c5c7f5da0076e25a0108ef94a35fe8765c4f925be0089e4eeb8a3216de5e6a394402a3d2c3d116f732d87f67e2d913d26d74933fecf863457c0f2668ac8fbd3","href":"https://static.observableusercontent.com/files/6c5c7f5da0076e25a0108ef94a35fe8765c4f925be0089e4eeb8a3216de5e6a394402a3d2c3d116f732d87f67e2d913d26d74933fecf863457c0f2668ac8fbd3","name":"projected-global-mean-sea-level.csv","type":"text/csv","lastModified":1675545796615.729,"size":5791},{"id":"49321554d5ea1aa6d67737c5591e5cc24754b67e686e72852663516e231ceb8c4ed7b491dbedd31869b1df471459564ac48c4b942461d534fa4ba563e5b2573b","href":"https://static.observableusercontent.com/files/49321554d5ea1aa6d67737c5591e5cc24754b67e686e72852663516e231ceb8c4ed7b491dbedd31869b1df471459564ac48c4b942461d534fa4ba563e5b2573b","name":"disaster_displace_region_condensed_long.csv","type":"text/csv","lastModified":1675545796615.729,"size":547},{"id":"1797624242d9581e57314a9d2933d9e85777f44cc66f85401ef7d6c8e1f939013e1d1f366997e6e7b3b47f493d1700a137fcf154877d62a4ea1efe52f5ac3cd1","href":"https://static.observableusercontent.com/files/1797624242d9581e57314a9d2933d9e85777f44cc66f85401ef7d6c8e1f939013e1d1f366997e6e7b3b47f493d1700a137fcf154877d62a4ea1efe52f5ac3cd1","name":"venice_silhouette@1.png","type":"image/png","lastModified":1675545796615.729,"size":1546},{"id":"a2aea955195dea3abfe966901daa2cdadd350634c1a789d0a4510173ef62e33258bddb784c56513482bb714feec7967e9aba549cf24055c03e01323b8d844110","href":"https://static.observableusercontent.com/files/a2aea955195dea3abfe966901daa2cdadd350634c1a789d0a4510173ef62e33258bddb784c56513482bb714feec7967e9aba549cf24055c03e01323b8d844110","name":"tuna_silh.png","type":"image/png","lastModified":1675545796615.729,"size":1425},{"id":"718e804f5fd5806a9484b70091d952bbda79ab19508d54ec4cffc47366413175735721451947d3b0764adaf3353b116872fe31d4b8535986a1a705906f7eb60a","href":"https://static.observableusercontent.com/files/718e804f5fd5806a9484b70091d952bbda79ab19508d54ec4cffc47366413175735721451947d3b0764adaf3353b116872fe31d4b8535986a1a705906f7eb60a","name":"fish_3_silh.png","type":"image/png","lastModified":1675545796615.729,"size":1018},{"id":"c4065f7ad53a9c429d247c91b061704d0ae4ad40812cf457672838a1d88d8a21d4bb25442fc2c2218d56176efcddc42f05b8e8f4b4ab1b82de6158458bd4e7df","href":"https://static.observableusercontent.com/files/c4065f7ad53a9c429d247c91b061704d0ae4ad40812cf457672838a1d88d8a21d4bb25442fc2c2218d56176efcddc42f05b8e8f4b4ab1b82de6158458bd4e7df","name":"beach@2.png","type":"image/png","lastModified":1675545796615.729,"size":10020},{"id":"49e5b3dfcd3baf58fc6dd4878adc29376ad2cf943b328a1f54cad6a16cc54ab41fceda7c2d749c13cd92dbfe24f75079b7cdcd5f777783cf78a774bc36053c7b","href":"https://static.observableusercontent.com/files/49e5b3dfcd3baf58fc6dd4878adc29376ad2cf943b328a1f54cad6a16cc54ab41fceda7c2d749c13cd92dbfe24f75079b7cdcd5f777783cf78a774bc36053c7b","name":"kraken.png","type":"image/png","lastModified":1675545796615.729,"size":6414},{"id":"fa491e65a72fa644e6783882a5d6a92c296ec55bcddb741bb2623705d7121d8520c4281d61f8acc5e471fcacfbf2269d42bd859630ab4c838549773a89bf7127","href":"https://static.observableusercontent.com/files/fa491e65a72fa644e6783882a5d6a92c296ec55bcddb741bb2623705d7121d8520c4281d61f8acc5e471fcacfbf2269d42bd859630ab4c838549773a89bf7127","name":"marshall_sil.png","type":"image/png","lastModified":1675545796615.729,"size":5765},{"id":"907880608fed13d65a4d5e259de3fc205e738c1abda6d6a688ecadb32a0fb0c9d567305bf398d865614c26d9916563c9286a94ef22c980ca145e08346610e2d0","href":"https://static.observableusercontent.com/files/907880608fed13d65a4d5e259de3fc205e738c1abda6d6a688ecadb32a0fb0c9d567305bf398d865614c26d9916563c9286a94ef22c980ca145e08346610e2d0","name":"flamencos.png","type":"image/png","lastModified":1675545796615.729,"size":2384},{"id":"7bea7cdcdc781d8eacb355d34d81b2584713532c9e39c5a904edce4ec18ab55d67fa082219225f08ef52696be482ab8f4f0534058c8ea7bf627375ec356de5ec","href":"https://static.observableusercontent.com/files/7bea7cdcdc781d8eacb355d34d81b2584713532c9e39c5a904edce4ec18ab55d67fa082219225f08ef52696be482ab8f4f0534058c8ea7bf627375ec356de5ec","name":"maldives_silh.png","type":"image/png","lastModified":1675545796615.729,"size":5464},{"id":"c04bba4c2170b1ab9c8a0ce706977f22d8ddfc5a108c5f328d0978eff16f69bd6c92dd029f6622752945d900a2ab298d60c391a78b1acd0c45768b2fbb6d35c5","href":"https://static.observableusercontent.com/files/c04bba4c2170b1ab9c8a0ce706977f22d8ddfc5a108c5f328d0978eff16f69bd6c92dd029f6622752945d900a2ab298d60c391a78b1acd0c45768b2fbb6d35c5","name":"manhattan_silhouette.png","type":"image/png","lastModified":1675545796615.729,"size":3466},{"id":"7c055c71a441e01f09c218e46147e346142a08cfba5bea44d5ef42de32537e82e6cb29b256255bd5f7a9046725c993a6ce62032b56025d7b4ec6b3746af80315","href":"https://static.observableusercontent.com/files/7c055c71a441e01f09c218e46147e346142a08cfba5bea44d5ef42de32537e82e6cb29b256255bd5f7a9046725c993a6ce62032b56025d7b4ec6b3746af80315","name":"fish_1_silh.png","type":"image/png","lastModified":1675545796615.729,"size":1026}] 29:{"id":"04114f1a33020119","slug":null,"title":"CO2 Emissions & Guilties","thumbnail":"453a37089bc038af8a6099f93fd6f1927f107d128dcc0e16874da1717b1fb440","access_level":"public","create_time":"$D2023-02-04T21:23:16.615Z","update_time":"$D2023-02-04T21:23:16.615Z","view_time":null,"first_public_time":"$D2023-02-04T21:23:16.615Z","has_unpublished_edits":null,"fork":{"id":"c767eec86b39e0dd","slug":null,"title":"CO2 Emissions & Guilties","owner":{"id":"3df85993da5ddb27","login":"denissecarvajal","name":"Denisse Carvajal Bruce"}},"stars":0,"starred":false,"owner":{"type":"team","id":"cf0cffacb5e3b6d7","login":"vogelmann","name":"Vogelmann","avatar_url":"https://avatars-next.observableusercontent.com/14e783e7de3ed861fe13f88f792dbecaf952c64d82da1fcd4d9583136876450d","tier":"starter_2024","bio":"🐦⚙️ Level 28 Aarakocra Tinkerer ||\n🔢♾️ Mathematician & Data Scientist ||\n🚀🤖 PhD (AI + Astrodynamics)\n☕💀 Fueled by caffeine and spite.","followed_by_you":false,"follows_you":false},"version":2232,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ddb96b3865d46af6","login":"vogelmann","name":"Vogelmann","avatar_url":"https://avatars-next.observableusercontent.com/14e783e7de3ed861fe13f88f792dbecaf952c64d82da1fcd4d9583136876450d","tier":null,"bio":"🐦⚙️ Level 28 Aarakocra Tinkerer ||\n🔢♾️ Mathematician & Data Scientist ||\n🚀🤖 PhD (AI + Astrodynamics)\n☕💀 Fueled by caffeine and spite.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"ddb96b3865d46af6","login":"vogelmann","name":"Vogelmann","avatar_url":"https://avatars-next.observableusercontent.com/14e783e7de3ed861fe13f88f792dbecaf952c64d82da1fcd4d9583136876450d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"f9a8ef1628983b82","slug":"msc-tasks-exercises","title":"MSc DS tasks & exercises","owner":{"id":"cf0cffacb5e3b6d7","login":"vogelmann","name":"Vogelmann"}},"type":"notebook","body":{"titling":"auto","title":"CO2 Emissions & Guilties","cells":[{"id":597,"value":"# CO2 Emissions & Guilties","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":485,"value":"untitled1 = FileAttachment(\"03.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1668,"value":"ℹ️ *We recommend using **Firefox** or **Safari** to read this notebook.*
\nℹ️ *A screen width of at least **1200px** is required for some visualizations, and some of them **may also take a while to load**. Go grab a coffee* ☕*.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":494,"value":"toc({\n title: 'Contents',\n headers: 'h2, h3'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1232,"value":"---\n## VIsets\n📈 Below is a set of blocks where each one contains:\n * The question that the visualization(s) answer.\n * The visualization(s) + some tips on how to use them.\n * The findings that the visualization(s) help to convey.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":389,"value":"---\n

\n How many deaths have CO2 emissions caused world-wide?\n

\n Which are the most polluting countries? (by total emissions)\n

\n Emissions in your country: how does it fare in comparison to others?\n

\n Are the most polluting countries the ones that suffer the most?\n

\n How many climate refugees by type of disaster are there per region?\n

\n How has climate change affected biodiversity?\n

\n Which territories are vulnerable to sea level rise?\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1458,"value":"**About the context. ** 52% of all CO2 emissions that humans emit is absorbed and neutralized by the oceans and forests. 48% stays in the atmosphere and causes climate change.\nTide gauge measurements show that between 1901 and 2018, the global average sea level increase between 15 and 25 cm. Seawater penetrates areas further and further from the coast, which can generate catastrophic consequences such as erosion, flooding of wetlands, contamination of aquifers and agricultural land, and loss of habitat for fish, birds and plants. (Source: [La Vanguardia](https://www.lavanguardia.com/natural/20221111/8602603/pep-canadell-frenar-temperatura-debajo-meta-1-5-oc.html#foto-4)) \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1460,"value":"$59","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1065,"value":"viewof climate_scenario_selection = Inputs.radio([\"Current (RCP 8.5)\", \"Moderate (RCP 4.5)\", \"Strict (RCP 2.6)\"], {label: \"Emission reduction scenario:\", value: \"Current (RCP 8.5)\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1062,"value":"//viewof year_slider_sea = Inputs.range([2022, 2100], {value: 2022, step: 1, label: \"Year\"})\nviewof year_slider_sea = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1861,"value":"ℹ️ *You can move the above slider to change the current year.*
\nℹ️ *Each slab represents a region at risk.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1068,"value":"$5a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1608,"value":"**About the findings.**\n* If we maintain our **current** emissions, in 100 more years, places like Venice and Delta del Ebre would disappear. By 2300, places such as the Maldives and the Marshall islands will disappear, along most coastal populations (such as the lower parts of Manhattan, New York).\n* If we keep our emissions **moderate**, places like Venice and Delta del Ebre will last for another 200 years before disappearing.\n* If we **strictly lower** our emissions, by 2300 the damage will be limited, and only the lowest coastal regions will be affected.\n* The low-lying islands that appear in the visualization are home to some threatened species of animals, such as the Tree Kangaroo, the Laysian Albattross or the Mariana bat, to name a few. In addition, the majority birds that inhabit these islands are completely flightless and therefore very vulnerable to the loss of land.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":417,"value":"---\n## Other questions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":532,"value":"$5b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":513,"value":"---\n## Addendum","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":631,"value":"### Images","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":634,"value":"Human figure image, used by the \"Deathball\" visualizations:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":636,"value":"person_image_URL = await FileAttachment(\"person.png\").url(); // Imagen de personita para la bola de muertos del gráfico \"Deathball\". Muy mórbido todo.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"
\nWorld countries vectorial data, needed for the GLPI visualization. It could -probably- be merged with the 'world' object (see 'Libraries') section; however, I do not have enough time to try and debug this.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1010,"value":"countries_url_glpi = \"https://raw.githubusercontent.com/deldersveld/topojson/master/world-countries-sans-antarctica.json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1709,"value":"Silhouettes used in the sea level viz:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1711,"value":"venice_image_URL = await FileAttachment(\"venice_silhouette@1.png\").url();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1864,"value":"flamenco_image_URL = await FileAttachment(\"flamencos.png\").url();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1877,"value":"manhattan_image_URL = await FileAttachment(\"manhattan_silhouette.png\").url();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1902,"value":"fish1_image_URL = await FileAttachment(\"fish_1_silh.png\").url();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1914,"value":"fish2_image_URL = await FileAttachment(\"tuna_silh.png\").url();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1920,"value":"fish3_image_URL = await FileAttachment(\"fish_3_silh.png\").url();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1933,"value":"totally_ordinary_image_URL = await FileAttachment(\"kraken.png\").url(); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1950,"value":"beach_image_URL = await FileAttachment(\"beach@2.png\").url();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1975,"value":"maldives_image_URL = await FileAttachment(\"maldives_silh.png\").url();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1988,"value":"marshall_image_URL = await FileAttachment(\"marshall_sil.png\").url();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"### Data sources & Data processing","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":685,"value":"Pollution deaths from fossil fuel (per region and country). Source: https://ourworldindata.org/grapher/pollution-deaths-from-fossil-fuels","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":641,"value":"deaths_by_pollution_2015_data = FileAttachment(\"UN_death2015_data_grouped.csv\").csv() // Fuente: https://ourworldindata.org/grapher/pollution-deaths-from-fossil-fuels | Los datos se han grupado por regiones del mundo mediante un script Python. ¿Por qué python? Por que si lo hubiera hecho con observable aún estaría agrupando datos el día en que el sol se convierta en gigante roja.","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"country_deaths_by_fossil_fuel_2015 = FileAttachment(\"country_deaths_by_fossil_fuels_2015.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":688,"value":"
\nMortality rate by world region and country. Source: https://data.un.org/Data.aspx?d=PopDiv&f=variableID%3A65","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":645,"value":"base_mortality_rate_by_region = FileAttachment(\"UNData_mort_rate.csv\").csv(); // Fuente: https://data.un.org/Data.aspx?d=PopDiv&f=variableID%3A65","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":859,"value":"base_mortality_per_country = FileAttachment(\"base_mortality_per_country.csv\").csv(); // Fuente: https://data.un.org/Data.aspx?d=PopDiv&f=variableID%3A65","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"Countries with maximum an minimum deaths in 2022 (approximation from 2015 data, taking into account the increase in the mortality rate in 2022 vs. 2015)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":868,"value":"$5c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"
\nCO2 and other greenhouse gases emissions per country, region, etc. Source: Our World in data: https://nyc3.digitaloceanspaces.com/owid-public/data/co2/owid-co2-data.json","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":682,"value":"emissions = (\n await fetch(\n \"https://nyc3.digitaloceanspaces.com/owid-public/data/co2/owid-co2-data.json\"\n )\n).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"Sum of emissions of all countries during the past 20 years (from 2022 backwards). We need this for the mirror visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":704,"value":"emisiones_2022 = {\n let array_emisiones = {};\n let num_paises = Object.keys(emissions).length;\n for(let i = 0; i < num_paises; i++)\n {\n let country_name = Object.keys(emissions)[i];\n\n\n let size = emissions[country_name].data.length;\n\n if(size < 20) continue;\n\n let emisiones = 0;\n for(let j = 0; j < 20; j ++)\n {\n let index_to_read = size - 1 - j;\n emisiones = emisiones + emissions[country_name].data[index_to_read].co2;\n \n }\n\n if(!isNaN(emisiones))\n array_emisiones[country_name] = emisiones;\n\n }\n\n return array_emisiones;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"
\nWe can use this 'emisiones_2022' array to effortlessly get the name of all countries:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1254,"value":"nombres_paises = Object.keys(emisiones_2022);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"
\nTop 10 countries with higher CRI (custom dataset). Data source : https://reliefweb.int/attachments/b6a6928e-214a-3398-bc01-1460f32bb3ad/Global%20Climate%20Risk%20Index%202021_1.pdf
\nData could not be found in any downloadable format (such as .csv or .json). Therefore, we have to create this dataset manually from the contents of page 8.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":696,"value":"top_10_CRI = ({\n 0: {Entity: \"Mozambique 🇲🇿\", CRI: 2.67, CO2 : emisiones_2022[\"Mozambique\"]},\n 1: {Entity: \"Zimbabwe 🇿🇼\", CRI: 6.17, CO2 : emisiones_2022[\"Zimbabwe\"]},\n 2: {Entity: \"The Bahamas 🇧🇸\", CRI: 6.5, CO2 : emisiones_2022[\"Bahamas\"]},\n 3: {Entity: \"Japan 🇯🇵\", CRI : 14.5, CO2 : emisiones_2022[\"Japan\"]},\n 4: {Entity: \"Malawi 🇲🇼\", CRI : 15.17, CO2 : emisiones_2022[\"Malawi\"]},\n 5: {Entity: \"Isl. Rep. of Afghanistan 🇦🇫\", CRI : 16.0, CO2 : emisiones_2022[\"Afghanistan\"]},\n 6: {Entity: \"India 🇮🇳\", CRI : 16.67, CO2 : emisiones_2022[\"India\"]},\n 7: {Entity: \"South Sudan 🇸🇸\" , CRI: 17.33, CO2 : emisiones_2022[\"South Sudan\"]},\n 8: {Entity: \"Niger 🇳🇪\", CRI: 18.17, CO2 : emisiones_2022[\"Niger\"]},\n 9: {Entity: \"Bolivia 🇧🇴\", CRI : 19.67, CO2 : emisiones_2022[\"Bolivia\"]}\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"
\nWe also need to find the CRI of the top 10 most polluting countries. Let's begin by sorting the countries in the 'emissiones_2022' array in accordance to their average total emisisons:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":709,"value":"Object.entries(emisiones_2022).sort(function(a,b){return b[1]-a[1]});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"From the previous array, we select the first 10 countries that appear (discarding those results that aren't properly countries):\n\n * China (id 7)\n * United States (id 13)\n * India (id 21)\n * Rusia (id 22)\n * Japan (id 25)\n * Germany (id 30)\n * Iran (id 31)\n * South Korea (id 32)\n * Canada (id 33)\n * Saudi Arabia (id 34)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":723,"value":"top_10_CO2 = ({\n 0: {Entity: \"China 🇨🇳\", CRI: 42.83, CO2 : emisiones_2022[\"China\"]},\n 1: {Entity: \"United States 🇺🇸\", CRI: 23.83, CO2 : emisiones_2022[\"United States\"]},\n 2: {Entity: \"India 🇮🇳\", CRI: 16.67, CO2 : emisiones_2022[\"India\"]},\n 3: {Entity: \"Russia 🇷🇺\", CRI: 50.67, CO2 : emisiones_2022[\"Russia\"]},\n 4: {Entity: \"Japan 🇯🇵\", CRI: 14.5, CO2 : emisiones_2022[\"Japan\"]},\n 5: {Entity: \"Germany 🇩🇪\", CRI : 61.33, CO2 : emisiones_2022[\"Germany\"]},\n 6: {Entity: \"Iran 🇮🇷\", CRI : 27.00, CO2: emisiones_2022[\"Iran\"]},\n 7: {Entity: \"South Korea 🇰🇷\", CRI : 64.00, CO2: emisiones_2022[\"South Korea\"]},\n 8: {Entity: \"Canada 🇨🇦\", CRI : 65.67, CO2: emisiones_2022[\"Canada\"]},\n 9: {Entity: \"Saudi Arabia 🇸🇦\", CRI: 73.00, CO2: emisiones_2022[\"Saudi Arabia\"]}\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"
Also, we define the world's average CRI (from the GermanWatch data):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1158,"value":"world_avg_CRI = 79.0592222222222\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"
Data for the GLPI. Source: https://ourworldindata.org/grapher/global-living-planet-index","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":996,"value":"glpi_raw = FileAttachment(\"global-living-planet-index.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"
\nData for Coral Bleaching first visualization (histogram). \nSource: https://ourworldindata.org/grapher/coral-bleaching-events","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":910,"value":"coral_bleaching_events_raw = FileAttachment(\"coral-bleaching-events.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"
\nData for Coral Bleaching second visualization (GLOBE). Source: https://zenodo.org/record/6780843 | Data has been cleaned and flatteneed using a Python+Pandas script.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":951,"value":"coralbleaching_occurrences_raw = FileAttachment(\"coral_bleaching_flattened_cleaned.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"
\nGlobal avg. sea rise prediction up to year 2100, according to Euro. Env. Agency. Source: https://www.eea.europa.eu/data-and-maps/daviz/projected-global-mean-sea-level#tab-dashboard-01","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1044,"value":"sea_level_data = FileAttachment(\"projected-global-mean-sea-level.csv\").csv(); // Fuente: https://www.eea.europa.eu/data-and-maps/daviz/projected-global-mean-sea-level#tab-dashboard-01","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"Global avg. sea levels in 2300 by emission scenario, according to NASA & NOAA. Source: https://earthobservatory.nasa.gov/images/148494/anticipating-future-sea-levels\nResults are not into a readable file (such as .csv, .json, whatever) so we copy them by hand.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1052,"value":"RCP_85_final = 3.9;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"RCP_45_final = 1.6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1058,"value":"RCP_26_final = 0.8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1545,"value":"
\nDisplacement data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1547,"value":"displacement_data_URL = await FileAttachment(\"disaster_displace_region_condensed_long.csv\").url();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"### Custom classes and functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":734,"value":"**MirrorCircle** (p5) - required by the Mirror visualization:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":717,"value":"$5d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"**set_bar_back_size** (Javascript) - required for the coral bleaching histogram.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":928,"value":"function set_back_bar_size(d)\n{\n var moderate = parseInt(d[\"Moderate bleaching events (1-30% bleached)\"]);\n var severe = parseInt(d[\"Severe bleaching events (>30% bleached)\"]);\n\n return severe + moderate\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"
\n**Counter (p5)** - manages the total and disaster counters in the *River* visualization:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1513,"value":"class Counter{\n constructor(p5)\n {\n this.p5 = p5;\n this.n = 0;\n\n this.drought = 0;\n this.ext_temp = 0;\n this.flood = 0;\n this.storm = 0;\n this.wildfire = 0;\n this.svc = 0;\n }\n\n increase()\n {\n this.n = this.n + 1;\n }\n\n increase_disaster(disaster_num)\n {\n switch (disaster_num) {\n case 0:\n this.drought = this.drought + 1;\n break;\n case 1:\n this.ext_temp = this.ext_temp + 1;\n break;\n case 2:\n this.flood = this.flood + 1;\n break;\n case 3:\n this.storm = this.storm + 1; \n break;\n case 4:\n this.wildfire = this.wildfire + 1;\n break;\n case 5:\n this.svc = this.svc + 1;\n break;\n // \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":1519,"value":"
\n**Path** (p5) - defines a Path for the lil' humans to follow in the *River* visualization:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1525,"value":"class Path {\n\n constructor(p5) {\n this.p5 = p5;\n this.radius = 20;\n this.points = [];\n }\n\n /////////////////////////////\n addPoint(x, y) {\n let point = this.p5.createVector(x, y);\n this.points.push(point);\n }\n\n /////////////////////////////\n display() {\n this.p5.stroke(0);\n \n // stroke (0, 100); strokeWeight(20); \n this.p5.noFill();\n this.p5.beginShape();\n for (let i = 0; i < this.points.length; i++) {\n this.p5.vertex(this.points[i].x, this.points[i].y);\n }\n this.p5.endShape();\n // stroke(0); strokeWeight(1);\n }\n\n getPoints()\n {\n return this.points.copy();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1528,"value":"
\n**PersonParticle** (p5) - person object for the *River* visualization. Note: this class should be optimized in order to use less memory.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1530,"value":"$5e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1533,"value":"
\n**PersonParticleGenerator** (p5) - generates PersonParticles for each country. Used by the *River* viz.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1535,"value":"$5f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1541,"value":"
\n**InventoryRetriever** (p5) - needed for the *River* visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1543,"value":"class InventoryRetriever {\n constructor(p5)\n {\n this.p5 = p5;\n this.table = this.p5.loadTable(displacement_data_URL, 'csv', 'header');\n }\n\n retrieve_country_inventory(country_name)\n {\n\n let val_raw = this.table.getRows().filter(row => {\n return row.getString('Region') == country_name;\n });\n\n let val_to_return = [val_raw.length];\n for(let i = 0; i < val_raw.length; i++)\n {\n val_to_return.push(val_raw[0][\"arr\"][i]);\n }\n\n //val_to_return.shift();\n\n return val_to_return;\n\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1120,"value":"**Color picker helper**, for coding assistance:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1114,"value":"viewof colorHighlight = color({\n value: \"#ff0080\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"### Libraries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":621,"value":"**toc** library. This will help us build tables of contents:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"
\n**p5** library. This will allow us to use processing in our data visualizations:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":613,"value":"import {p5} from \"@tmcw/p5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":901,"value":"
\n**textcolor** package, for adding color to text:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":903,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":957,"value":"
\n**topojson world data**, needed when drawing the world (duh.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":959,"value":"world = (await require('vega-datasets@1.25'))['world-110m.json']()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1131,"value":"
\n**Interval**, to create interval range sliders:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1133,"value":"import {interval} 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":1001,"value":"
\nSome **additional d3 methods**, necessary for the GLPI visualization. We will save them with a custom name in order to distinguish them from the vanilla d3 methods:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1003,"value":"d3_glpi = require.alias({\n \"d3-array\": \"d3@5\",\n \"d3-axis\": \"d3@5\",\n \"d3-dispatch\": \"d3@5\",\n \"d3-drag\": \"d3@5\",\n \"d3-ease\": \"d3@5\",\n \"d3-scale\": \"d3@5\",\n \"d3-selection\": \"d3@5\",\n \"d3-transition\": \"d3@5\"\n})(\"d3@5\", \"d3-simple-slider@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1107,"value":"
\n**Color** and **slider**, for color picking.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1109,"value":"import {slider, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"
\n### VIsummary","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"$60","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":453,"value":"### Authors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":470,"value":"| Student | Email | Course | Date |\n| - | - | - | - |\n| Isaac de Palau | idepalau@gmail.com | Visualització de la informació UDG | 2023.01.20 |\n| Denisse Carvajal Bruce | denissecarvajal@gmail.com | Visualització de la informació UDG | 2023.01.20 |","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W61","stdlib":"1"}} 24:null