vl.layer(line,point,heartbeatpoint)
.render()
line = vl.markLine({stroke:"#876ABC"})
.width(800)
.height(335)
.data(datafilter1)
.transform(
vl.calculate(`floor(datum.x)`).as("y")
)
.encode(
vl.x().fieldQ("x").scale({domain:[0,10]}),
vl.y().fieldQ("y").scale({domain:[0,10]})
)
point = vl.markCircle({stroke:"black",size:200,fill:"green"})
.width(800)
.height(335)
.data(datafilter2)
.transform(
vl.calculate(`floor(datum.x)`).as("y")
)
.encode(
vl.x().fieldQ("x").scale({domain:[0,10]}),
vl.y().fieldQ("y").scale({domain:[0,10]})
)
heartbeatpoint = vl.markCircle({stroke:"black",size:(1000*(1-i%1)),fill:"red"})
.width(800)
.height(335)
.data(dataheartbeatpoint)
.encode(
vl.x().fieldQ("x").scale({domain:[0,10]}),
vl.y().fieldQ("y").scale({domain:[0,10]})
)
viewof drawslider = slider({
min:0,
max:10,
step:0.1,
title:"Draw Slider"
})
datafilter1 = data.filter(d=>d.x<=i)
datafilter2 = data.filter(d=>d.x==i)
dataheartbeatpoint = [{x:0.25,y:9}]
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.
