// this sketch first before you 

// start working on it.

​

​

​

let data;

​

function setup() {

  createCanvas(400, 400);

  data = [25,20,22,30,25,40,60,70,50,45,30];

  // TODO use a for-loop, random() and Array.push() commands

  // to add more data-points to array data so the array

  // contains 20 numbers

}

​

function draw() {

  background(200);

  let numbers = [2,4,6,8,10]

  // use a variable to store the width of a line-segment

  // we will use that variable multiple times below.

  let lineWidth = 20;

  // calculate the location to display 

  // the graph centered.

  let centerX = (width/2)-(data.length/2)*lineWidth;

  let centerY = height/2;

  // draw visual elements

  push();

  // transform the graph and move it to the center

  translate(centerX, centerY);

  // TODO play with colors?

  stroke(0);

  strokeWeight(1);

  noFill();

  textSize

  textAlign(CENTER)

  // draw the graph

  for (let x = 0; x < 5; x++){

  line(0,0,lineWidth*data.length,1);

  line(lineWidth*data.length/5*(x+1),1,

       lineWidth*data.length/5*(x+1),5)

  text(numbers[x],lineWidth*data.length/5*(x+1),20)

  }

  // actual graph

  stroke(200,100,100);

  strokeWeight(3);

  beginShape();

  for(let i=0;i<data.length;i++) {

    // to make the graph point upwards, 

    // add a minus sign before data[i]

    // so the height becomes negative and points up

    vertex(i * lineWidth, -data[i]);

  }

  endShape();

  // for intidicating points

  for(let i=0;i<data.length;i++) {

    stroke(200)

    strokeWeight(1)

    fill(200,100,100)

    ellipse(i * lineWidth, -data[i],7)

  }

  pop();

}