{
// simulation
const sim = new AA.Simulation({
width: 700,
height: 300,
gridStep: 100
}).vis({baseColor: 0xffffff});
invalidation.then(() => sim.end());
// squares
for (let sq of sim.squares) {
if (sq.index % 2) {
sq.zIndex = 0;
sq.updateState = () => sq.zIndex = (sq.zIndex + 1) % 350;
sq.vis({tint: color});
}
}
// zone (rectangle)
new AA.Zone({
indexLimits: [0, 1, 0, 2],
zIndex: 201
}).vis({tint: color})
.addTo(sim);
// actors (circles)
sim.populate({
n: 4,
radius: 50,
padding: sim.width / 5,
setup: (ac, i) => {
ac.vel = new AA.Vector(1, 1);
ac.zIndex = i * 100 + 50;
ac.vis({tint: color});
}
});
// actors bounce off boundary
sim.interaction.set('bounce', {
group1: sim,
group2: sim.actors,
behavior: 'bounce'
});
// vis
function color(agent) {
const obj = d3.color(d3.interpolateBlues(agent.zIndex / 350));
return AV.PIXI.utils.rgb2hex([obj.r / 255, obj.g / 255, obj.b / 255]);
}
return AV.visObs(sim);
}
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.
