25:["$","title",null,{"children":"Processing p5 testing | Vogelmann | Observable"}] 49:T9bd,p5(sketch => { // Dimensiones del canvas: let canvas_width = 800; let canvas_height = 600; let max_persons_to_draw; let current_persons_drawn; let person_img; let deathball_center_x = canvas_width / 2 ; let deathball_center_y = canvas_height / 2; let deathball_radius = 200; sketch.calculate_deathball_radius = function() { return Math.min(200, 3*max_persons_to_draw); } 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.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(); person_img = sketch.loadImage(person_image_URL); sketch.frameRate(max_persons_to_draw / 5); sketch.background(0); sketch.fill(255); sketch.textSize(20); sketch.text(selected_deathball_country.concat(" ⇝ ").concat(String(Math.round(max_persons_to_draw))).concat(" 💀"), 10, 25); } 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); current_persons_drawn = current_persons_drawn + 1; // Condición de parada. if(current_persons_drawn == parseInt(Math.round(max_persons_to_draw))) sketch.noLoop(); } })4a:T7fc,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 } 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]; }4b:Ta17,p5(sketch => { // Dimensiones del canvas: let canvas_width = 1000; let canvas_height = 750; let max_persons_to_draw1; let max_persons_to_draw2; let deathball1_center_x = canvas_width / 3 + 10; let deathball1_center_y = canvas_height / 2 - 10; let deathball1_radius; let deathball2_center_x = canvas_width - 150 ; let deathball2_center_y = canvas_height / 2; let deathball2_radius = 5; let person_img; sketch.calculate_deathball_radius = function(max_1, max_2) { deathball1_radius = Math.min(400, 3 * max_1); deathball2_radius = Math.min(200, 3 * max_2); } sketch.preload = function() { 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("TOBAGO:\n".concat(String(parseInt(max_persons_to_draw2))).concat(" death"),deathball2_center_x + 20, deathball2_center_y -50); } })4c:T239d,p5(sketch => { // Dimensiones del canvas: let canvas_width = 1200; let canvas_height = 1000; // Población total de cada región / continente: //const africa_population = world_population_by_region_data.filter(d => d.Year == 2022 & d.Entity == "Africa")[0]["Population"]; //const oceania_population = world_population_by_region_data.filter(d => d.Year == 2022 & d.Entity == "Oceania")[0]["Population"]; //const europe_population = world_population_by_region_data.filter(d => d.Year == 2022 & d.Entity == "Europe")[0]["Population"]; //const asia_population = world_population_by_region_data.filter(d => d.Year == 2022 & d.Entity == "Asia")[0]["Population"]; //const SA_population = world_population_by_region_data.filter(d => d.Year == 2022 & d.Entity == "South America")[0]["Population"]; //const NA_population = world_population_by_region_data.filter(d => d.Year == 2022 & d.Entity == "North America")[0]["Population"]; // Factor de reducción const rf = 1000; // Número de regiones const N_regions = 6; 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); 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); 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); 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); 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); 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); // Número de muertos por continente: //const NA_ded = Math.round(number_of_deaths_from_concentration(C_2022, C_0, S, NA_population) / rf); //const SA_ded = Math.round(number_of_deaths_from_concentration(C_2022, C_0, S, SA_population) / rf); //const asia_ded = Math.round(number_of_deaths_from_concentration(C_2022, C_0, S, asia_population) / rf); //const africa_ded = Math.round(number_of_deaths_from_concentration(C_2022, C_0, S, africa_population) / rf); //const europe_ded = Math.round(number_of_deaths_from_concentration(C_2022, C_0, S, europe_population) / rf); //const oceania_ded = Math.round(number_of_deaths_from_concentration(C_2022, C_0, S, oceania_population) / 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 = ["red", "coral", "crimson", "darkorange", "firebrick", "lightsalmon"]; // Offset y 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); slider = sketch.createSlider(0, 300, 0, 0.1); slider.position(slider_posx, slider_posy); slider.style("transform","rotate(90deg)"); // Desactivamos el suavizado: sketch.noSmooth(); //Queremos que todos los textos estén alineados // al centro de sus coordenadas sketch.textAlign(sketch.CENTER); sketch.frameRate(10); } 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; 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, atmospheric CO2 concentrations reached an average of 417 parts per million", canvas_width / 2, 50); sketch.text("How many deaths will this cause 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 + 100; let deathball_center_y = 330; let deathball_radius = 200; // 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); } 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); //slider.position(slider_posx, slider_posy); for(let i = 0; i < N_regions; i++) { sketch.fill(region_colors[i]); let col_center_x = 100 + 200*i; let col_start_y = 470+150; sketch.text(region_names[i], col_center_x, col_start_y) let d_max = parseInt(death_array[i]); let cont_dx = 0; let cont_dy = 0; let pos_x, pos_y; for(let d = 0; d <= d_max; d ++) { pos_x = col_center_x - 50 + 10 * cont_dx; pos_y = col_start_y + 30 + 10 * cont_dy; cont_dx = cont_dx + 1; if(cont_dx == 10) { cont_dx = 0; cont_dy = cont_dy + 1; } sketch.square(pos_x, pos_y, 7); } sketch.text(String(d_max+1).concat("k"), col_center_x, pos_y + 50); // //sketch.fill(200); //sketch.text("Extra deaths: ".concat(String(count)).concat("k"), 50, 50+50*i); } //sketch.text("", 30, pos_y + 100); } })4d:T23ae,{ // 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)); const map = vl.markGeoshape({fill:"lightgrey", stroke: "lightgrey"}) .data(vl.topojson(countries_url_glpi).feature("countries1")) .width(1000) .height(600) ///// 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 : "black"}) .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 : "black"}) .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 : "black"}) .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 : "black"}) .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 : "black"}) .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 : "black"}) .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 : "black"}) .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 : "black"}) .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 : "black"}) .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 : "black"}) .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 ).render() }4e:T1d9d,p5(sketch => { // 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(); // 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]; 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]; 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]; 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]; 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]; 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]; 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); }; })4f: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)); } }50: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; } }51:[{"id":"22690fa455a5aa60288e557c5993568425548f8dd263c99c1990f1053990b13975d8aec314e7c5f29eb0af773ebd65c4ab44d10f723b61ca9ca7a50c0072b0ca","href":"https://static.observableusercontent.com/files/22690fa455a5aa60288e557c5993568425548f8dd263c99c1990f1053990b13975d8aec314e7c5f29eb0af773ebd65c4ab44d10f723b61ca9ca7a50c0072b0ca","name":"person.png","type":"image/png","lastModified":1672327947166.692,"size":1630},{"id":"6aa233e80c2331f9a99cd3b2b33211019d44a1b28758b95f23c7f9601854dd211c9a492089e6e3da5efbe8720090b46d793225da07d8474d34c844dfec60531d","href":"https://static.observableusercontent.com/files/6aa233e80c2331f9a99cd3b2b33211019d44a1b28758b95f23c7f9601854dd211c9a492089e6e3da5efbe8720090b46d793225da07d8474d34c844dfec60531d","name":"disaster_displace_region.csv","type":"text/csv","lastModified":1672327956219.402,"size":7940},{"id":"97c8497c201e4ec4630355eed963a679416ee15a2d5cd13a922dfc83c395d3d1d4324a3b0be36e1f318733a4a732a11d55a13143207d4f797b059eafeabc1178","href":"https://static.observableusercontent.com/files/97c8497c201e4ec4630355eed963a679416ee15a2d5cd13a922dfc83c395d3d1d4324a3b0be36e1f318733a4a732a11d55a13143207d4f797b059eafeabc1178","name":"person_megareduced.png","type":"image/png","lastModified":1672334837841.169,"size":1516},{"id":"49321554d5ea1aa6d67737c5591e5cc24754b67e686e72852663516e231ceb8c4ed7b491dbedd31869b1df471459564ac48c4b942461d534fa4ba563e5b2573b","href":"https://static.observableusercontent.com/files/49321554d5ea1aa6d67737c5591e5cc24754b67e686e72852663516e231ceb8c4ed7b491dbedd31869b1df471459564ac48c4b942461d534fa4ba563e5b2573b","name":"disaster_displace_region_condensed_long.csv","type":"text/csv","lastModified":1672437225653.917,"size":547},{"id":"021feea966e59e42ba2fe6351e972b15ead7c8c4788e87253cbc37ba1cef9056bbb4d6f0f4e049ce5ef69589de84059dc6b1a6cdd510e29b4cf18823927f03f7","href":"https://static.observableusercontent.com/files/021feea966e59e42ba2fe6351e972b15ead7c8c4788e87253cbc37ba1cef9056bbb4d6f0f4e049ce5ef69589de84059dc6b1a6cdd510e29b4cf18823927f03f7","name":"disaster_displace_region_condensed_long@1.csv","type":"text/csv","lastModified":1672438661914.832,"size":349},{"id":"c1aa38772711d035b1213a2bd49803fd00394348a6510aaffc052bdf9355647e7b6bd01f78a1a485f82fbd56e81de49c6aa919d4248b766848b2944b78b62dcf","href":"https://static.observableusercontent.com/files/c1aa38772711d035b1213a2bd49803fd00394348a6510aaffc052bdf9355647e7b6bd01f78a1a485f82fbd56e81de49c6aa919d4248b766848b2944b78b62dcf","name":"global-living-planet-index.csv","type":"text/csv","lastModified":1672687853211.078,"size":21197},{"id":"d5c58d5d23c868148cbdd876885f9e5fa0e7f20a2847a588ba1a699116bda99a0d402373a2a05ce612e49f688785529321abf10acfd2a5e984931d46c363757c","href":"https://static.observableusercontent.com/files/d5c58d5d23c868148cbdd876885f9e5fa0e7f20a2847a588ba1a699116bda99a0d402373a2a05ce612e49f688785529321abf10acfd2a5e984931d46c363757c","name":"world-population-by-region-with-projections.csv","type":"text/csv","lastModified":1672853694316.388,"size":2052104},{"id":"993522cb06c42e8539332efd1fed3f17344e5c9a80bcb314d8ef1b18549f4daa23e782a29c54aee28fa334adefbabd575771391d0d9210d455abe0ed67ad3454","href":"https://static.observableusercontent.com/files/993522cb06c42e8539332efd1fed3f17344e5c9a80bcb314d8ef1b18549f4daa23e782a29c54aee28fa334adefbabd575771391d0d9210d455abe0ed67ad3454","name":"UNData_mort_rate.csv","type":"text/csv","lastModified":1672917302686.824,"size":491},{"id":"3cf94f44e596eab1262d2a955901cdb49d3b56ac18e9395e71da7d2ec4f79975da41ef5567888692673173678bb352601f782931394d88c34052114f460072a6","href":"https://static.observableusercontent.com/files/3cf94f44e596eab1262d2a955901cdb49d3b56ac18e9395e71da7d2ec4f79975da41ef5567888692673173678bb352601f782931394d88c34052114f460072a6","name":"pollution-deaths-from-fossil-fuels.csv","type":"text/csv","lastModified":1672917386415.213,"size":4423},{"id":"516f058db68bdb70af3ebed768e32ad975c3c76635d433c9e422d63fc2ee1abf00e340b6e70e70ede846a51bdd3aec0708ebe9aebdde73bac92d18755f6c4215","href":"https://static.observableusercontent.com/files/516f058db68bdb70af3ebed768e32ad975c3c76635d433c9e422d63fc2ee1abf00e340b6e70e70ede846a51bdd3aec0708ebe9aebdde73bac92d18755f6c4215","name":"UN_death2015_data_grouped@2.csv","type":"text/csv","lastModified":1672920986005.116,"size":106},{"id":"2c2426385cd7333dcffd1b94c733a269e4f910f0640ef189fe01f97483cacd8674d914cfc5baf2e6c72cfc32128d5d3713a69fe0aac48f0000f3b0178b74a170","href":"https://static.observableusercontent.com/files/2c2426385cd7333dcffd1b94c733a269e4f910f0640ef189fe01f97483cacd8674d914cfc5baf2e6c72cfc32128d5d3713a69fe0aac48f0000f3b0178b74a170","name":"base_mortality_per_country.csv","type":"text/csv","lastModified":1673086749078.419,"size":23118},{"id":"3cf94f44e596eab1262d2a955901cdb49d3b56ac18e9395e71da7d2ec4f79975da41ef5567888692673173678bb352601f782931394d88c34052114f460072a6","href":"https://static.observableusercontent.com/files/3cf94f44e596eab1262d2a955901cdb49d3b56ac18e9395e71da7d2ec4f79975da41ef5567888692673173678bb352601f782931394d88c34052114f460072a6","name":"country_deaths_by_fossil_fuels_2015.csv","type":"text/csv","lastModified":1673087314844.317,"size":4423}] 29:{"id":"32095a04183e79bd","slug":null,"title":"Processing p5 testing","thumbnail":"28ae68a8e53fef09c7b0bc4ba8070d3703eecd7dc551718b6093ab4474944853","access_level":"public","create_time":"$D2022-12-29T15:30:05.477Z","update_time":"$D2023-01-19T22:49:13.961Z","view_time":null,"first_public_time":"$D2022-12-29T15:30:05.477Z","has_unpublished_edits":null,"fork":{"id":"df38094bc9089946","slug":"processing-p5-js","title":"Processing (p5.js)","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"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":1574,"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":"461b2632c4e8e4f6","slug":"processing","title":"Processing","owner":{"id":"cf0cffacb5e3b6d7","login":"vogelmann","name":"Vogelmann"}},"type":"notebook","body":{"titling":"auto","title":"Processing p5 testing","cells":[{"id":0,"value":"# Processing p5 testing \n\nTests, esbozos y pruebas varias con processing p5 en observable. Probablemente nada de lo que hay en este documento es utilizable: esperad errores, fragmentos de código mal optimizados, ideas sin terminar, etc.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1315,"value":"# Deathball viz (country version) (WIP)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1320,"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":1343,"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":1328,"value":"viewof selected_deathball_country = Inputs.select(\n [...new Set(country_deaths_by_fossil_fuel_2015.map(item => item[\"Entity\"]))], \n {label: \"Select a country/entity:\", multiple: false}\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1377,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"Una visualización adicional interesante, para ver el contexto del gráfico anterior, es mostrar el máximo y el mínimo de muertos globales. Veámoslo.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1422,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1466,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"# Deathball viz (region version)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":986,"value":"Este prototipo de visualización pretende mostrar, de forma aproximada, el número de muertes producidas por la concentración actual de CO2 en la atmósfera. Léase los comentarios del código de las celdas para ver las fuentes de los datos y los modelos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1037,"value":"world_population_by_region_data = FileAttachment(\"world-population-by-region-with-projections.csv\").csv(); // Fuente: https://ourworldindata.org/grapher/world-population-by-region-with-projections","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1261,"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":1280,"value":"deaths_by_pollution_2015_data = FileAttachment(\"UN_death2015_data_grouped@2.csv\").csv() // Fuente: https://ourworldindata.org/grapher/pollution-deaths-from-fossil-fuels | Los datos se han grupado por regiones del mundo","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"C_0 = 280 // Concentración de CO_2 en la atmosfera en la era pre-industrial","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":951,"value":"C_2022 = 417.2 // Concentracion de CO2 en la atmosfera en el año 2022. Fuente: https://research.noaa.gov/article/ArtMID/587/ArticleID/2914/No-sign-of-significant-decrease-in-global-CO2-emissions","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"S = 5 // Constante de sensibilidad climática. Se calcula que está entre 2-5, probablemente alrededor de 3. Fuente: https://scied.ucar.edu/activity/very-simple-climate-model-activity","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":954,"value":"function DT_TVVSCM(c, c_0, s)\n{\n // Esta función devuelve el incremento de temperatura respecto una concentración\n // de CO2 en la atmósfera igual a c_0, dada una conentración actual igual a c y tomando\n // s como constante de sensibilidad climática, según el modelo 'The Very Very Simple Climate Change Model'.\n\n // Fuente: https://scied.ucar.edu/activity/very-simple-climate-model-activity\n\n \n return s * Math.log(c / c_0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"function marginal_mortality(dT)\n{\n // Aumento de la tasa de mortalidad según el aumento de temperatura respecto niveles pre-industriales.\n\n // Fuente: 'The Mortality Cost of Carbon' - Supplementary Materials, página 13, modelo exponencial.\n // Enlace: https://static-content.springer.com/esm/art%3A10.1038%2Fs41467-021-24487-w/MediaObjects/41467_2021_24487_MOESM1_ESM.docx\n // Enlace al artículo completo original: https://www.nature.com/articles/s41467-021-24487-w\n\n \n return 0.0004865 * Math.exp(1.03*dT)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":968,"value":"function number_of_deaths_from_concentration(C, C_O, S, population)\n{\n var dT = DT_TVVSCM(C, C_O, S);\n dT = 1.21;\n var delta = marginal_mortality(dT); \n\n return population * delta;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1219,"value":"africa_population = world_population_by_region_data.filter(d => d.Year == 2022 & d.Entity == \"Africa\")[0][\"Population\"];\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"africa_base_death_rate = base_mortality_rate_by_region.filter(d => d[\"Country or Area\"] == \"Africa\")[0][\"Value\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1248,"value":"(africa_base_death_rate / 1000) * marginal_mortality(DT_TVVSCM(C_2022, C_0, S)) * africa_population","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"# Global living planet index viz (non-p5)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":934,"value":"El ***índice del planeta vivo*** (Global living planet index, o GLPI) es un indicador, calculado desde el año 1970, que muestra la evolución del volumen de las poblaciones de cerca de 10.000 poblaciones de animales vertebrados de todas las regiones del mundo. Este índice sirve como medidor de la pérdida o aumento de la biodiversidad alrededor del mundo.\n\nEsta visualización muestra los cambios en el GLPI entre los años 1970 y 2017. Originalmente tenía que ser una visualización mediante p5, pero al final he usado vega-lite; aún así, la he incluido en este documento.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":681,"value":"Data 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":679,"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":684,"value":"glpi_raw.filter(d => d.Entity == \"Africa\" && d.Year == \"2017\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"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":708,"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":688,"value":"viewof year_slider_glpi = Inputs.range([1970, 2017], {value: 2011, step: 1, label: \"Year\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"# Climate displacement viz- Particle path follower","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":611,"value":"Este es un prototipo de visualización para una práctica del MSc en Ciencia de Datos de la UdG, que pretende visualizar el número de desplazados por motivos relacionados con el clima (sequías, incendios forestales, inundaciones, etc) entre los años 2008 y 2021 en cada región del planeta. Cada punto representa, aproximadamente, unas 1000 personas. \n\n\n\n*TO-DO:\nDe momento los datos que utiliza la visualización se han incrustado manualmente dentro del código (véase las variables mutables que aparecen a continuación); esto hay que rectificarlo y hacer que el programa procese un archivo.*\n\n*Los datos están extraidos del siguiente enlace: https://www.internal-displacement.org/database/displacement-data\nSe han ignorado aquellos desastres no realacionados con el clima (como terremotos), se ha hecho una agrupación por tipo de desastre y región, y se ha dividido el total entre 1000 (redondeando a la unidad más próxima).*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":622,"value":"mutable global_africa_inventory = [2113,1,24689,2550,141,0];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"mutable global_asia_inventory = [465,1087,122930,65166,268,1];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"mutable global_europe_inventory = [0,0,639,43,135,0];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"mutable global_na_inventory = [0,27,2157,8117,3130,0];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"mutable global_sa_inventory = [10,50,8163,9837,37,0];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"mutable global_oceania_inventory = [5,0,7618,45021,99,0];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"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":219,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"$50","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"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":307,"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":81,"value":"### Libraries, imports, etc...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2,"value":"import {p5} from \"@tmcw/p5\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"displacement_data_URL = await FileAttachment(\"disaster_displace_region_condensed_long@1.csv\").url();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"person_image_URL = await FileAttachment(\"person.png\").url();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"import {vl} from '@vega/vega-lite-api'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"1"}} 24:null