Former physicist turned programmer with research experience building complex computational models for physical systems.
Public
Edited
May 19, 2023
student_teacher_ratio.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
worldtilegrid.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
df_world = worldtilegrid.map(d=>({...d,
country_code: d['alpha.3'],
region: d.region == 'Americas'
? d['sub.region']
: d['region'],
})).map(d=>({...d,
region: ["Northern America", "Central America", "Caribbean"].includes(d['region'])
? 'North America'
: d['region'],
})).filter(d=>d.region != 'Antarctica')
max_year_by_country = d3.rollup(student_teacher_ratio, v => d3.max(v, d => d.year), d => d.country, d => d.indicator)
df_students = student_teacher_ratio.filter(
d=>
d.year == max_year_by_country.get(d.country).get(d.indicator) &&
d.indicator == "Primary Education" &&
/[A-Z]/.test(d.country_code)
)
df_ratio = {
const map = new Map();
df_students.forEach(d=>map.set(d.country_code, d));
df_world.forEach(d=>map.set(d.country_code, {...map.get(d.country_code), ...d}))
return Array.from(map.values()).filter(d=>d.region!=undefined && d.indicator!=undefined)
}
Plot.plot({
aspectRatio:1,
color:{legend:true, domain:[1, 100], scheme:'Plasma'},
x: {axis:false},
y: {axis:false, reverse:true},
marks: [
Plot.rect(df_world, {x:'x', y:'y', interval:1, fill:'#666'}),
Plot.rect(df_ratio, {x:'x', y:'y', interval:1, fill:'student_ratio'}),
Plot.text(df_world, {x:'x', y:'y', text:'alpha.2', fill:'#fff', dx:12, dy:12})
]
})
Plot.plot({
aspectRatio:1,
color:{legend:true},
x: {axis:false},
y: {axis:false, reverse:true},
marks: [
// Plot.rect(df_world, {x:'x', y:'y', interval:1, fill:'#666'}),
Plot.rect(df_ratio, {x:'x', y:'y', interval:1, fill:'region'}),
// Plot.text(df_world, {x:'x', y:'y', text:'alpha.2', fill:'#fff', dx:12, dy:12})
]
})
df_world.filter(d=>d['alpha.2']=='ME')
student_teacher_ratio.filter(d=>d.country_code== "MNE")
Plot.plot({
marks:[
Plot.boxY(df_ratio, {x: "region", y: "student_ratio", sort:{x:'y', reverse:true}})
]
})
Plot.plot({
marginLeft:100,
marks:[
Plot.boxX(df_ratio, {y: "region", x: "student_ratio", sort:{y:'x'}})
]
})
Plot.plot({
marginLeft:100,
x:{domain:[0, 90]},
marks:[
Plot.boxX(df_ratio, {y: "region", x: "student_ratio", fill:'region', sort:{y:'x'}})
]
})
Plot.plot({
height:350,
x:{domain:[0, 90]},
marginLeft:100, marginRight:100,
marks:[
Plot.rectY(df_ratio, Plot.binX({y2:'count'},{interval:5, fy:'region', x: "student_ratio", fill:'region',sort:{fy:'x'}}))
]
})
Plot.plot({
x:{domain:[0, 90]},
marginLeft:100,
marks:[
Plot.tickX(df_ratio, {y: "region", x: "student_ratio", stroke:'region', sort:{y:'x'}})
]
})
Plot.plot({
x:{domain:[0, 90]},
marginLeft:100,
marks:[
Plot.dot(df_ratio, {y: "region", x: "student_ratio", fill:'region', sort:{y:'x'}})
]
})
Plot.plot({
height:350,
x:{domain:[0, 90]},
marginLeft:100,
marks:[
Plot.dot(df_ratio, Plot.dodgeY('middle',{fy:'region', x: "student_ratio", fill:'region',sort:{fy:'x'}}))
Plot.dot(df_ratio, )
]
})
mean_ratio = d3.mean(df_ratio, d=>d.student_ratio)
data = df_ratio.map(d=>({
region:d.region, student_ratio:d.student_ratio
}))
button(data)
import {button} from "@jeremiak/download-data-button"
Plot.plot({
height:350,
x:{domain:[0, 90]},
marginLeft:100,
marks:[
Plot.dot (df_ratio, Plot.groupY({ x:'mean'}, {x: "student_ratio", y:'region', fill:'region',sort:{y:'x'}, r:8})),
Plot.barX(df_ratio, Plot.groupY({x1:'mean'}, {x1: "student_ratio", x2:mean_ratio, y:'region', fill:'region', insetTop:20, insetBottom:20})),
Plot.dot(df_ratio, {y:'region', x: "student_ratio", fill:'region', opacity:.5}),
Plot.tickX([mean_ratio]),
// Plot.dot(df_ratio, Plot.dodgeY('middle',{x: "student_ratio", fill:'region', fy:'region', filter:'region'}))
]
})
Plot.plot({
height:350,
x:{domain:[0, 90]},
marginLeft:100,
marks:[
Plot.tickX([mean_ratio]),
Plot.dot(df_ratio, Plot.dodgeY('middle',{x: "student_ratio", fill:'region', fy:'region', filter:'region', sort:{fy:'x'}}))
]
})
Plot.plot({
marginLeft:100,
facet:{data:df_ratio, y:'region'},
marks:[
Plot.dot(df_ratio, {x:'student_ratio'}),
Plot.dot(df_ratio, Plot.dodgeY('middle', {x:'student_ratio'})),
// Plot.dot(df_ratio, {x:d=>d3.mean(d, v=>v.student_ratio)}),
Plot.tickX([mean_ratio])
]
})
d3.mean(df_ratio, d=>d.student_ratio)
// x:d=>Math.sqrt(-2*Math.log(Math.random()))*Math.cos(2*Math.PI*Math.random()),
// average_by_country = Object.fromEntries(d3.rollup(df_ratio, v => d3.mean(v, d => d.student_ratio), d => d.region))
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.
