Public
Edited
Jan 6, 2023
Insert cell
Insert cell
Insert cell
function colorRamp(color, n = 8000) {
const canvas = DOM.canvas(n, 1);
const context = canvas.getContext("2d");
canvas.style.margin = "0 -14px";
canvas.style.width = 400 + "px";

canvas.style.height = 400 + "px";

for (let i = 0; i < n; ++i) {
context.fillStyle = color(i / (n - 1));
context.fillRect(i, 0, 1, 1);
}
return canvas;
}
Insert cell
function* range(n) {
for (let i = 0; i < n; ++i) {
yield i;
}
}
Insert cell
// Taken from https://www.paulirish.com/2009/random-hex-color-code-snippets/

function randomHex() {
return "#" + Math.floor(Math.random() * 16777215).toString(16);
}
Insert cell
//import { p5 } from "@tmcw/p5"
Insert cell

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.
Learn more