Scatter

document.body.innerHTML = "";
new p5((s) => {
  const pts = [[12,1260],[7,1540],[9,945],[4,880]];
  s.setup = () => { s.createCanvas(420, 200); s.noLoop(); };
  s.draw = () => { s.background(250); s.fill("#1d4f7a"); pts.forEach(([u, sh]) => s.circle(s.map(u, 0, 20, 30, 400), s.map(sh, 0, 1800, 180, 20), 10)); };
});
console.log("scatter");

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('scatter');