//

// Here, we are visualizing NBA 3-pointers over time

// The CSV data format is:

//   "Year,Season,3 Pointers"

// 

// By Professor Jon E. Froehlich

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

//

let table;

let maxNum3Pters;

​

function preload(){

  table = loadTable("data/nba_3pointers_made.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 3 pters made

  maxNum3Pters = max(table.getColumn('3 Pointers'));

  print("Max num of 3 pters " + maxNum3Pters);

}

​

function draw() {

  background(220);

  // Set some visual design constants

  const rectWidth = 20; // in pixels

  const graphHeight = 330; // height of our graph

  const xMargin = 50;

  const yMargin = 40;

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

    // Translate value from value range to pixel range

    const num3Pointers = table.getNum(i, 2);

    const barHeight = map(num3Pointers, 0, maxNum3Pters, 0, graphHeight);

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

    const xBar = xMargin + i * (rectWidth + 5); // 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); 

  }

}