Published
Edited
Apr 29, 2020
data = FileAttachment("ufo-subset.csv").url()
function drawCircle(x, y, d, sketch) {
sketch.push();
sketch.stroke(0, 0, 255);
sketch.strokeWeight(5);
sketch.noFill();
sketch.ellipse(x, y, d, d);
sketch.pop();
}
p5(s => {
let inc = 0.01;
s.setup = () => {
s.createCanvas(500, 500);
s.frameRate(2);
s.pixelDensity(1);
s.noiseDetail(8);
};
s.draw = () => {
let yoff = 0;
s.loadPixels();
for (let y = 0; y < s.width; y++) {
let xoff = 0;
for (let x = 0; x < s.height; x++) {
let index = x + y * s.width;
let r = s.noise(xoff, yoff) * 255;
s.pixels[0 + index] = r;
s.pixels[1 + index] = r;
s.pixels[2 + index] = r;
s.pixels[3 + index] = 255;
xoff += inc;
}
yoff += inc;
}
s.updatePixels();
s.noLoop();
};
})
import { slider } from "@jashkenas/inputs"
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.
