Published
Edited
Sep 25, 2020
3 stars
Insert cell
Insert cell
vl
.data(data)
.transform(
vl.calculate('datum.unixtime * 1000').as('timestamp'),
)
.layer(
// the data
vl.markLine()
.encode(
vl.x().fieldT("timestamp").title(""),
vl.y().fieldQ("tempF").title(null)
),

// the max temp annotation
vl.markRule({
stroke: 'firebrick',
strokeDash: [2, 2]
})
.data([0])
.encode( vl.y().datum(185) ),
vl.markText({
align: 'center',
dx: 20,
dy: -134,
color: "firebrick"
})
.data([0])
.encode( vl.text().datum("Max Temp: 185˚F") ),

)
.render({renderer:"svg"})

Insert cell
Insert cell
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