{
const hover = vl.selectPoint('hover')
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.toggle(false) // disable toggle on shift-hover
.nearest(true); // select data point nearest the cursor
const w = width/2-70;
const h = 200;
const isHovered = hover.empty(false);
const label = {align: 'left', dx: 5, dy: -5};
//const white = {stroke: 'white', strokeWidth: 2};
//------------------------//
const line_co2 = vl.markLine({strokeWidth: 3, interpolate: 'monotone'})
.title('CO2')
.encode(
vl.x().fieldQ('year').axis({gridOpacity: 0.4, tickBand: "center"})
.scale({type:'quantitative', domain: [year_min, 2022]}).title(""),
vl.y().sum('co2').axis({gridOpacity: 0.4}).scale({type:'quantitative'}).title(""),
vl.color().fieldN('continent').title("Continents").legend(false)
).width(w).height(h);
const base1 = line_co2.transform(vl.filter(isHovered));
const ln1 = vl.layer(
line_co2,
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldQ('year')),
line_co2.markCircle()
.params(hover)
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
base1.markText(label).encode(vl.text().fieldQ('co2').aggregate("sum").format('0.0f'))
);
//------------------------//
const line_methane = vl.markLine({strokeWidth: 3, interpolate: 'monotone'})
.title('Methane')
.encode(
vl.x().fieldQ('year').axis({gridOpacity: 0.4, tickBand: "center"})
.scale({type:'quantitative', domain: [year_min, 2022]}).title("Year"),
vl.y().sum('methane').axis({gridOpacity: 0.4}).scale({type:'quantitative'}).title("Million Tonnes"),
vl.color().fieldN('continent').title("Continents").legend(false)
).width(w).height(h);
const base2 = line_methane.transform(vl.filter(isHovered));
const ln2 = vl.layer(
line_methane,
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldQ('year')),
line_methane.markCircle()
.params(hover)
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
base2.markText(label).encode(vl.text().fieldQ('methane').aggregate("sum").format('0.0f'))
);
//------------------------//
const line_nit_ox = vl.markLine({strokeWidth: 3, interpolate: 'monotone'})
.title('Nitrous Oxide')
.encode(
vl.x().fieldQ('year').axis({gridOpacity: 0.4, tickBand: "center"})
.scale({type:'quantitative', domain: [year_min, 2022]}).title("Year"),
vl.y().sum('nitrous_oxide').axis({gridOpacity: 0.4}).scale({type:'quantitative'}).title(""),
vl.color().fieldN('continent').title("Continents").legend(false)
).width(w).height(h);
const base3 = line_nit_ox.transform(vl.filter(isHovered));
const ln3 = vl.layer(
line_nit_ox,
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldQ('year')),
line_nit_ox.markCircle()
.params(hover)
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
base3.markText(label).encode(vl.text().fieldQ('nitrous_oxide').aggregate("sum").format('0.0f'))
);
const line_ghg = vl.markLine({strokeWidth: 3, interpolate: 'monotone'})
.title('Greenhouse Gasses')
.encode(
vl.x().fieldQ('year').axis({gridOpacity: 0.4, tickBand: "center"})
.scale({type:'quantitative', domain: [year_min, 2022]}).title(""),
vl.y().sum('total_ghg').axis({gridOpacity: 0.4}).scale({type:'quantitative'}).title("Million Tonnes"),
vl.color().fieldN('continent').title("Continents").legend({orient: 'top', titleOrient: 'left'})
).width(w).height(h);
const base4 = line_ghg.transform(vl.filter(isHovered));
const ln4 = vl.layer(
line_ghg,
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldQ('year')),
line_ghg.markCircle()
.params(hover)
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
base4.markText(label).encode(vl.text().fieldQ('total_ghg').aggregate("sum").format('0.0f'))
);
const h1 = vl.hconcat(ln4,ln1)
.resolve({
axis: { x: 'independent' },
scale: { y: state_scale_type }
});
const h2 = vl.hconcat(ln2,ln3)
.resolve({
axis: { x: 'independent' },
scale: { y: state_scale_type }
});
const v1 = vl.vconcat(h1, h2);
return vl.data(emissions_data.filter(d=> d.continent !== undefined)
.filter(d=> d.continent !== "" )
.filter(d=> d.paris_agreement_signed !== par_agrmnt))
.vconcat(v1)
.config({
style: { cell: { stroke: 'transparent' } },
header: { labelFontSize: 14, labelPadding: 0 },
padding: { top: 5, right: 0, bottom: 5, left: 0 },
})
.title({
text: "Chart 1: Gasses Emissions by Year",
aling: 'center'
})
.render();
}
viewof par_agrmnt1 = radio({
//title: 'Paris Agreement',
options: [
{ label: 'All the world', value: 'Todos'},
{ label: 'Paris Agreement Countries', value: 'No' },
{ label: 'Rest of the world', value: 'Yes' }
],
description: 'Paris Agreement',
value: 'Todos'
})
viewof sel_continent2 = Inputs.checkbox(continent, {label: "Select a continent", value: continent})
viewof sel_region = Inputs.checkbox(regions, {label: "Select a region", value: regions})
viewof year_sl2 = slider({
min: year_min,
max: year_max,
step: 1,
value: 2021,
description: "Select a year"
})
DraggableTable(emissions_cntrs_par_agr)
viewof r_year_comp = radio({
//title: 'Paris Agreement',
options: [
{ label: '1990-2019', value: '1990-2019'},
{ label: '2015-2019', value: '2015-2019'}
],
description: 'Select a couple of years',
value: '1990-2019'
})
viewof years_interval = interval([year_min, year_max], {
step: 1,
value: get_Rng_Years(r_year_comp)
})
{
const legend = {
title: 'CO2',
format: '0.0%',
labelFontSize:10,
direction: 'horizontal',
orient: 'top-left',
legendX: Math.floor(0.65 * width),
legendY: 30,
tickCount: 5,
gradientLength: 240,
gradientThickness: 8
};
const countries = vl.markGeoshape({stroke:'#fff', strokeWidth:1})
.data(vl.topojson(countries_url).feature("countries1"))
.project(vl.projection("naturalEarth1"))
.transform(
vl.lookup('id')
.from(vl.data(emissions_2y).key('id').fields('ratio_incremental'))
)
.encode(
vl.color().fieldQ('ratio_incremental')
//.condition({test: "datum['co2'] == 0", value: "lightgrey"})
.scale({domain: [-1, 0, 3],
type: 'quantile',
clamp: false,
scheme: {name: 'redblue',
count:8,
//extent:[5,7]
},
reverse: true}) //
.legend(legend),
vl.tooltip([
{field : "properties.name", title : "Country"},
{field : 'ratio_incremental', title : '% CO2 Increment', format: '.0%'},
//{field : 'init', title : years_interval[0]},
//{field : 'end', title : years_interval[1]}
])//.fieldQ(metric_map).format('0.2f')
);
return vl.layer(countries)
.width(width)
.height(Math.floor(0.6 * width))
.padding(0)
.autosize('none')
.config({view: {stroke: null}})
.render();
}
viewof year_top_sldr = Scrubber(years, {
initial: years.length,
autoplay: false,
delay: 300,
format: date =>
date.toLocaleString("au", {
year: "numeric"
})
})
{
const top1 = vl.markBar()
.data(emissions_top_by_yr.filter(d=> d.paris_agreement_signed == 'Paris Agreement Countries').slice(0,15))
.title('Top Countries members of Paris Agreement')
.encode(
vl.x().fieldQ('porc_co2').scale({domain:[0,0.33]}).axis({gridOpacity: 0.4, tickBand: "center", format:'0.2%'})
.title('CO2 % of World'),
vl.y().fieldN('country').sort('-x').title(''),
vl.color({value:'darkred'})
.title("Paris Agreement").legend({orient: 'top', titleOrient: 'left'})
)
.width(width-100);
const top2 = vl.markBar()
.data(emissions_top_by_yr.filter(d=> d.paris_agreement_signed == 'Rest of the World').slice(0,15))
.title('Top Countries pending to join the Paris Agreement ')
.encode(
vl.x().fieldQ('porc_co2').scale({domain:[0,0.33]}).axis({gridOpacity: 0.4, tickBand: "center", format:'0.2%'})
.title('CO2 % of World'),
vl.y().fieldN('country').sort('-x').title(''),
vl.color({value:'orange'})
.title("Paris Agreement").legend({orient: 'top', titleOrient: 'left'})
)
.width(width-100);
/*
const chartTextBar = vl.markText({ fontSize: 10 })
.data(top15_1.slice(0,15))
.encode(
vl.x().fieldQ('porc_co2'),
vl.y().fieldN('country').sort('-x'),
vl.text({"field": "porc_co2", "type": "quantitative", format: "0.2%", align: 'right'})
)*/
return vl.vconcat(top1, top2)
.render();
}
viewof years_intervaltemp = interval([1990, 2021], {
step: 1,
value: [1990, 2021],
})
{
const data = globalData2.map(d => ({
year: d.year,
lat: get_Hemisphere(d.lat),
temp: d.temp
}))
const hover = vl.selectPoint('hover')
.encodings('x') // limit selection to x-axis value
.on('mouseover') // select on mouseover events
.toggle(false) // disable toggle on shift-hover
.nearest(true);
const w = width/2-70;
const h = 200;
const isHovered = hover.empty(false);
const label = {align: 'left', dx: 5, dy: -5};
const white = {stroke: 'white', strokeWidth: 2};
//------------------------
const temperatures = vl.markLine()
//.data(marketCap)
.data(data)
.encode(
vl.x().fieldQ("year").axis({gridOpacity: 0.4, tickBand: "center",format: "0.0f"}).scale({domain:[years_intervaltemp[0],years_intervaltemp[1]]}).title("Years"), // date parsing!
vl.y().fieldQ("temp").title("Temperature °c"),
vl.color().fieldN("lat").title("Zone") // .sort(vl.max("market cap").order("descending"))
)
.width(900)
.height(250);
////
const base1 = temperatures.transform(vl.filter(isHovered));
////
const ln1 = vl.layer(
temperatures,
vl.markRule({color: '#aaa'})
.transform(vl.filter(isHovered))
.encode(vl.x().fieldQ('year')),
temperatures.markCircle()
.params(hover)
.encode(vl.opacity().if(isHovered, vl.value(1)).value(0)),
base1.markText(label).encode(vl.text().fieldQ('temp'))
);
//--------------------
const heatmap = vl.markRect({tooltip: {"content": "data"}, clip: true})
.data(data.filter(d=>d.year<2020||d.year>=1990))
.encode(
vl.y().fieldN("lat").sort(["North Hemisphere", "Global", "South Hemisphere"]).title("Zone"),
vl.x().fieldN("year").title("Years"),
vl.color().fieldQ("temp").scale({ scheme: "redyellowblue", reverse: true }).title("Temperature"),
vl.tooltip([
{field : "year", title : "Year"},
{field : 'temp', title : 'Temperature',format:'0.2f'},
{field : "lat",title:"Zone"}
])
)
.width(900)
.height(300);
return vl.vconcat(ln1, heatmap)
.config({
style: { cell: { stroke: 'transparent' } },
header: { labelFontSize: 14, labelPadding: 0 },
padding: { top: 5, right: 0, bottom: 5, left: 0 },
})
.title({
text: "Global Temperature variation per year",
aling: 'center'
}).render();
}
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.
