Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
p5(sketch => {
const c = sketch.color("#DC3F74");
sketch.setup = () => {
sketch.createCanvas(...canvasSize());
sketch.textAlign(sketch.CENTER);
sketch.textFont("sans-serif");
sketch.textStyle(sketch.BOLD);
};
sketch.draw = () => {
sketch.translate(sketch.millis() / 10 % sketch.width, sketch.height / 2);
sketch.background(viewof background.valueAsNumber);
sketch.fill(c).textSize(100);
sketch.text("p5.js, fullscreen", 0, 0);
};
sketch.windowResized = () => {
sketch.resizeCanvas(...canvasSize());
};
})
function canvasSize() {
return [
document.body.clientWidth,
document.body.clientWidth * screen.height / screen.width
];
}
p5 = {
const p5 = await require("p5@0.7/lib/p5.min.js");
return function*(sketch) {
const element = document.createElement("div");
yield element;
const instance = new p5(sketch, element, true);
try {
while (true) {
yield element;
}
} finally {
instance.remove();
}
};
}
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.
