Types of Graphs

let diamonds, mpg, seals, economics;

let myPlot;

​

function preload() {

  diamonds = loadJSON("https://raw.githubusercontent.com/IDMNYU/p5.js-plot/master/support/diamonds.json");

  seals = loadJSON("https://raw.githubusercontent.com/IDMNYU/p5.js-plot/master/support/seals.json");

  mpg = loadJSON("https://raw.githubusercontent.com/IDMNYU/p5.js-plot/master/support/mpg.json");

  economics = loadJSON("https://raw.githubusercontent.com/IDMNYU/p5.js-plot/master/support/economics.json");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(255);

  myPlot = new p5.Plot({ left: width*0.2, top: height*0.3, right: width*0.8, bottom: height*0.7 });

​

  myPlot.plot({ type: 'line', data: economics, xkey: 'pop', ykey: 'unemploy', strokeweight: 5});

​

  // POINT

  //myPlot.plot({type: 'point', data: mpg, xkey: 'year', ykey: 'displ', strokeweight: 5});

}

​

function draw() {

  background(255);

  myPlot.redraw();

  myPlot.hover(mouseX, mouseY, 'point');

  //myPlot.hover(mouseX, mouseY, 'bin');

}