Public
Edited
Sep 20, 2023
Insert cell
Insert cell
Plot.plot({
marginLeft: 100,
marks: [
Plot.line(pop_hist.filter(d => d.Year >= -5000), {x: 'Year', y: 'Population'}),
Plot.line(spike_nyt.filter(d => d.tfr_scenario == 1.66), {x: 'year', y: 'size', stroke: 'black'})
]
})
Insert cell
years = [1500, 1900, 1950, 2000]
Insert cell
Plot.plot({
marginLeft: 100,
marks: [
Plot.line(pop_hist.filter(d => d.Year >= -1000), {x: 'Year', y: 'Population', tip: true}),
Plot.line(spike_nyt.filter(d => d.tfr_scenario < 2).filter(d => d.year <= 3500), {x: 'year', y: 'size', z: 'tfr_scenario', opacity: 0.5}),
Plot.dot(pop_hist.filter(d => years.includes(d.Year)), {x: 'Year', y: 'Population', fill: 'red'})
]
})
Insert cell
Plot.plot({
marks: [
Plot.line(pop_dem.filter(d => d.year >= 1991), {x: 'year', y: 'total_fertility_rate', z: 'region', opacity: 0.5, tip: true})
]
})
Insert cell
Plot.plot({
width: 600,
height: 900,
r: {
range: [1, 50]
},
marks: [
Plot.dot(pop_dem_2021, Plot.dodgeX('middle', {y: 'total_fertility_rate',
r: 'pop_jul',
fill: d => d.total_fertility_rate >= 2.1 ? '#cecece' : 'salmon',
channels: { region: 'region' },
tip: true})),
]
})
Insert cell
Plot.plot({
width: 700,
height: 700,
marks: [
Plot.dot(pop_dem_1990, {x: d => findGDP(d.iso3, 1990), y: 'total_fertility_rate', fill: '#cecece', channels: { region: 'region' }, tip: true}),
Plot.dot(pop_dem_2021, {x: d => findGDP(d.iso3, 2021), y: 'total_fertility_rate', fill: '#000', channels: { region: 'region' }, tip: true})
]
})
Insert cell
Plot.plot({
width: 700,
height: 700,
x: {
type: 'log'
},
marks: [
Plot.arrow(pop_dem_1991, {
x1: d => findGDP(d.iso3, 1991),
x2: d => findGDP(d.iso3, 2021),
y1: 'total_fertility_rate',
y2: d => pop_dem_2021.find(e => e.iso3 == d.iso3).total_fertility_rate,
opacity: 0.6,
channels: { region: 'region' },
tip: true
}),
Plot.ruleY([2.1], {stroke: 'red'})
]
})
Insert cell
Plot.plot({
width: 700,
height: 700,
y: {
domain: [0.5, 9]
},
marks: [
Plot.arrow(pop_dem_1991, {
x1: 1991,
x2: 2021,
y1: 'total_fertility_rate',
y2: d => pop_dem_2021.find(e => e.iso3 == d.iso3).total_fertility_rate,
opacity: 0.6,
channels: { region: 'region' },
tip: true
})
]
})
Insert cell
findGDP('ABW', 1990)
Insert cell
function findGDP(iso, year) {
let gdp

let row = gdp_worldbank.find(e => e['Country Code'] == iso) ? gdp_worldbank.find(e => e['Country Code'] == iso) : NaN
gdp = row[year] ? row[year] : NaN

return gdp
}
Insert cell
data = {
let output = []
let years = Object.keys(gdp_worldbank[0]).slice(30,62)

gdp_worldbank.forEach((e,i) => {
output[i] = new Object()

output[i].name = e['Country Name']
output[i].code = e['Country Code']
output[i].values = years.map(d => { return {
year: d,
gdp: gdp_worldbank.find(f => f['Country Name'] == e['Country Name'])[d]
}})
})

return output
}
Insert cell
gdp_worldbank.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
pop_dem_1991 = pop_dem.filter(d => d.year == 1991)
Insert cell
pop_dem = un_population_demography.filter(d => d.iso3 !== '')
Insert cell
un_population_demography.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
spike_nyt.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
pop_hist.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell

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.
Learn more