Data: CSV

Load CSV data with loadTable() and map values to chart positions.

Example 1: CSV Line Plot

Code

let table;

function preload() {
  table = loadTable('../assets/data/example.csv', 'csv', 'header');
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(252);
  stroke(255, 45, 140);
  strokeWeight(3);
  noFill();
  beginShape();
  for (let i = 0; i < table.getRowCount(); i++) {
    const x = map(i, 0, table.getRowCount() - 1, 40, width - 40);
    const v = table.getNum(i, 'value');
    const y = map(v, 0, 100, height - 40, 40);
    vertex(x, y);
  }
  endShape();
}

Try this: Try plotting a different column from the same file.

Open sketch in new tab

Example 2: CSV Dot Labels

Code

let table;

function preload() {
  table = loadTable('../assets/data/example.csv', 'csv', 'header');
}

function setup() {
  createCanvas(400, 400);
  textAlign(CENTER);
}

function draw() {
  background(255);
  for (let i = 0; i < table.getRowCount(); i++) {
    const x = map(i, 0, table.getRowCount() - 1, 50, width - 50);
    const val = table.getNum(i, 'value');
    const y = map(val, 0, 100, height - 50, 60);
    fill(255, 45, 140);
    noStroke();
    circle(x, y, 16);

    fill(20);
    text(table.getString(i, 'year'), x, height - 20);
  }
}

Try this: Use the year field as x-labels under each point.

Open sketch in new tab

Resources