value = (x, y) => Math.sin(x + y) * Math.sin(x - y)
chart = {
const context = DOM.context2d(width, height);
const path = d3.geoPath(null, context);
context.scale(width / (grid.n - 1), width / (grid.n - 1));
context.translate(-0.5, -0.5);
while (true) {
const dv = (Date.now() % 1000) / 1000 * 0.2;
for (const v of thresholds) {
context.beginPath();
path(contours.contour(grid, v + dv));
context.fillStyle = color(v + dv);
context.fill();
}
yield context.canvas;
}
}
color = d3.scaleSequential([-1, 1], d3.interpolateSpectral)
thresholds = Array.from({length: 11}, (_, i) => (i - 6) / 5)
grid = {
const x0 = -q / 2, x1 = width + q;
const y0 = -q / 2, y1 = height + q;
const n = Math.ceil((x1 - x0) / q);
const m = Math.ceil((y1 - y0) / q);
const grid = new Array(n * m);
for (let j = 0; j < m; ++j) {
for (let i = 0; i < n; ++i) {
grid[j * n + i] = value(i * q * scale, j * q * scale);
}
}
grid.n = n;
grid.m = m;
return grid;
}
contours = d3.contours().size([grid.n, grid.m])
q = 6 // The level of detail, e.g., sample every 4 pixels in x and y.
scale = 1 / 80
height = 600
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.
