//

// Here, we are visualizing my runs over the past decade.

// The CSV format is:

// Year,Total Runs,Total Distance (miles),Avg Distance (mi)

// 

// By Professor Jon E. Froehlich

// https://makeabilitylab.cs.uw.edu/

//

let table;

let maxNumOfRuns;

​

function preload(){

  table = loadTable("data/froehlich_run_stats.csv", "csv", "header");

}

​

function setup() {

  createCanvas(500, 400);

  // Print values from table

  print(table.getRowCount() + ' total rows in table');

  print(table.getColumnCount() + ' total columns in table');

  print(table.getColumn('Year'));

  // Get and print the max num of runs

  maxNumOfRuns = max(table.getColumn('Total Runs'));

  print("Max num of runs " + maxNumOfRuns);

}

​

function draw() {

  background(220);

  // Set some visual design constants

  const rectWidth = 25; // in pixels

  const graphHeight = 320; // height of our graph

  const xMargin = 50;

  const yMargin = 40;

  const xSpaceBetweenBars = 12;

  for(let i = 0; i < table.getRowCount(); i++){

    // Translate value from value range to pixel range

    const numRuns = table.getNum(i, 1);

    const barHeight = map(numRuns, 0, maxNumOfRuns, 0, graphHeight);

    const yBar = graphHeight - barHeight; // top y loc of bar

    const xBar = xMargin + i * (rectWidth + xSpaceBetweenBars); // x loc of bar

    // rect(x, y, w, h) draws a rectangle at x,y with a width w and 

    // height h. See: https://p5js.org/reference/#/p5/rect

    rect(xBar, yBar + yMargin, rectWidth, barHeight); 

  }

}