EJ Fox & Ian Johnson
streaming data, code, acid, design
contour = d3
.contourDensity()
.x(d => d.pos[0])
.y(d => d.pos[1])
.thresholds(function(c) {
let tz = 20; // the number of thresholds to evenly space by (usually configured)
var stop = d3.max(c);
tz = d3.tickStep(0, stop, tz);
tz = d3.range(0, Math.floor(stop / tz) * tz, tz);
tz.shift();
// Observable's "console.log", you can watch the value change above in real-time
mutable debug = tz;
// return tz;
return thresholds;
})
// .cellSize(1)
.size([width, height + 100])
// frame = 300
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
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.
