Public
Edited
Mar 22, 2023
{
const container = d3.select(DOM.svg(600,300)).attr("style","border:black 1px solid")
for(let i = 0;i < 500;i = i + 1){
const x = d3.randomUniform(0,600)()
const y = d3.randomUniform(0,300)()
const r = d3.randomUniform(0,10)()
const walker = new Walker(container,x,y,r,"steelblue")
walker.walk(10,100)
}
yield container.node()
}
class Walker{
constructor(element,x,y,r,fill){
this.x = x
this.y = y
this.circle = element.append("circle")
.attr("r",r)
.attr("cx",x)
.attr("cy",y)
.attr("fill",fill)
.attr("stroke","black")
}
step(dx,dy){
this.x = this.x + dx
this.y = this.y + dy
const d = Math.sqrt(dx*dx + dy*dy)
return this.circle.transition().duration(10*d).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(-1,1)()*maxStepSize
const dy = d3.randomUniform(-1,1)()*maxStepSize
await this.step(dx,dy).end()
console.log(i)
}
}
}
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.
