//viewof summary_raw_data = SummaryTable(emissions_raw, {label: "Emissions Data"})
// Afegir ordre aquí si es vol ordenar el Heatmap
enhancedDataEUCountries = {
const dataCountries = new Map();
var countryIdx = 0;
emissionsByCountry.forEach((countryData, key, map) => {
if (map.get(key)[0].iso_code != 'LVA') {
const dataYears = [];
const baseYearGhg = map.get(key)[0].total_ghg;
countryData.forEach((yearData, index) => {
const ghgPercentageDecrease = index == 0 ? 0 : Math.round(
(percentageDecrease(
map.get(key)[index - 1].total_ghg,
yearData.total_ghg
) +
Number.EPSILON) *
100
) / 100;
dataYears.push({
index,
countryIdx: countryIdx,
iso_code: yearData.iso_code,
year: yearData.year,
total_ghg: yearData.total_ghg,
difference_ghg: Math.round(((yearData.total_ghg - baseYearGhg) + Number.EPSILON) * 100) / 100, // Diferència amb l'any 1990
total_ghg_change: ghgPercentageDecrease, // Diferència amb l'any anterior
ghg_increased: ghgPercentageDecrease >= 0 ? false : true
});
});
dataCountries.set(key, dataYears);
countryIdx += 1;
}
});
return dataCountries;
}
plotData = {
const names = isoCodes;
const data = heatmapData;
const improvementValues = [];
const diffValues = [];
const ghgValues = [];
const year0 = d3.min(data[0].data.values.heatMapValues, (d) => d[0]);
const year1 = d3.max(data[0].data.values.heatMapValues, (d) => d[0]);
const years = d3.range(year0, year1 + 1);
for (const [year, i, improvementValue, diffValue, ghg] of data[0].data.values
.heatMapValues) {
if (improvementValue == null || diffValue == null || ghg == null) continue;
(improvementValues[i] || (improvementValues[i] = []))[year - year0] =
improvementValue;
(diffValues[i] || (diffValues[i] = []))[year - year0] = diffValue;
(ghgValues[i] || (ghgValues[i] = []))[year - year0] = ghg;
}
const orderedImprovementValues = improvementValues.flat().sort(function (a, b) {
return a - b;
});
debugger;
return {
yearlyImprovementValues:
mode == "Normalize"
? improvementValues.map((d) => normalizeArray(d))
: improvementValues,
diffFromBaseValues:
mode == "Normalize" ? diffValues.map((d) => normalizeArray(d)) : diffValues,
ghgValues: mode == "Normalize" ? ghgValues.map((d) => normalizeArray(d)) : ghgValues,
top_quantile: d3.quantile(orderedImprovementValues, 0.9),
bottom_quantile: d3.quantile(orderedImprovementValues, 0.1),
names,
years,
year: data[0].data.chart_options.key_year,
};
}
viewof plotdata = {
function selectColorScale(mode, heatmapMode, minVal, maxVal) {
if (heatmapMode == "Change from 1990") {
return d3.scaleDiverging()
.domain([minVal, 0, maxVal])
.interpolator(d3.interpolateRdYlGn)
}
else if (heatmapMode == "Total emissions") {
return d3.scaleSequential(d3.interpolateGreys).domain([minVal, maxVal]);
}
}
function getData(heatmapMode) {
switch(heatmapMode) {
case "Total emissions":
return plotData.ghgValues;
case "Change from 1990":
return plotData.diffFromBaseValues;
}
}
// Declare the chart dimensions and margins.
const marginTop = 20;
const marginRight = 1;
const marginBottom = 40;
const marginLeft = 40;
const rowHeight = 24;
const width = 1200;
const height = rowHeight * plotData.names.length + marginTop + marginBottom;
// Create the SVG container.
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
// Create the scales.
const x = d3.scaleLinear()
.domain([d3.min(plotData.years), d3.max(plotData.years) + 1])
.rangeRound([marginLeft, width - marginRight])
const y = d3.scaleBand()
.domain(plotData.names)
.rangeRound([marginTop, height - marginBottom])
const minVal = d3.min(getData(heatmapMode), d => d3.min(d));
const maxVal = d3.max(getData(heatmapMode), d => d3.max(d));
const color = selectColorScale(mode, heatmapMode, minVal, maxVal);
//d3.scaleSequentialSqrt([0, d3.max(plotData.improvementValues, d => d3.max(d))], d3.interpolatePuRd);
// Append the axes.
svg.append("g")
.call(g => g.append("g")
.attr("transform", `translate(0,${marginTop})`)
.call(d3.axisTop(x).ticks(null, "d"))
.call(g => g.select(".domain").remove()))
.call(g => g.append("g")
.attr("transform", `translate(0,${height - marginBottom + 4})`)
.call(d3.axisBottom(x)
.tickValues([plotData.year])
.tickFormat(x => x)
.tickSize(marginTop + marginBottom - height - 10))
.call(g => g.select(".tick text")
.clone()
.attr("dy", "2em")
.style("font-weight", "bold")
.text("Kyoto protocol started"))
.call(g => g.select(".domain").remove()));
svg.append("g")
.attr("transform", `translate(${marginLeft - 10},0)`)
.call(d3.axisLeft(y).tickSize(0))
.call(g => g.select(".domain").remove());
// Create a cell for each (state, year) value.
const f = d3.format(",d");
const format = d => isNaN(d) ? "N/A cases"
: d;
svg.append("g")
.selectAll("g")
.data(getData(heatmapMode))
.join("g")
.attr("transform", (d, i) => `translate(0,${y(plotData.names[i])})`)
.selectAll("circle")
.data(d => d) // Buscar manera de conservar l'index del país a baix
.join("circle")
.attr("cx", (d, i) => x(plotData.years[i]))
.attr("cy", y.bandwidth() - 8)
.attr("r", 12)
// .attr("width", (d, i) => x(plotData.years[i] + 1) - x(plotData.years[i]) - 1)
.attr("fill", d => isNaN(d) ? "#eee" : d === 0 ? "#c6dbef" : color(d))
.append("title")
.text((d, i) => `${format(d)} in ${plotData.years[i]}`);
return Object.assign(svg.node(), {scales: {color}});
}
data1
Type Table, then Shift-Enter. Ctrl-space for more options.
data_UE = {
const countriesInData2 = data2.map(item => item.country);
const filteredData = emissions.filter(item => countriesInData2.includes(item.country));
console.log(filteredData);
return filteredData;
}
data_UE
kioto_UE
CO2_1990 = data_UE.filter(d => d.year === "1990")
.map((d) => {
return {
country: d.country,
co2_1990: d.co2,
reduction_co2_1990: d.co2 * 0.95
}
});
kioto_UE_2 = {
const dataZ = [];
kioto_UE
.forEach((yearData) => {
const year = parseInt(yearData.year);
const quinquennium = year + (5 - year % 5);
dataZ.push({
country: yearData.country,
year: year,
quinquennium: quinquennium,
co2: yearData.CO2,
co2_1990: yearData.CO2_1990,
red_co2_1990: yearData.REDUCTION_CO2_1990
});
});
return dataZ;
}
countries_data = d3.group(kioto_UE_2, d => d.country)
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.
