Public
Edited
Nov 14, 2021
Insert cell
Insert cell
Insert cell
data = aq.loadJSON(dataUrl)
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
dataBig = data.objects()
Insert cell
Insert cell
Inputs.table(dataBig, { width: 500 })
Insert cell
Insert cell
dataSmall = data
.derive({
gender: (d) => (d.sex == 2 ? "Female" : "Male")
})
.filter((d) => d.year === 2000)
.objects()
Insert cell
Inputs.table(dataSmall, { width: 500 })
Insert cell
Insert cell
vegaEmbed(smallspec)
Insert cell
smallspec = ({
data: { values: dataSmall },
mark: "bar",
encoding: {
x: { field: "age", type: "nominal" },
y: {
field: "people",
type: "quantitative",
aggregate: "sum",
stack: true
},
color: { field: "gender", type: "nominal" }
}
})
Insert cell
Insert cell
vegaEmbed(bigSpec)
Insert cell
bigSpec = ({
data: { values: dataBig },
transform: [
{ filter: "datum.year == 2000" },
{ calculate: "datum.sex == 2 ? 'Female' : 'Male'", as: "gender" }
],
mark: "bar",
encoding: {
y: {
aggregate: "sum",
field: "people",
stack: true
},
x: { field: "age" },
color: { field: "gender", type: "nominal" }
}
})
Insert cell
Insert cell
vegaEmbed(bigFilterSpec)
Insert cell
bigFilterSpec = ({
data: { values: dataBig },
params: [
{
name: "opacityVar",
value: 1,
bind: { input: "range", min: 0, max: 1, step: 0.1 }
},
{
name: "yearSelected",
value: "1980",
bind: { input: "range", min: 1900, max: 2000, step: 10 }
}
],
transform: [
{ filter: "datum.year == yearSelected" },
{ calculate: "datum.sex == 2 ? 'Female' : 'Male'", as: "gender" }
],
mark: { type: "bar", opacity: { expr: "opacityVar" } },
encoding: {
y: {
aggregate: "sum",
field: "people",
stack: true
},
x: { field: "age" },
color: { field: "gender", type: "nominal" }
}
})
Insert cell
vegaEmbed = 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