UW CS Professor in HCI. Director of the Makeability Lab. Co-founder of Project Sidewalk.
ageData = [
{ "person": "Mary", "age": 45 },
{ "person": "Jane", "age": 52 },
{ "person": "Jamil", "age": 35 },
{ "person": "Liang", "age": 21 }
]
printTable(ageData)
printTableTypes(ageData)
vl.markBar()
.data(ageData)
.encode(
vl.x().fieldN('person'),
vl.y().fieldQ('age')
).width(200).height(200).render()
vegalite({
width: 200,
height: 200,
data: {values: ageData},
mark: 'bar',
encoding: {
x: {field: 'person', type: 'nominal'},
y: {field: 'age', type: 'quantitative'}
}
})
vegalite({
width: 200,
height: 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);
}
ageBarPlot = vl.markBar()
.data(ageData)
.encode(
vl.x().fieldN('person'),
vl.y().fieldQ('age')
).width(200).height(200);
ageBarPlot.render();
printVegaLiteJSON(ageBarPlot);
vl.markBar()
.data(ageData)
.transform(
vl.filter('datum.age >= 40') // keeps all data with 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.
