let img;

let img2;

let img3;

let img4;

let img5;

let img6;

let img7;

let img8;

let img9;

let img10;

​

function preload() {

  //data = loadTable(url, 'csv', 'header');

  data = loadTable('2012data.csv', 'csv', 'header');

  img = loadImage('seriesicon.svg');

  img2 = loadImage('rereadicon.svg');

  img3 = loadImage('youngadulticon.svg');

  img4 = loadImage('dystopiaicon.svg');

  img5 = loadImage('cryingicon.svg');

  img6 = loadImage('timetravelicon.svg');

  img7 = loadImage('waricon.svg');

  img8 = loadImage('artisticon.svg');

  img9 = loadImage('killericon.svg');

  img10 = loadImage('brainicon.svg');

}

​

function setup() {

  createCanvas(2500, 2500, SVG);

  noStroke(); // this seems to be important to save an svg

​

  // rotate with numbers instead of weird pi things

  angleMode(DEGREES);

  noLoop();

}

​

function draw() {

  background(255);

​

  //this makes sure there is content in the data

  if (data) {

​

    //get the amount of rows in the CSV

    let numRows = data.getRowCount();

​

    //get the column titled Miles

    let pages = data.getColumn('Number of Pages');

    let title = data.getColumn("Title");

    let genre = data.getColumn("Main Genre");

    let rating = data.getColumn("My Rating");

    let series = data.getColumn("Series");

    let reread = data.getColumn("Reread");

    let young = data.getColumn("Young Adult");

    let dystopia = data.getColumn("Dystopia");

    let crying = data.getColumn("Crying");

    let time = data.getColumn("Time Travel");

    let war = data.getColumn("War");

    let artists = data.getColumn("Artists");

    let killers = data.getColumn("Serial Killers");

    let mental = data.getColumn("Mental Illness");

​

    //debug

    print(pages);

    print(title);

    print(genre);

    print(rating);

​

    //iterate over the number of rows

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

​

      let x = 100;

      let y = 100 + (i * 15); //i*20 will increment by 20 each time the loop runs

      let w = pages[i]/1.5; //pages is length of bar

      let h = 25;

      let z = rating[i]*10; //for inner circle bars

​

      if (genre[i] == 1) {

        fill("#a494ab");

      } else if (genre[i] == 2) {

        fill("#99ccd3");

      } else if (genre[i] == 3) {

        fill("#7c96b0");

      } else if (genre[i] == 4) {

        fill("#F2BE88");

      } else if (genre[i] == 5) {

        fill("#87A18F");

      } else if (genre[i] == 6) {

        fill("#cab64b");

      } else if (genre[i] == 7) {

        fill("#DB898E");

      } else if (genre[i] == 8) {

        fill("#CD545B");

      } else if (genre[i] == 9) {

        fill("#cda177");

      } else if (genre[i] == 10) {

        fill("#a7a8a9");

      }

      push();

      translate(width / 2, height / 2);

      rotate((360 / numRows) * i);

      rect(400, 0, w, h); // outside circle

​

      if (rating[i] == 1) {

        fill(220);

      } else if (rating[i] == 2) {

        fill(200);

      } else if (rating[i] == 3) {

        fill(150);

      } else if (rating[i] == 4) {

        fill(75);

      } else if (rating[i] == 5) {

        fill(0);

      }

      rect(330, 0, z, 25); // inside circle

       // image(picture, 400+w+20,5);

      if (series[i] == 1) {

          image(img, 400+w+5,0,10,25);

          }

      if (reread[i] == 1) {

        image(img2, 400+w+15,0,25,25);

      }

      if (young[i] == 1) {

        image(img3, 400+w+45,0,15,25);

      }

      if (dystopia[i] == 1) {

        image(img4, 400+w+70,0,25,25);

      }

      if (crying[i] == 1) {

        image(img5, 400+w+95,0,25,25);

      }

      if (time[i] == 1) {

        image(img6, 400+w+120,0,25,20);

      }

      if (war[i] == 1) {

        image(img7, 400+w+140,0,20,25);

      }

      if (artists[i] == 1) {

        image(img8, 400+w+160,0,25,25);

      }

      if (killers[i] == 1) {

        image(img9, 400+w+180,0,25,25);

      }

      if (mental[i] == 1) {

        image(img10, 400+w+200,0,25,25);

      }

      fill(0);

      textSize(14);

      textFont ('Arial');

      text(title[i], 405, 16);

      pop();

    }

  }

   save();

}