Hello!
vl.layer(bluepoints,line2,line,redpoints,randompoints,horizontalline).render()
viewof x1 = slider({min:0,max:10,step:.1})
line = vl.markLine({stroke:"black"})
.data([{x:5,y:0},{x:5,y:10}])
.encode(
vl.x().fieldQ("x"),
vl.y().fieldQ("y")
)
redpoints = vl.markCircle({fill:"red",stroke:"black",size:200})
.data([{x:5,y:0},{x:5,y:10}])
.encode(
vl.x().fieldQ("x"),
vl.y().fieldQ("y")
)
line2 = vl.markLine({stroke:"black"})
.data([{x:x1,y:0},{x:x1,y:10}])
.encode(
vl.x().fieldQ("x").scale({domain:[0,10]}),
vl.y().fieldQ("y").scale({domain:[0,10]})
)
bluepoints = vl.markCircle({fill:"aqua",stroke:"black",size:200})
.data([{x:x1,y:0},{x:x1,y:10}])
.encode(
vl.x().fieldQ("x"),
vl.y().fieldQ("y")
)
Math.random()*10
randomdata = {
const randomdata = []
for(let i = 0; i < 100; i = i+1){
randomdata.push({x:Math.random(i)*10,y:Math.random(i)*10})
}
return randomdata
}
randompoints = vl.markCircle({fill:"green",stroke:"black",size:100})
.data(randomdata)
.encode(
vl.x().fieldQ("x"),
vl.y().fieldQ("y")
)
horizontalline =
vl.markLine({stroke:"black",size:3})
.data([{x:5,y:0},{x:0,y:0}])
.encode(
vl.x().fieldQ("x").scale({domain:[0,10]}),
vl.y().fieldQ("y").scale({domain:[0,10]})
)
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.
