Public
Edited
Jun 4, 2024
ageData = [
{ person: "Mary", age: 45 },
{ person: "Jane", age: 52 },
{ person: "Jamil", age: 35 },
{ person: "Liang", age: 21 }
]
showtypes(ageData)
show(ageData.slice(0, 5), undefined, 200)
Inputs.table(ageData.slice(0, 5), { width: 200 })
vl
.markBar() // select the mark type
.data(ageData) // add the data
.encode(
// add the visual encodings
vl.x().fieldN("person"),
vl.y().fieldQ("age")
)
.render()
vl
.markBar() // select the mark type
.data(ageData) // add the data
.encode(
// add the visual encodings
vl.x().fieldN("person"),
vl.y().fieldQ("age")
)
.width(250)
.height(250) // set graph size
.render()
viewof currentData = vegaDataViewer(ageChart, {
tableOptions: { paged: 10 }
})
viewof ageChart = {
const brush = vl.selectInterval("brush").encodings("y");
const base = vl
.markBar()
.select(brush)
.encode(
vl.x().fieldN("person"),
vl.y().fieldQ("age"),
vl.color().if(brush, vl.value("crimson")).value("gray")
)
.width(300)
.height(300);
return base.data(ageData).render(); // render the code as a chart?
// use the below line to render the above js and tidy JSON for vega-lite
return html`<pre>${JSON.stringify(base.toObject(), 0, 2)}</pre>`; // prettify the string
// use the below as a function to return the js code as tidy vega-lite JSON
return printVega(base, true);
}
{
// Same code as before but store in a plot variable
const plot = vl
.markBar()
.data(ageData)
.encode(vl.x().fieldN("person"), vl.y().fieldQ("age"))
.width(200)
.height(200);
// return plot.toObject();
return plot.render();
}
{
const brush = vl.selectInterval("brush").encodings("y");
const base = vl
.markBar()
.select(brush)
.encode(
vl.x().count(),
vl.y().fieldQ("Horsepower"),
vl.color().if(brush, vl.value("steelblue")).value("gray")
)
.height(400);
//return base.data(data).render();
// return html`<pre>${JSON.stringify(base.toObject(), 0, 2)}</pre>`; // prettify the string
return printVega(base, true);
}
VegaLite({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
mark: "bar", // select the mark type
data: { values: ageData }, // add the data
encoding: {
// add the visual encodings
x: { field: "person", type: "nominal" },
y: { field: "age", type: "quantitative" }
},
width: 250,
height: 250 // set graph size
})
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.
