ageData = [
{ "person": "Mary", "age": 45 },
{ "person": "Jane", "age": 52 },
{ "person": "Jamil", "age": 35 },
{ "person": "Liang", "age": 21 }
]
vl.markBar()
.data(ageData)
.encode(
vl.x().fieldN('person'),
vl.y().fieldQ('age')
).width(200).height(200).render()
vegalite({
height: 200,
width: 200,
data: {url: "https://jonfroehlich.github.io/age_data.json"},
mark: 'bar',
encoding: {
x: {field: 'person', type: 'nominal'},
y: {field: 'age', type: 'quantitative'}
}
})
{
const plot = vl.markBar()
.data(ageData)
.encode(
vl.x().fieldN('person'),
vl.y().fieldQ('age')
).width(200).height(200);
return printVegaLiteJSON(plot, true)
}
vl.markBar()
.data(ageData)
.transform(
vl.filter('datum.age >= 40')
)
.encode(
vl.x().fieldN('person'),
vl.y().fieldQ('age')
)
.width(200).height(200)
.render()
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.
