Public
Edited
Mar 1, 2023
Insert cell
Insert cell
embed({
data: { url: data["barley.json"].url },
mark: { type: "bar", tooltip: true },
config: {
padding: 50
},
encoding: {
x: { field: "yield", aggregate: "mean", type: "quantitative" },
y: { field: "year", type: "ordinal" },
color: { field: "site" }
}
})
Insert cell
embed({
data: { url: data["barley.json"].url },
mark: { type: "bar", tooltip: true },
config: {
padding: 50
},
transform: [
{
aggregate: [{ op: "mean", field: "yield", as: "yield_mean" }],
groupby: ["year", "site", "variety"]
}
// {
// calculate: "datum.rank <= 10 ? 'Low' : 'High'", as: "ranked_yield"
// }
],
encoding: {
x: { field: "yield_mean", type: "quantitative" },
y: { field: "year", type: "ordinal" },
color: { field: "variety" },
detail: { field: "site" }
}
})
Insert cell
Plot.auto(await data["barley.json"](), {
x: "year",
y: "yield"
}).plot()
Insert cell
data["barley.json"]()
Insert cell
data = require("vega-datasets@2")
Insert cell
embed = require('vega-embed')
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