Published
Edited
Oct 7, 2019
Fork of Imports
Insert cell
Insert cell
html`captured: ${dataFilt.length}`
Insert cell
vl.layer(redLine,redPoints,blueLine,bluePoints,bottomLine,topLine,dataPoints).render()
Insert cell
Insert cell
data = {
var data = []
for(var i = 0;i < 100; i++){
data.push({x:Math.random()*10})
data[i].y = Math.random()*10
}
return data
}
Insert cell
dataFilt = data.filter(d => Math.abs(d.x - 5)+ Math.abs(d.x - s) == Math.abs(5 - s))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
redLine = vl.markLine({stroke:"black",strokeWidth:3})
.data([{x:5,y:0},{x:5,y:10}])
.encode(
vl.x().fieldQ("x").scale({domain:[0,10]}),
vl.y().fieldQ("y")
)
Insert cell
redPoints = vl.markCircle({stroke:"black",fill:"red",size:200})
.data([{x:5,y:0},{x:5,y:10}])
.encode(
vl.x().fieldQ("x").scale({domain:[0,10]}),
vl.y().fieldQ("y")
)
Insert cell
blueLine = vl.markLine({stroke:"black",strokeWidth:3})
.data([{x:s,y:0},{x:s,y:10}])
.encode(
vl.x().fieldQ("x").scale({domain:[0,10]}),
vl.y().fieldQ("y")
)
Insert cell
bluePoints = vl.markCircle({stroke:"black",fill:"blue",size:200})
.data([{x:s,y:0},{x:s,y:10}])
.encode(
vl.x().fieldQ("x").scale({domain:[0,10]}),
vl.y().fieldQ("y")
)
Insert cell
bottomLine = vl.markLine({stroke:"black",strokeWidth:3})
.data([{x:s,y:0},{x:5,y:0}])
.encode(
vl.x().fieldQ("x").scale({domain:[0,10]}),
vl.y().fieldQ("y")
)
Insert cell
topLine = vl.markLine({stroke:"black",strokeWidth:3})
.data([{x:5,y:10},{x:s,y:10}])
.encode(
vl.x().fieldQ("x").scale({domain:[0,10]}),
vl.y().fieldQ("y")
)
Insert cell
dataPoints = vl.markCircle({stroke:"black",fill:"aqua",size:50})
.data(data)
.encode(
vl.x().fieldQ("x").scale({domain:[0,10]}),
vl.y().fieldQ("y")
)
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