Published unlisted
Edited
Oct 7, 2022
Insert cell
Insert cell
vl.render({ spec })
Insert cell
viewof date = htl.html`<input type=text>`
Insert cell
spec = ({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
data: { url: "data/seattle-weather.csv" },
transform: [
{ calculate: "datum.temp_max - datum.temp_min", as: "temp_range" }
],
config: {
style: {
area: {
color: "#45010aab"
}
},
view: {
fill: "lightyellow"
}
},
mark: "area",
encoding: {
x: {
timeUnit: "month",
field: "date"
},
y: {
aggregate: "mean",
field: "temp_range"
}
},
params: [
{
name: "brush",
select: { type: "interval", encodings: ["x"] },
value: { month_date: [1331110440000, 1350043886250] },
bind: { element: viewof date }
}
]
})
Insert cell
import { vl } from "@vega/vega-lite-api-v5"
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