p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
s.stroke(0);
};
s.draw = function () {
s.background(200);
s.line(30, 0, 30, height); // x1, x2, y1, y2
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
s.stroke(0);
};
s.draw = function () {
s.background(200);
s.line(30, 0, 30, height);
s.line(60, 0, 60, height);
s.line(90, 0, 90, height);
s.line(120, 0, 120, height);
s.line(150, 0, 150, height);
s.line(180, 0, 180, height);
s.line(210, 0, 210, height);
s.line(240, 0, 240, height);
s.line(270, 0, 270, height);
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(200);
s.stroke(0);
for (let line = 0; line <= width; line += 40) {
s.line(line, 0, line, height);
}
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(200);
s.stroke(0);
for (let i = 1; i <= 10; i++) {
s.strokeWeight(i * 2); // the double of tbe previous element
let lineX = i * 30;
s.line(lineX, 0, lineX, height);
}
};
})
p5((s) => {
s.setup = function () {
s.createCanvas(width, height);
};
s.draw = function () {
s.background(200);
s.noStroke();
s.fill(0)
for (let x = 0; x <= width; x += 30) {
for (let y = 0; y <= height; y += 30) {
s.circle(x, y, 10);
}
}
};
})
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.
