Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
viewof alpha = html`<input type=range min=0 max=2 value=0.6667 step=any>`
viewof beta = html`<input type=range min=0 max=2 value=1.3333 step=any>`
viewof gamma = html`<input type=range min=0 max=2 value=1 step=any>`
viewof delta = html`<input type=range min=0 max=2 value=1 step=any>`
function changeChart(positiveColor, options, f1, f2) {
const [T, X, Y] = simulate(options);
const height = 240;
const margin = {top: 20, right: 30, bottom: 30, left: 40};
const x = d3.scaleLinear().domain([0, 24]).range([margin.left, width - margin.right]);
const y = d3.scaleLinear().domain([0, 4]).range([height - margin.bottom, margin.top]);
const svg = d3.select(DOM.svg(width, height));
const positive = DOM.uid("positive");
const negative = DOM.uid("negative");
const defs = svg.append("defs");
defs.append("clipPath").attr("id", positive.id).append("path")
.attr("d", d3.area().x(x).y0(0).y1((t, i) => y(f2(X[i], Y[i])))(T));
defs.append("clipPath").attr("id", negative.id).append("path")
.attr("d", d3.area().x(x).y0(0).y1((t, i) => y(f1(X[i], Y[i])))(T));
svg.append("g")
.attr("transform", `translate(0,${y(0)})`)
.call(d3.axisBottom(x))
.call(g => g.select(".tick:first-of-type text").text("t = 0"));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(5, "+f"));
svg.append("path")
.attr("clip-path", positive)
.attr("fill", positiveColor)
.attr("fill-opacity", 0.7)
.attr("d", d3.area().x(x).y0(y(0)).y1((t, i) => y(f1(X[i], Y[i])))(T));
svg.append("path")
.attr("clip-path", negative)
.attr("fill", negativeColor)
.attr("fill-opacity", 0.7)
.attr("d", d3.area().x(x).y0(y(0)).y1((t, i) => y(f2(X[i], Y[i])))(T));
svg.append("path")
.attr("fill", "none")
.attr("stroke", color1)
.attr("stroke-width", 1.5)
.attr("d", d3.line().x(x).y((t, i) => y(f1(X[i], Y[i])))(T));
svg.append("path")
.attr("fill", "none")
.attr("stroke", color2)
.attr("stroke-width", 1.5)
.attr("d", d3.line().x(x).y((t, i) => y(f2(X[i], Y[i])))(T));
return svg.node();
}
viewof xy = new View([1.4, 1.6])
simulate = {
const l = 24, k = 20, n = l * k;
const solver = new odex.Solver(2);
solver.denseOutput = true;
return ({alpha, beta, gamma, delta, x0, y0}) => {
let i = 0;
const T = new Float64Array(n);
const X = new Float64Array(n);
const Y = new Float64Array(n);
const input = (_, [x, y]) => [alpha * x - beta * x * y, delta * x * y - gamma * y];
const output = solver.grid(1 / k, (t, [x, y]) => (T[i] = t, X[i] = x, Y[i] = y, ++i));
solver.solve(input, 0, [x0, y0], l, output);
return [T, X, Y];
};
}
function cycle(T, X, Y) {
let j, x0 = X[0], x1 = X[1], x2;
for (let i = 2, n = T.length; i < n; ++i) {
x0 = x1, x1 = x2, x2 = X[i];
if (x0 > x1 && x1 < x2) {
if (j > 0) return [T.slice(j, i), X.slice(j, i), Y.slice(j, i)];
j = i;
}
}
return [T, X, Y]; // Unable to find cycle!
}
xColor = d3.schemeCategory10[6]
yColor = d3.schemeCategory10[5]
color1 = d3.schemeCategory10[2]
color2 = d3.schemeCategory10[3]
negativeColor = "#aaa"
class View {
constructor(value) {
this._list = [];
this._value = value;
}
get value() {
return this._value;
}
set value(value) {
this._value = value;
this.dispatchEvent({type: "input", value});
}
addEventListener(type, listener) {
if (type != "input" || this._list.includes(listener)) return;
this._list = [listener].concat(this._list);
}
removeEventListener(type, listener) {
if (type != "input") return;
this._list = this._list.filter(l => l !== listener);
}
dispatchEvent(event) {
const p = Promise.resolve(event);
this._list.forEach(l => p.then(l));
}
}
exports = window.exports = {}
odex = require("odex@2").catch(() => exports)
d3 = require("d3@6")
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.
