Public
Edited
Mar 1, 2024
1 fork
1 star
Insert cell
Insert cell
Insert cell
Type Markdown, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
global_data = FileAttachment("owid-co2-data.csv").csv()

Insert cell
co2_amb_hdi.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
co2_amb_hdi_v2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
co2_amb_hdi_3.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Kyoto = FileAttachment("Kyoto_v6.csv").csv()

Insert cell
Kyoto
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
ghgcolor = "#00072D"
Insert cell
//ghgcolorRange = ["#008DC2", "#00567A" , "#004D71","#004367", "#003A5D", , "#003053" , "#00264A","#001D40" , "#001336", "#00072D"]
ghgcolorRange = ["#008DC2", "#00072D"]
Insert cell
co2color = "#314052"
Insert cell
co2colorRange = ["#477AAF","#4574A5" ,"#426F9C" , "#406992" , "#3E638B","#3C5D81", "#3A5778","#38516E", "#354C65", "#33465B", "#314052"]
Insert cell
hdiColorLow = "#F7E425"
Insert cell
hdiColorMedium = "#EA7457"
Insert cell
hdiColorHigh = "#BF3984"
Insert cell
hdiColorVeryHigh = "#0D0887"
Insert cell
newBlueRange = "blues"

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mywave = FileAttachment("wave.jpg").image()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
radioCO2GHG
Insert cell
Insert cell
dataTransformed = meanCo2PerCapitaEmissionsPerHDICategoryAndYear.map(d => ({
...d,
year: d.year.getFullYear() // extrae solo el año del objeto Date
}));
Insert cell
hdi_countries = co2_amb_hdi_4.reduce((map, item) => {
map[item.country] = item.hdi_category;
return map;
}, {});
Insert cell
anyMaximPaisSeleccionat = co2_amb_hdi_4.filter(d => d.country === country_selected).reduce((max, d) => d.year > max ? d.year : max, 0);
Insert cell
anyMinimPaisSeleccionat = co2_amb_hdi_4.filter(d => d.country === country_selected).reduce((min, d) => d.year < min ? d.year : min, Infinity);
Insert cell
Insert cell
Insert cell
Insert cell
co2_amb_hdi_4
Type SQL, then Shift-Enter. Ctrl-space for more options.

Insert cell
co2_amb_hdi_4
Type SQL, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
co2_amb_hdi_5.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
objetoMaxCO2 = co2_amb_hdi_4.reduce((max, obj) => obj.co2_per_capita > max.co2_per_capita ? obj : max, co2_amb_hdi_v2[0]);

Insert cell
Insert cell
wetrg = obtenirDadesFiltrades();
Insert cell
function obtenirDadesFiltrades()
{
let year1 = interval_years[0];
let year2 = interval_years[1];
let hdiCategory = hdiCategory_filter;
let parameter = parameterToAnalize_filter;
let country = country_selected;
// Filtrar los datos
let filteredData = country == "" ?
co2_amb_hdi_4.filter(d => (d.year === year1 || d.year === year2) && d.hdi_category === hdiCategory) :
//co2_amb_hdi_4.filter(d => (d.year === year1 || d.year === year2) && getHDI(d.iso_code, d.country, d.year, true, true) === hdiCategory) :
co2_amb_hdi_4.filter(d => (d.year === year1 || d.year === year2) && d.country === country);
//getHDI(isocode, countryname, year =1990, categorized = false
let transformedData = {};
filteredData.forEach(d => {
if (!transformedData[d.country]) {
transformedData[d.country] = { value_start: null, value_end: null};
}
if (d.year === year1) {
transformedData[d.country].value_start = d[parameter];
}
else if (d.year === year2) {
transformedData[d.country].value_end = d[parameter];
}
});

if(country != "")
{
// The mean of the hdi_category
let filteredDataHDICategory = co2_amb_hdi_4.filter(d => (d.year === year1 || d.year === year2) && d.hdi_category === hdiCategory);
//let filteredDataHDICategory = co2_amb_hdi_5.filter(d => (d.year === year1 || d.year === year2) && getHDI(d.iso_code, d.country, d.year, true, true) === hdiCategory);
let valuesStart = filteredDataHDICategory.filter(d => d.year === year1).map(d => d[parameter]);
let valuesEnd = filteredDataHDICategory.filter(d => d.year === year2).map(d => d[parameter]);
let medianStart = d3.median(valuesStart);
let medianEnd = d3.median(valuesEnd);
transformedData[hdiCategory] = { value_start: medianStart, value_end: medianEnd };

// The mean of the world
let filteredDataWorld = co2_amb_hdi_4.filter(d => (d.year === year1 || d.year === year2));
//let filteredDataWorld = co2_amb_hdi_5.filter(d => (d.year === year1 || d.year === year2));
let valuesStartWorld = filteredDataWorld.filter(d => d.year === year1).map(d => d[parameter]);
let valuesEndWorld = filteredDataWorld.filter(d => d.year === year2).map(d => d[parameter]);
let medianStartWorld = d3.median(valuesStartWorld);
let medianEndWorld = d3.median(valuesEndWorld);
transformedData["World"] = { value_start: medianStartWorld, value_end: medianEndWorld };
}
let resultArray = Object.keys(transformedData).map(key => ({
country: key,
...transformedData[key]
}));

return resultArray;

}
Insert cell
/*miniPlots3 = html`
<div>
<!-- Fila superior con los dos primeros gráficos -->
<div style="display: flex;">
<div>${lineDirectionPlotVeryHigh}</div>
<div>${lineDirectionPlot}</div>
</div>
<!-- Fila inferior con los dos últimos gráficos -->
<div style="display: flex;">
<div>${lineDirectionPlotMedium}</div>
<div>${lineDirectionPlotLow}</div>
</div>
</div>`*/

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//emissionsCountry = emissions[country].data
Insert cell
Insert cell
import {Scrubber} from "@mbostock/scrubber"
Insert cell
import {autoSelect} from "@jashkenas/inputs"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
graficinteractiu1 = FileAttachment("graficInteractiu1.png").image()
Insert cell
graficinteractiu2 = FileAttachment("graficInteractiu2.png").image()
Insert cell
grafics3 = FileAttachment("grafics3.png").image()
Insert cell
co2_amb_hdi_4.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more