vegalite = require("@observablehq/vega-lite@0.1")
MIG=d3.csv("https://gist.githubusercontent.com/cesandoval/b834ac93c07e03ec5205843b97f68017/raw/6dff0d45ed26352a7a3c7afb4ace0bad1ce8ba20/MIG_18022019163824069.csv")
Metadata=d3.csv("https://gist.githubusercontent.com/cesandoval/b834ac93c07e03ec5205843b97f68017/raw/90951b60444376eebfcbbee9beca00c083f489f6/Metadata_Country_API_SM.POP.NETM_DS2_en_csv_v2_10473747.csv")
//learn from Yunhan
migJoined={
var migJoined=z.parseNums("Value",MIG.map(x => Object.assign(x, Metadata.find(y => y['Country Code'] == x['CO2']))))
return z.filter(r=>r.IncomeGroup!=undefined,migJoined)
}
// Group the table by IncomeGroup
migGroup=z.groupBy(x => x.IncomeGroup, migJoined)
//Sum the immigration values across years by Variable
migSum={
var migGroup_key=Object.keys(migGroup)
var variable=z.unique(z.getCol("Variable", migJoined))
var country=z.unique(z.getCol("CO2", migJoined))
var migSum=[]
//loop across groups
for (var i=0; i<migGroup_key.length; i++){
var groupTem=migGroup[migGroup_key[i]]
//sum values by variable, thus loop accross variables
for(var j=0; j<variable.length; j++){
var varTem=z.filter(r=>r.Variable==variable[j],groupTem)
//sum values across year for each country so that the histogram can be drawed, loop through countries
for (var k=0; k<country.length; k++){
var co2Tem=z.filter(r=>r.CO2==country[k],varTem)
var co2Value=z.getCol("Value",co2Tem)
migSum.push({"CO2": country[k], "Variable":variable[j],"IncomeGroup":migGroup_key[i], "migrateSum":co2Value.reduce(function(a, b) { return a + b; }, 0)})
}
}
}
return migSum
}
//grouped migSum
migSumGroup=z.groupBy(x => x.IncomeGroup, migSum)
migNew={
var migNew={}
for(var i=0; i<migGroup_key.length; i++){
function addVariable(object) {
var temObject = object
temObject[object["Variable"]]=object["migrateSum"]
return temObject
}
migNew[migGroup_key[i]]=migSumGroup[migGroup_key[i]].map(addVariable)
}
return migNew
}
variable=z.unique(z.getCol("Variable", migJoined))
//Create a grid of histogram plots, where every column will represent a different Variable, and every row will represent a different IncomeGroup.(bin: 12)
viewof view_histogram = embed({
title: "Immigration by income groups and migration categories",
data: {values: migSum},
mark:"bar",
encoding: {
x: {bin:{"maxbins":13}, field:"migrateSum", type: "quantitative"},
y: {aggregate:"count", field:"CO2", type: "quantitative"},
"row": {
field: "IncomeGroup",
type: "nominal"},
"column": {
field: "Variable",
type: "nominal"}
}
})
//alternatively: using repeat so that the x axis can be varied
////need to change the format of the data first
viewof view_histogram2 = embed({
title: "Immigration by income groups and migration categories",
vconcat:[{
repeat:{column:variable},
spec:{
data: {values: migNew[migGroup_key[0]]},
mark:"bar",
encoding: {
x: {bin:{"maxbins":13}, field:{"repeat":"column"}, type: "quantitative"},
//why it appears a large blank when trying to change the scale domain?
y: {aggregate:"count", field:"CO2", type: "quantitative",title:"number of country",scale:{domain:[0,200]}}
}}},
{
repeat:{column:variable},
spec:{
data: {values: migNew[migGroup_key[1]]},
mark:"bar",
encoding: {
x: {bin:{"maxbins":13}, field:{"repeat":"column"}, type: "quantitative"},
y: {aggregate:"count", field:"CO2", type: "quantitative", title:"number of country"}
}}},
{
repeat:{column:variable},
spec:{
data: {values: migNew[migGroup_key[2]]},
mark:"bar",
encoding: {
x: {bin:{"maxbins":13}, field:{"repeat":"column"}, type: "quantitative"},
y: {aggregate:"count", field:"CO2", type: "quantitative", title:"number of country"}
}}},
{
repeat:{column:variable},
spec:{
data: {values: migNew[migGroup_key[3]]},
mark:"bar",
encoding: {
x: {bin:{"maxbins":13}, field:{"repeat":"column"}, type: "quantitative"},
y: {aggregate:"count", field:"CO2", type: "quantitative", title:"number of country"}
}}}
]
})
migSumNew={
var migSumNew={}
function addVariable(object) {
var temObject = object
temObject[object["Variable"]]=object["migrateSum"]
return temObject
}
migSumNew=migSum.map(addVariable)
return migSumNew
}
viewof view_stackBar= embed({
title: "Immigration by income groups and migration categories",
repeat:{column:variable},
spec:{
data: {values: migSumNew},
mark:"bar",
encoding: {
x: {bin:{"maxbins":13},field:{"repeat":"column"}, type: "quantitative"},
//why it appears a large blank when trying to change the scale domain?
y: {aggregate:"count", field:"CO2", type: "quantitative","stack":"normalize", title:"number of country"},
color:{field: "IncomeGroup", type: "nominal"}
}
}})
GDP2017={
function filter(object){
var newOb={}
newOb["GDP2017"]=object["2017"]
newOb["CO2"]=object["Country Code"]
return newOb
}
return GDP.map(filter)
}
migSum2017=z.gbSum("Value", z.groupBy(r => r['CO2'], z.filter(x =>x["YEA"]=="2017",migJoined)))
gdpJoined={
var gdpJoined=migSum2017.map(x => Object.assign(x, GDP2017.find(y => y['CO2'] == x['group'])))
//add in the region code
return gdpJoined.map(x => Object.assign(x, Metadata.find(y => y['Country Code'] == x['CO2'])))
}
viewof view_scatterPlot = embed({
data: {values: gdpJoined},
mark:"point",
encoding: {
x: {field:"sum", type: "quantitative", title:"immigration number"},
y: {field:"GDP2017", type: "quantitative",title:"2017 GDP"},
color:{field:"Region",type:"nominal"}
}
})
migDot={
var Array=[]
for (var i=0;i<year.length;i++){
function tem(object){
var tem=object
tem["Year"]=year[i]
return tem
}
var temArray=z.gbSum("Value", z.groupBy(r => r['CO2'], z.filter(x =>x["YEA"]==year[i],migJoined)))
var tem2=temArray.map(tem)
tem2.map(function(a){return Array.push(a)})
}
return Array
}
viewof view_dotPlot = embed({
data: {values: migDot},
height: 200,
width: 200,
layer:[
{
mark:"line",
encoding: {
x: {timeUnit: "year", field: "Year", type: "temporal"},
y: {field:"sum", type: "quantitative",aggregate:"mean",title:"immigration number"},
color:{"value":"firebrick"}
}
},
{
mark:"point",
encoding: {
x: {timeUnit: "year", field: "Year", type: "temporal"},
y: {field:"sum", type: "quantitative",title:"immigration number"},
}
}]
})
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.
