two lines. Enable p5.js under Libraries, wait until it is checked, then paste the whole editor.
Goal
Run every block and confirm the chart is visible.
document.body.innerHTML = "";
new p5((s) => {
s.setup = () => { s.createCanvas(420, 200); s.noLoop(); };
s.draw = () => { s.background(250); const drawLine = (arr, col) => { s.stroke(col); s.noFill(); s.beginShape(); arr.forEach((v, i) => s.vertex(40 + i * 100, s.map(v, 0, 160, 180, 20))); s.endShape(); }; drawLine([48,55,92,150], "#1d4f7a"); drawLine([22,18,40,80], "#c45c26"); };
});
console.log("two");document.body.innerHTML = "";
new p5((s) => {
const units = [21, 15, 15, 18, 12];
s.setup = () => { s.createCanvas(440, 220); s.noLoop(); };
s.draw = () => {
s.background(250);
units.forEach((u, i) => { s.fill('#1d4f7a'); s.rect(30 + i * 80, 180 - u * 6, 50, u * 6); });
};
});
console.log('bars');document.body.innerHTML = "";
new p5((s) => {
const mm = [48, 55, 92, 150];
s.setup = () => { s.createCanvas(420, 200); s.noLoop(); };
s.draw = () => { s.background(250); s.noFill(); s.stroke("#1d4f7a"); s.beginShape(); mm.forEach((v, i) => s.vertex(40 + i * 100, s.map(v, 0, 160, 180, 20))); s.endShape(); };
});
console.log("line");console.log('many');