//

// a more advanced application of a line graph

// see comments below

//

// What is a line graph?

// https://www.data-to-viz.com/graph/line.html

// A line chart or line graph displays the evolution of

// one or several numeric values. Data points are

// connected by straight line segments.

​

let dataset;

​

function preload() {

  // preload our data from our .csv file

  //

  // @make-changes-here

  // add your data by uploading your data.csv file

  // click box with left-arrow under the play button

  // to open Sketch Files

  dataset = loadTable("data.csv", "csv", "header");

}

​

function setup() {

  // @make-changes-here

  // add SVG as the createCanvas' 3rd argument here

  // this will then allow you to save the

  // rendered image to an SVG file when key-press s

  createCanvas(windowWidth, windowHeight);

  smooth();

}

​

function draw() {

  // take care of the background, first clear

  // everything, then (not)use the background fill.

  clear();

  background(0);

​

  // now draw 3 line graphs based on values

  // from dataset columns 1 (longitude),2 (latitude),

  // and 3 (data). (Although longitude and latitude

  // by themselves dont make so much sense here and

  // should probably be combined in a route map, we

  // can draw each of them as a line graph)

​

  // @make-changes-here

  // change colors, position, dimension, etc.

  // for each line graph below

  // or remove 2 of the 3 and only focus on

  // making design changes to one of the line graphs

​

  drawLineGraphFor({

    dataset: dataset,

    column: 2,

    label: "Longitude (deg.)",

    bg: color(255),

    fg: color(40),

    labelColor: color(200),

    strokeWeight: 5,

    w: 200,

    h: 300,

    x: 100,

    y: 40,

  });

​

  // @make-changes-here

  drawLineGraphFor({

    dataset: dataset,

    column: 1,

    label: "Latitude (deg.)",

    bg: color(255),

    fg: color(40),

    labelColor: color(200),

    strokeWeight: 5,

    w: 200,

    h: 300,

    x: 100,

    y: 400,

  });

​

  // @make-changes-here

  drawLineGraphFor({

    dataset: dataset,

    column: 3,

    label: "Distance (metres)",

    bg: color(255),

    fg: color(40),

    labelColor: color(200),

    strokeWeight: 5,

    w: 200,

    h: 660,

    x: 400,

    y: 40,

  });

   // @make-changes-here

  drawLineGraphFor({

    dataset: dataset,

    column: 3,

    label: "Average Duration (mins)",

    bg: color(255),

    fg: color(40),

    labelColor: color(200),

    strokeWeight: 5,

    w: 400,

    h: 660,

    x: 700,

    y: 40,

  });

}

​

function drawLineGraphFor(theProps) {

  // retrieve values from data.csv by column

  // here we start counting from 0, hence, 3 refers

  // to the 4th column

  let values = theProps.dataset.getColumn(theProps.column);

​

  // calculate the highest and lowest value from

  // our list (or array) of values

  let minValue = min(values); //minimum value from all values

  let maxValue = max(values); //maximum value from all values

​

  // for convenience we store the number of

  // elements inside array values in a variable n

  let n = values.length;

  let h = theProps.h;

  let w = theProps.w;

​

  let spacing = w / (n - 1);

  let marginTopBottom = 20;

​

  // we will calcualte the x and y values for each

  // point first, because we need it later a couple

  // of times.

  let x = [];

  let y = [];

​

  for (let i = 0; i < n; i++) {

    x[i] = i * spacing;

    y[i] = map(

      float(values[i]),

      minValue,

      maxValue,

      -marginTopBottom,

      marginTopBottom - h

    );

  }

​

  // now we can draw

  // our line-graph

  push();

  translate(theProps.x, theProps.y);

​

  // Background

  noStroke();

  if (theProps.bg) {

    fill(theProps.bg);

    rect(0, 0, w, h);

  }

​

  // Label

  noStroke();

  fill(theProps.labelColor ? theProps.labelColor : theProps.fg);

  textAlign(LEFT);

  text(theProps.label, 0, h + 15);

​

  // min and max values

  textAlign(RIGHT);

  text(nfs(minValue, 0, 0), -15, h - 2);

  text(nfs(maxValue, 0, 0), -15, 10);

​

  noFill();

  stroke(theProps.fg);

  strokeWeight(theProps.strokeWeight);

​

  // we need to vertical-move the

  // line graph first so that it is

  // properly positioned.

  translate(1, h);

​

  // and now we can render

  // the line of our linegraph

  beginShape();

  vertex(x[0], y[0]);

  for (let i = 0; i < n; i++) {

    curveVertex(x[i], y[i]);

  }

  vertex(x[n - 1], y[n - 1]);

  endShape();

​

  pop();

}

​

function keyPressed() {

  if (key === "s") {

    saveSVG("graph-line-3.svg");

  }

}

​