Public
Edited
Apr 19, 2024
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(population, {x: "Country Code", y: "Population, total [SP.POP.TOTL]", fill: "steelblue", sort: {x: "-y"}, tip:true}),
Plot.ruleY([0])
], marginLeft: 100
})
Insert cell
Insert cell
Insert cell
vl.markBar({ opacity: 0.4 } )
.params(
vl.param('Year').value(2014).bind(vl.slider(2014, 2023, 1)) // Setting the initial year and creating a slider
)
.data(population) // Using the 'population' dataset
.transform(
vl.calculate('datum["Population, male [SP.POP.TOTL.MA.IN]"]').as('population'), // Calculate population based on sex ▴
//Population, total [SP.POP.TOTL]
vl.filter('datum.Time === Year') // Filter based on the selected year
)
.encode(
vl.x().sum('population') // Summing up the population
.axis({ format: 's' }) // Using 1M, not 1,000,000
.title('Male Population'),
vl.y().fieldO('Country Code') // Using 'Country Code' as the ordinal field for the y-axis
.sort('descending') // Placing lower values at the bottom
.title('Country Code'),
//vl.color().fieldN('Male Population').value("blue")
vl.color()
.fieldN('Male Population')
.scale({range: ['purple']})
)
.width(500)
.height(400) // Fixed height
.render();
Insert cell
Insert cell
vl.markBar({ opacity: 0.4 } )
.params(
vl.param('Year').value(2014).bind(vl.slider(2014, 2023, 1)) // Setting the initial year and creating a slider
)
.data(population) // Using the 'population' dataset
.transform(
vl.calculate('datum["Population, female [SP.POP.TOTL.FE.IN]"]').as('population'), // Calculate population based on sex ▴
//Population, total [SP.POP.TOTL]
vl.filter('datum.Time === Year') // Filter based on the selected year
)
.encode(
vl.x().sum('population') // Summing up the population
.axis({ format: 's' }) // Using 1M, not 1,000,000
.title('Female Population'),
vl.y().fieldO('Country Code') // Using 'Country Code' as the ordinal field for the y-axis
.sort('descending') // Placing lower values at the bottom
.title('Country Code'),
//vl.color().fieldN('Female Polulation')

vl.color()
.fieldN('Male Population')
.scale({range: ['red']})
)
.width(500)
.height(400) // Fixed height
.render();
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
height: 800,
marginRight: 90,
marginLeft: 110,
grid: true,
x: {nice: true},
y: {inset: 5,label: "Urban Population"},
color: {type: "categorical"},
marks: [
Plot.frame(),
Plot.dot(population, {
x: "Time",
y: "Urban population [SP.URB.TOTL]",
fy: "Country Code",tip:true,
fill: "country", // Use the "year" field to determine the fill color of each dot
stroke: "#000",
sort: {y: "-x", fy: "-x", reduce: "median"}
})
]
})
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