Public
Edited
May 3, 2023
viewof points = Inputs.select([1,10,100,1000], {label: "Select one"})
{
const container = d3.select(DOM.svg(500,300)).attr("style","border:solid 1px black")
let walker
container.on("click",()=>{
mutable toggle = -mutable toggle
try{
Walker.active = false
}catch{}
})
if(toggle ==1){
walker = new Walker(container)
walker.step()
}
for(let i = 0;i < points;i = i + 1){
const x = d3.randomUniform(0,800)()
const y = d3.randomUniform(0,400)()
const r = 5
const walker = new Walker(container,300,150,r)
walker.step(300,100)
}
yield container.node()
}
class Walker{
constructor(element,x,y,r){
this.x = x
this.y = y
this.dx = d3.randomNormal(0, 10)()
this.dy = d3.randomNormal(0, 10)()
this.circle = element.append("circle")
.attr("fill","steelblue")
.attr("stroke","black")
.attr("cx",x)
.attr("cy",y)
.attr("r",r)
}
step(dx,dy,delay){
this.x = this.x + dx * this.dx
this.y = this.y + dy * this.dy
return this.circle.transition().delay(500).duration(1000).ease(d3.easeLinear).attr("cx",this.x).attr("cy",this.y)
}
//async walk(steps,maxStepSize){
//for(let i = 0;i < steps; i = i + 1){
//const dx = d3.randomUniform(-4,4)()*maxStepSize
//const dy = d3.randomUniform(-4,4)()*maxStepSize
//await this.step(dx,dy).end()
//}
//}
}
mutable toggle = 1
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.
