Curious human. Interested in the mechanics of how things work.
Published
Edited
Oct 4, 2021
1 fork
2 stars
Vega-lite: Line + Area
import { vl } from "@vega/vega-lite-api"
import { thumbnail, tryIt, weatherColors } from "a9a4b43c00769b31"
weather = FileAttachment("pwm-weather.csv").csv()
weather[0]
viewof layeredTrend = vl.data(weather)
.encode(
vl.x().fieldO("date").timeUnit("utcyearmonth"),
vl.y().fieldQ("tmax")
)
.layer(
vl.markCircle()
.encode(
vl.color().fieldN("condition").scale({ range: weatherColors })
),
vl.markLine()
.encode(
vl.y().mean("tmax")
),
vl.markArea({ interpolate: "basis", color: "darkseagreen", opacity: 0.5 })
.encode(
vl.x().fieldT("date").timeUnit("utcyearmonth"),
vl.y2().average("tmax"),
vl.y().average("tmin")
)
).width(1000).height(600)
.render()
viewof variousCharts = {
const temperatures = vl.markArea({ interpolate: "basis", color: "darkseagreen" })
.data(weather)
.encode(
vl.x().fieldT("date").timeUnit("utcyearmonth"),
vl.y2().average("tmax"),
vl.y().average("tmin")
)
.width(600)
.height(600);
// const species = vl.markCircle()
// .data(penguins)
// .encode(
// vl.x().fieldQ("culmen_length_mm").scale({ zero: false }),
// vl.y().fieldQ("flipper_length_mm").scale({ zero: false }),
// vl.color().fieldN("species").scale({ scheme: "set2" })
// )
// .width(220)
// .height(150);
// const letters = vl.markBar()
// .data(alphabet)
// .encode(
// vl.x().fieldN("letter"),
// vl.y().fieldQ("frequency")
// )
// .width(500)
// .height(200);
return temperatures.render();
}
weather
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.
