Estimation statistics, craft beer, data visualization, web scraping, poetry
p5((sketch) => {
// change both `y` and `d` and observe the effect.
var y = 60;
var d = 40;
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
sketch.draw = () => {
sketch.background(204);
sketch.ellipse(75, y, d, d); // Left
sketch.ellipse(175, y, d, d); // Middle
sketch.ellipse(275, y, d, d); // Right
};
})
p5((sketch) => {
let w = width / 2; // adjust and see what happens
let h = 120;
sketch.setup = () => {
sketch.createCanvas(w, h);
};
sketch.draw = () => {
sketch.background(204);
sketch.line(0, 0, w, h); // Line from (0,0) to (w, h)
sketch.line(w, 0, 0, h); // Line from (w, 0) to (0, h)
sketch.ellipse(w / 2, h / 2, 60, 60);
};
})
p5((sketch) => {
var x = 25;
var h = 20;
var y = 25;
sketch.setup = () => {
sketch.createCanvas(width, 120);
};
sketch.draw = () => {
sketch.background(204);
sketch.rect(x, y, 300, h); // Top
// x = x + 100;
sketch.rect(x + 100, y + h, 300, h); // Middle
// x = x - 250;
sketch.rect(x - 250, y + h * 2, 300, h); // Bottom
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
sketch.strokeWeight(8);
};
sketch.draw = () => {
sketch.background(204);
for (var i = 20; i < 400; i += 60) {
sketch.line(i, 40, i + 60, 80);
}
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
sketch.strokeWeight(2);
};
sketch.draw = () => {
sketch.background(204);
for (var i = 20; i < 400; i += 8) {
var x2 = i + 60;
sketch.line(i, 40, x2, 80);
}
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
sketch.strokeWeight(2);
};
sketch.draw = () => {
sketch.background(204);
for (var i = 20; i < 400; i += 20) {
var x2 = i + i / 3;
sketch.line(i, 40, x2, 80);
}
};
})
p5((sketch) => {
sketch.setup = () => {
sketch.createCanvas(width, 120);
sketch.strokeWeight(2);
};
sketch.draw = () => {
sketch.background(204);
for (var i = 20; i < 400; i += 20) {
sketch.line(i, 0, i + i / 2, 80);
sketch.line(i + i / 2, 80, i * 1.2, 120);
}
};
})
p5((sketch) => {
let w = width;
let h = 120;
sketch.setup = () => {
sketch.createCanvas(w, h);
sketch.noStroke();
};
sketch.draw = () => {
sketch.background(0);
let d = 40;
for (var y = 0; y <= h; y += d) {
// first loop runs throuh the rows.
for (var x = 0; x <= w + d; x += d) {
// second loop runs through the columns.
sketch.fill(255, 150);
sketch.ellipse(x, y, d, d);
}
}
};
})
p5((sketch) => {
let h = 120;
sketch.setup = () => {
sketch.createCanvas(width, h);
sketch.fill(255);
sketch.stroke(102);
};
sketch.draw = () => {
sketch.background(0);
for (var y = 20; y <= h - 20; y += 10) {
for (var x = 20; x <= width - 20; x += 10) {
sketch.ellipse(x, y, 4, 4);
// Draw a line to the center of the display
sketch.line(x, y, width / 2, h / 2);
}
}
};
})
p5((sketch) => {
let h = 120;
let w = width;
sketch.setup = () => {
sketch.createCanvas(width, h);
};
sketch.draw = () => {
sketch.background(0);
for (var y = 24; y <= h; y += 12) {
let r = 16 - y/12; // Radius grows smaller as y increases.
for (var x = 12; x <= w; x += 15) {
sketch.ellipse(x + y, y, r, r);
}
}
};
})
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.
