Published
Edited
Dec 8, 2020
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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])
Insert cell
// frame = 300
Insert cell
Insert cell
Insert cell
Insert cell
bgColor = weightColor(toOneScale(10))
Insert cell
Insert cell
Insert cell
rotation = -0.2
Insert cell
frames = d3.range(360)
Insert cell
Insert cell
Insert cell
myBoids = {
const sim = new Boids();

// Add 500 boids
for (let i = 0; i < width * .5; i++) {
sim.add();
// yield sim
}
return sim;
}
Insert cell
myBoids
.height(height + 100)
.alignment(0.72)
.cohesion(0.5)
.separation(0.85)
.perception(20)
.quadtree(true)
.maxSpeed(2.75)
Insert cell
import { cwf } from "@codingwithfire/cwf-season-2-reusable-style-elements"
Insert cell
myBoids
Insert cell
height = 500
Insert cell
d3 = require("d3@6", "https://files-5ouswn75j.vercel.app/d3-contour.js")
Insert cell
import { Scrubber } from "@mbostock/scrubber"
Insert cell

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.
Learn more