Published
Edited
Sep 12, 2021
//Co2 dataset
co2 = FileAttachment("co2.csv").csv()
//gapminder dataset
gm = FileAttachment("gapminder_lab6.csv").csv()
//hpi dataset
hpi = FileAttachment("hpi_data_countries.tsv").tsv()
//create a list of countries that are in co2 database.
countryList = {
let data = [];
co2.forEach(function(d){
data.push(d.country);
});
return data;
}
//Remove the countries that are in gm database but not in co2 database and make a new database that only contains the fields we need to plot
gmUpdated = gm.map(function(d,i){
if (countryList.includes(d.Country)) return {
country: d.Country,
region: d.region,
year: d.Year,
gdp: d.gdp
}
}).filter(d => d!= null) //filters the null data, because if the country is not in countryList, the above function returns null
//Merges the corresponding co2 values from co2 database to the new gmUpdated database.
{
gmUpdated.forEach(function(d){
d.co2 = co2[countryList.indexOf(d.country)][d.year]
//countryList.indexof(d.country) returns the corresponding index of country in country list which is equal to index in co2 database, then extract the co2 data of the year we want
d.year = parseFloat(d.year) //ensures that year is not in string format
})
}
vegalite(
{
"data": {"values": gmUpdated},
"mark": {"type": "point", "filled": true, "tooltip": {"content": "data"}},
//allows to zoom in and out the graph and pan on dragging; double click to return to original plot
"params": [{
"name": "grid",
"select": "interval",
"bind": "scales"
}],
"width": 600,
"height": 400,
"encoding": {
"x": {"field": "gdp", "type": "quantitative", "title": "gdp→"},
"y": {"field": "co2", "type": "quantitative", "title": "co2→"},
"color": {"field": "region"},
}
}
)
//makes a slider for year from 1964 to 2013
vegalite(
{
"data": {"values": gmUpdated},
"selection": {
"slider": {
"type": "single",
"fields": ["year"], //makes a slider for year field
"bind": {
"year": {"input": "range", "min": 1964 , "max": 2013, "step": 1}
//describes the slider property
},
},
"view": {"type": "interval", "bind": "scales"} //allows zooming and panning the scatterplot
},
"mark": {"type": "point", "filled": true, "tooltip": {"content": "data"}},
"width": 400,
"encoding": {
"x": {"field": "gdp", "type": "quantitative", "title": "gdp→"},
"y": {"field": "co2", "type": "quantitative", "title": "co2→"},
"color": {
"condition": { "selection": "slider", "field": "region", "type": "nominal"},
"value": null,
},
},
}
)
//Faceting according to regions
vegalite(
{
"data": {"values": gmUpdated},
"transform": [{"calculate": "datum.year","as": "year"}],
"facet": { //Just adding this facet and spec in the already drawn scatter plot
"column": {"field": "region", "type": "nominal"},
},
"spec": {
"selection": {
"slider": {
"type": "single",
"fields": ["year"],
"bind": {
"year": {"input": "range", "min": 1964 , "max": 2013, "step": 1}
},
}
},
"encoding": {
"x": {"field": "gdp", "type": "quantitative", "title": "gdp→"},
"y": {"field": "co2", "type": "quantitative", "title": "co2→"},
"color": {
"condition": { "selection": "slider", "field": "region", "type": "nominal"},
"value": null,
},
},
"mark": {"type": "point", "filled": true, "tooltip": {"content": "data"}},
"width": 100,
},
}
)
vegalite(
{
"data": {"values": hpi},
"params": [{
"name": "brush",
"select": {"type": "interval"}, // allows us to select a continuous range of data values on drag
}],
"mark": {"type": "point", "filled": true, /*"size": 100*/}, //size here denotes the size of the points of scatterplot
"width": 400,
"encoding": {
"x": {"field": "Wellbeing (0-10)", "type": "quantitative", "scale": {"domain": [0,10]}, "title": "Wellbeing (0-10)→"},
"y": {"field": "Happy Planet Index", "type": "quantitative", "title": "Happy Planet Index→"},
"color": {
"condition": { "param": "brush", "field": "Region", "type": "nominal"},
//sets colors on the values by "field" only the brushed portion (rectangular selection)
"value": "grey" //for the part not selected, the color is grey
}
}
}
)
minLifeExpectancy = Math.floor(d3.min(hpi, d => d['Life Expectancy (years)']))
maxLifeExpectancy = Math.ceil(d3.max(hpi, d => d['Life Expectancy (years)']))
vegalite(
{
"data": {"values": hpi},
"hconcat": [ //Places the graphs horizontally
{
"params": [{
"name": "brush", //applies selection by brushing feature on the left grap
"select": {"type": "interval"}, // allows us to select a continuous range of data values on drag
}],
"mark": {"type": "point", "filled": true, "size": 50},
"width": 400,
"encoding": {
"x": {"field": "Wellbeing (0-10)", "type": "quantitative", "title": "Wellbeing (0-10)→"},
"y": {"field": "Happy Planet Index", "type": "quantitative", "scale": {"domain": [0,50]}, "title": "Happy Planet Index→"},
"color": {
"condition": {"selection": "brush", "field": "Region", "type": "nominal"},
"value": "grey"
}
}
},
{
//You can decomment this if you don't want to show the unselected points on right plot
// "transform": [
// {"filter": {"selection": "brush"}}
// ],
"mark": {"type": "point", "filled": true, "size": 50},
"width": 400,
"encoding": {
"x": { "field": "Life Expectancy (years)", "type": "quantitative", "title": "Life Expectancy (years)→",
"scale": { "domain": [minLifeExpectancy, maxLifeExpectancy]}},
//scale is needed to fix the scales, otherwise, the scale also changes when you pan the brush.
"y": {"field": "Happy Planet Index", "type": "quantitative", "scale": {"domain": [0,50]}, "title": "Happy Planet Index→"},
"color": {
"condition": {"param": "brush", "field": "Region", "type": "nominal"},
"value": "grey",
}
}
}
]
}
)
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.
