Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
The Mandelbrot SetDomain WarpingMaking WebGL DancePseudo-glslifyLiquidFunDomain Coloring for Complex FunctionsBuddhabrot PlaygroundComplex PlotNight Skies — Lights and Light Pollution WebGL Globede Jong Attractor IIMetaballsHello, Three.js!Hello, Three.js Orbit Controls!WebGL Fluid SimulationIsometric logos created with three.jsGray–Scott Reaction DiffusionGame of life with reglMDN WebGL Demo #2WebGL PastaClifford Attractor III
Conway’s Game of Life
viewof gl = {
const canvas = document.createElement("canvas");
canvas.width = W;
canvas.height = H;
const gl = canvas.value = canvas.getContext("webgl");
if (!gl) throw new Error("WebGL unsupported");
if (gl.getParameter(gl.MAX_TEXTURE_SIZE) < W) throw new Error("big textures unsupported");
canvas.style.imageRendering = "pixelated";
return canvas;
}
mouse = Generators.observe(notify => {
let down;
const moved = (event) => {
if (!down) return;
notify([event.layerX, event.layerY]);
gl.useProgram(timestep);
gl.uniform2f(u_mouse, event.layerX, H - event.layerY);
};
const downed = event => {
down = true;
moved(event);
};
const upped = () => {
down = false;
notify(null);
gl.useProgram(timestep);
gl.uniform2f(u_mouse, NaN, NaN);
};
viewof gl.addEventListener("mousedown", downed);
addEventListener("mousemove", moved);
addEventListener("mouseup", upped);
upped();
return () => {
viewof gl.removeEventListener("mousedown", downed);
removeEventListener("mousemove", moved);
removeEventListener("mouseup", upped);
};
})
timestep = newProgram(timestepShader)
render = newProgram(renderShader)
u_mouse = gl.getUniformLocation(timestep, "u_mouse")
{
replay;
let t1 = newTexture(initialState()), b1 = newFramebuffer(t1);
let t2 = newTexture(), b2 = newFramebuffer(t2);
while (true) {
gl.useProgram(timestep);
gl.bindTexture(gl.TEXTURE_2D, t1);
gl.bindFramebuffer(gl.FRAMEBUFFER, b2);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
gl.useProgram(render);
gl.bindTexture(gl.TEXTURE_2D, t2);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
[t1, b1, t2, b2] = [t2, b2, t1, b1];
yield;
}
}
function initialState() {
const array = new Uint8Array(4 * W * H);
for (let y = 0; y < H; ++y) {
for (let x = 0; x < W; ++x) {
array[W * y + x << 2] = Math.random() > 0.5 ? 255 : 0;
}
}
return array;
}
W = 1024
H = 512
timestepShader = newShader(gl.FRAGMENT_SHADER, `
precision mediump float;
uniform sampler2D u_image;
uniform vec2 u_size;
uniform vec2 u_mouse;
void main() {
vec2 position = gl_FragCoord.xy;
if (distance(u_mouse, position) < 12.0) {
gl_FragColor = vec4(1, 0, 0, 0);
} else {
int s = int(texture2D(u_image, position / u_size).x), n = -s;
for (int dx = -1; dx <= 1; ++dx) {
for (int dy = -1; dy <= 1; ++dy) {
n += int(texture2D(u_image, (position + vec2(dx, dy)) / u_size).x);
}
}
gl_FragColor = vec4(s == 1 ? 2 <= n && n <= 3 : n == 3, 0, 0, 0);
}
}`)
renderShader = newShader(gl.FRAGMENT_SHADER, `
precision mediump float;
uniform sampler2D u_image;
uniform vec2 u_size;
void main() {
gl_FragColor = vec4(0, 0, 0, texture2D(u_image, gl_FragCoord.xy / u_size).x);
}`)
vertexShader = newShader(gl.VERTEX_SHADER, `
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}`)
function newTexture(source) {
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, W, H, 0, gl.RGBA, gl.UNSIGNED_BYTE, source);
return texture;
}
function newFramebuffer(texture) {
const framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
return framebuffer;
}
function newShader(type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(shader));
return shader;
}
function newProgram(fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error("cannot link program");
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
const a_position = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(a_position);
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
gl.uniform2f(gl.getUniformLocation(program, "u_size"), W, H);
return program;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.