Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
scale = 32
height = 800
draw = {
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.enableVertexAttribArray(a_vertex);
gl.vertexAttribPointer(a_vertex, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
}
gl = canvas.getContext("webgl", {depth: false})
fragmentShader = {
const shader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(shader, `
precision highp float;
const float pi = 3.14159265359;
const float width = ${(width + 28).toFixed(1)}; // TODO uniform?
const float height = ${height.toFixed(1)}; // TODO uniform?
const vec2 center = vec2(width, height) / 2.0;
float value(float x, float y) {
return (${value});
}
vec3 cubehelix(vec3 c) {
float a = c.y * c.z * (1.0 - c.z);
float cosh = cos(c.x + pi / 2.0);
float sinh = sin(c.x + pi / 2.0);
return vec3(
(c.z + a * (1.78277 * sinh - 0.14861 * cosh)),
(c.z - a * (0.29227 * cosh + 0.90649 * sinh)),
(c.z + a * (1.97294 * cosh))
);
}
vec3 cubehelixDefault(float t) {
return cubehelix(vec3(mix(300.0 / 180.0 * pi, -240.0 / 180.0 * pi, t), 0.5, t));
}
vec3 cubehelixRainbow(float t) {
if (t < 0.0 || t > 1.0) t -= floor(t);
float ts = abs(t - 0.5);
return cubehelix(vec3((360.0 * t - 100.0) / 180.0 * pi, 1.5 - 1.5 * ts, 0.8 - 0.9 * ts));
}
void main(void) {
vec2 z = (gl_FragCoord.xy - center) / ${scale.toFixed(1)};
gl_FragColor = vec4(cubehelixRainbow(value(z.x, z.y)), 1.0);
}
`);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
throw new Error(gl.getShaderInfoLog(shader));
}
vertexShader = {
const shader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(shader, `
attribute vec2 a_vertex;
void main(void) {
gl_Position = vec4(a_vertex, 0.0, 1.0);
}
`);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
throw new Error(gl.getShaderInfoLog(shader));
}
program = {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program;
throw new Error(gl.getProgramInfoLog(program));
}
vertexBuffer = {
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, Float32Array.of(-1, -1, +1, -1, +1, +1, -1, +1), gl.STATIC_DRAW);
return buffer;
}
a_vertex = gl.getAttribLocation(program, "a_vertex")
style = html`<style>
textarea.source {
display: block;
box-sizing: border-box;
width: calc(100% + 28px);
font: var(--monospace-font, var(--mono_fonts));
min-height: 33px;
border: none;
padding: 6px 10px;
margin: 0 -14px;
background: rgb(247,247,249);
tab-size: 2;
resize: none;
}
textarea.source:focus {
outline: none;
}
</style>`
import {legend, d3} from "@d3/color-legend"
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.
