Published
Edited
Jun 16, 2020
1 star
Insert cell
Insert cell
p5(sketch => {
sketch.setup = function() {
sketch.createCanvas(1000, 1000);
sketch.noLoop();
sketch.pixelDensity(2);
};
sketch.draw = function() {
sketch.background('#F7F7F7');
sketch.stroke('#3E454F');
sketch.strokeWeight(1.5);
sketch.noFill();

let margin = 50;
let step = 900 / 110;

sketch.translate(0, margin);

for (let i = 25; i < 135; i++) {
sketch.translate(0, step);
sketch.push();
sketch.beginShape();
for (let j = 30; j < data[i].values.length; j++) {
sketch.vertex(
sketch.map(j, 30, 360, margin, sketch.width - margin),
sketch.map(data[i].values[j], -0.1, 1, -10, 10) * -1
);
}
sketch.pop();
sketch.endShape();
}
};
})
Insert cell
Insert cell
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