EJ Fox & Ian Johnson
streaming data, code, acid, design
contours = {
return contour(flockSet[frame]);
}
flockSet = {
return frames.map(i => {
myBoids.tick();
// return contour(myBoids.flock);
return myBoids.flock.map(d => ({ ...d }));
});
}
bgColor = weightColor(toOneScale(10))
rotation = -0.2
frames = d3.range(360)
myBoids = {
const sim = new Boids();
// Add 500 boids
for (let i = 0; i < width * .5; i++) {
sim.add();
// yield sim
}
return sim;
}
myBoids
.height(height + 100)
.alignment(0.72)
.cohesion(0.5)
.separation(0.85)
.perception(20)
.quadtree(true)
.maxSpeed(2.75)
import { cwf } from "@codingwithfire/cwf-season-2-reusable-style-elements"
myBoids
thresholds = [
//[0.01, 0.02, 0.03, 0.04, 0.05, 0.06, 0.07, 0.08, 0.09, 0.1]
0.005,
0.01,
0.015,
0.02,
0.025,
0.03,
0.035,
0.04,
0.045,
0.05,
0.055,
0.06,
0.065,
0.07,
0.075,
0.08,
0.085,
0.09,
0.095,
0.1
]
contour = d3
.contourDensity()
.x(d => d.pos[0])
.y(d => d.pos[1])
// .thresholds(10)
.thresholds(function() {
return thresholds;
})
// .cellSize(1)
.size([width, height + 100])
height = 500
d3 = require("d3@6", "https://files-5ouswn75j.vercel.app/d3-contour.js")
import { Scrubber } from "@mbostock/scrubber"
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.
