Published
Edited
Feb 25, 2021
5 stars
Insert cell
Insert cell
Insert cell
Insert cell
data = [{key: 'A', value: 4}, {key: 'B', value: 8}, {key: 'C', value: 2}, {key: 'D', value: 9}, {key: 'E', value: 7}, {key: 'F', value: 4}]
Insert cell
vl.markBar()
.encode(
vl.x().fieldO("key"),
vl.y().fieldQ("value")
)
.height(200)
.data(data)
.render()
Insert cell
Insert cell
Insert cell
JSON.stringify( // wrap everything in stringify to create a clean string
vl.markBar()
.encode(
vl.x().fieldO("key"),
vl.y().fieldQ("value")
)
.height(200)
.data(data)
.toObject() // call toObject() instead of render()
)
Insert cell
Insert cell
Insert cell
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