Public
Edited
Mar 30, 2023
1 fork
{
const container = d3.select(DOM.svg(500,500)).attr("style","border:solid 1px black")
container.on("click",() => {
mutable toggle = -mutable toggle
})
for(let i = 0;i < 200;i = i + 1){
const x = d3.randomUniform(0,500)()
const y = d3.randomUniform(0,500)()
const r = d3.randomUniform(0,10)()
const theta = d3.randomUniform(0,2*Math.PI)()
const walker = new Walker(container,x,y,r,theta,"lime")
walker.walk(10)
}
yield container.node()
}
class Walker{
constructor(element,x,y,r,theta,fill){
this.x = x
this.y = y
this.r = r
this.theta = theta
this.fill = fill
this.active = true
this.circle = element.append("circle")
.attr("r",r)
.attr("cx",x)
.attr("cy",y)
.attr("fill",fill)
.attr("stroke","black")
}
step(stepSize){
const r = d3.randomUniform(0,1)()
const dx = r*stepSize*Math.cos(this.theta)
const dy = r*stepSize*Math.sin(this.theta)
this.x = this.trim(this.x + dx)
this.y = this.trim(this.y + dy)
return this.circle.transition().duration(20*r*stepSize).ease(d3.easeLinear).attr("cx",this.x).attr("cy",this.y)
}
async walk(stepSize){
while(this.active){
await this.step(stepSize).end()
if(this.x == 0 || this.x == 500 || this.y == 0 || this.y == 500){
this.circle.attr("fill","red")
this.fill = "red"
}
const dtheta = d3.randomUniform(-Math.PI/6,Math.PI/6)()
this.theta = this.theta + dtheta
}
}
trim(x) {
if (x <= 0) {
return 0
} else if (x >= 500) {
return 500;
} else {
return x
}
}
}
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.
