Public
Edited
May 6, 2024
Insert cell
Insert cell
activeUsers = [
{ay: "2016-2017", users: 1997},
{ay: "2017-2018", users: 2732},
{ay: "2018-2019", users: 3738},
{ay: "2019-2020", users: 4728},
{ay: "2020-2021", users: 8063},
{ay: "2021-2022", users: 15542},
{ay: "2022-2023", users: 21922},
]
Insert cell
{
const bars = vl.markBar({"cornerRadiusBottomRight": 16, "cornerRadiusTopRight": 16})
.encode(
vl.x().fieldQ("users").title("Active users"),
vl.y().field("ay").title(null).sort("ascending"),
vl.color().field("ay").scale({scheme: "turbo"}).legend(null)
)
.data(activeUsers)
.width(300)
.height(200);
return bars
.title({text: "Active users by academic year"})
.render();
}
Insert cell
byAY = [
{ay: "2016-2017", subs: 979873},
{ay: "2017-2018", subs: 1146692},
{ay: "2018-2019", subs: 1577045},
{ay: "2019-2020", subs: 1936614},
{ay: "2020-2021", subs: 2465076},
{ay: "2021-2022", subs: 3231655},
{ay: "2022-2023", subs: 3300000},
]
Insert cell
{
const bars = vl.markBar({"cornerRadiusBottomRight": 16, "cornerRadiusTopRight": 16})
.encode(
vl.x().fieldQ("subs").title("Submitted solutions"),
vl.y().field("ay").title(null).sort("ascending"),
vl.color().field("ay").scale({scheme: "turbo"}).legend(null)
)
.data(byAY)
.width(300)
.height(200);
return bars
.title({text: "Submitted solutions by academic year"})
.render();
}
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