Published
Edited
Mar 14, 2019
// Your code here
z = require('https://bundle.run/zebras@0.0.11')
d3 = require("d3")
mig = d3.csv("https://gist.githubusercontent.com/cesandoval/b834ac93c07e03ec5205843b97f68017/raw/6dff0d45ed26352a7a3c7afb4ace0bad1ce8ba20/MIG_18022019163824069.csv")
mig1 = mig //setting to mig1 so in case it gets changed later on it doesnt affect everything that used mig
meta = d3.csv("https://gist.githubusercontent.com/cesandoval/b834ac93c07e03ec5205843b97f68017/raw/90951b60444376eebfcbbee9beca00c083f489f6/Metadata_Country_API_SM.POP.NETM_DS2_en_csv_v2_10473747.csv")
meta1 = meta // same as why i created mig1
// Your code here
z.head(5,mig)
z.head(5,meta)
groupbyCountry = z.groupBy(x=>x.CO2,mig) // grouping by country
sumbyVar = { // here I am summing for each country (which I grouped above), the values by Variable, and I turn the variables into column names for joining next
let sumbyvar = []
for (const country of Object.entries(groupbyCountry)) {
let currcountry = {Country: country[0]}
let currdata = z.gbSum("Value",z.groupBy(x=>x.Variable,country[1]))
for (const data of currdata){
currcountry[data.group] = data.sum
}
sumbyvar.push(currcountry)
}
return sumbyvar
}
joined = z.merge(sumbyVar,meta,"Country","Country Code","_df1","_df2") //joining...
z.head(5,joined)
// Your code here
inc = z.groupBy(r=> r.IncomeGroup,joined) //grouping by income
viewof incomegrp_var_plot = embed({
vconcat:[ // vertically concatinating a few ribbons of graphs
{
title: "Low Income Data", //first doing for lower income countries...
repeat: {
column: Object.keys(inc["Low income"][0]).slice(1,9) //taking these columns names (only the numeric ones)
},
spec: {
data: {values: inc['Low income']}, //hence only taking low income data
mark: "bar",
encoding: {
x: {field: {"repeat": "column"},bin: {"maxbins": 12}},
y: {aggregate: "count",type: "quantitative"}, //telling vegalite what to aggregate
},
value: "grey"
}
},
{
title: "Lower Middle Income Data",
repeat: {
column: Object.keys(inc["Low income"][0]).slice(1,9)
},
spec: {
data: {values: inc['Lower middle income']},
mark: "bar",
encoding: {
x: {field: {"repeat": "column"},bin: {"maxbins": 12}},
y: {aggregate: "count",type: "quantitative"},
},
value: "grey"
}
},
{
title: "Upper Middle Income Data",
repeat: {
column: Object.keys(inc["Low income"][0]).slice(1,9)
},
spec: {
data: {values: inc['Upper middle income']},
mark: "bar",
encoding: {
x: {field: {"repeat": "column"},bin: {"maxbins": 12}},
y: {aggregate: "count",type: "quantitative"},
},
value: "grey"
}
},
{
title: "High Income Data",
repeat: {
column: Object.keys(inc["Low income"][0]).slice(1,9)
},
spec: {
data: {values: inc['High income']},
mark: "bar",
encoding: {
x: {field: {"repeat": "column"},bin: {"maxbins": 12}},
y: {aggregate: "count",type: "quantitative"},
},
value: "grey"
}
},
{
title: "Undefined Data",
repeat: {
column: Object.keys(inc["Low income"][0]).slice(1,9)
},
spec: {
data: {values: inc['undefined']},
mark: "bar",
encoding: {
x: {field: {"repeat": "column"},bin: {"maxbins": 12}},
y: {aggregate: "count",type: "quantitative"},
},
value: "grey"
}
},
]})
// Your code here
viewof stacked_plot = embed({
title: "Normalized Stacked Bar Migration Data",
repeat: {column: Object.keys(inc["Low income"][0]).slice(1,9)},
data: {values: z.filter(x=>x['Country']!='TOT',joined)},//removing Total
spec: {
mark: "bar",
encoding: {
x: {field: {repeat: "column"},bin: {maxbins: 12} },
y: {aggregate: "count",stack: "normalize"},
color: {field:"IncomeGroup",type:"nominal"}
}
}
})
z.head(5,z.sortByCol("Stock of foreign population by nationality",'des',joined))
// Your code here
gdp = d3.csv('https://gist.githubusercontent.com/apaarty/694cfb55f4b55ede6459ccd04f5d65fd/raw/0bedbc83aa9651e5c95326f12f6ac44b7a0c0707/gdppercapital2017.csv')
mig1
miglevels2017 = z.filter(x=>x.Year=='2017' && x.Variable=='Stock of foreign-born population by country of birth',mig1) // had to use Stock of foreign-born to represent "Immigration Level" because 2017 doesn't have Inflow data...knowing this would have saved a lot of time...
mig2017_grouped = z.gbSum("Value",z.groupBy(r=>r.CO2,miglevels2017)) //summing the Stock of foreign born for each country (from 2017)
merged = z.merge(mig2017_grouped,meta,"group","Country Code","_df1","_df2") //merging with meta to get region data
merged_again = z.merge(merged,gdp,"group","Country Code","_1","_2") //merging with gdp to get gdp data
z.sortByCol("sum","des",merged_again) // sorting to see what are the outliers that need to be removed, which are Total and Mexico
merged_cleaned = z.filter(x=>x.group != 'TOT' && x.Region != undefined && x.group != "MEX",merged_again)
viewof scatterplot = embed({
width:600,
height:600,
title: "Immigration Levels vs GDP per Capita by Region in 2017",
data: {values: merged_cleaned},
mark: {type : "point", filled:'true',size:60},
encoding: {
x: {field:"sum",title:"Stock of foreign-born population in country in 2017"},
y: {field: "2017 GDP per capita",title:"GDP Per Capita in 2017 (USD)"},
color:{field:"Region", type:"nominal"}
}
})
// Your code here
miglevels = z.filter(x=>x.Variable=='Stock of foreign-born population by country of birth' && x.CO2 != "TOT" && x.CO2!='MEX',mig1) //new array of stock of foreign-born, removing outliers
miglevels_year = z.groupBy(x=>x.Year,miglevels) //grouping this by year
stock_year = {
let array = []
for (var i=0;i<Object.keys(miglevels_year).length;i++){
let counts_in_year = z.gbSum("Value",z.groupBy(x=>x.CO2,miglevels_year[Object.keys(miglevels_year)[i]]))
for (var j=0;j<Object.keys(counts_in_year).length;j++){
array.push({Year: Object.keys(miglevels_year)[i],Country: counts_in_year[j].group,Immigration: counts_in_year[j].sum})
}
}
return array
}
viewof compositeplot = embed({
width:700,
height:500,
title: "Immigration Levels vs GDP per Capita by Region in 2017",
data: {values: stock_year},
layer:[{
mark: {type : "point", filled:'true',size:60},
encoding: {
x: {field:"Year",type:"temporal",title:"Year"},
y: {field: "Immigration",title:"Stock of foreign-born population in country in 2017"},
}},{
mark: "line",
encoding: {
x: {field: "Year", type:"temporal"},
y: {field: "Immigration", aggregate: "mean"},
color: {value:"orange"}
}
}]
})
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.
