Published
Edited
May 29, 2020
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
vl.markPoint({filled: true, opacity: 0.3})
.data(submissions)
.transform(
vl.filter('datum.exercise != ""'),
vl.filter(vl.fieldT('created_at').lt({year: 2017, month: 11, date: 22}))
)
.encode(
vl.x().fieldT('created_at').title(null),
vl.y().fieldN('exercise').title(null),
vl.color().fieldN('status')
)
.render()
Insert cell
Insert cell
vl.markRect()
.data(submissions)
.transform(
vl.filter('datum.exercise != ""'),
vl.filter(vl.fieldT('created_at').lt({year: 2017, month: 11, date: 30}))
)
.encode(
vl.x().field('created_at').timeUnit("monthdatehours").title(null),
vl.y().fieldN('exercise').title(null),
vl.color().count().scale({scheme: 'blues'})
)
.render()
Insert cell
Insert cell
vl.markArea()
.data(submissions)
.transform(
vl.filter('datum.exercise != ""'),
vl.filter(vl.fieldT('created_at').lt({year: 2017, month: 11, date: 22})),
vl.filter('datum.status == "correct"')
)
.encode(
vl.x().field('created_at').timeUnit("monthdatehours").title(null),
vl.y().count(),
vl.color().value('darkgreen'),
vl.row().fieldN('exercise')
)
.height('100')
.render()
Insert cell
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