// file -> duplicate and file -> save

// this sketch first before you

// start working on it.

//

//

//

// Graph from Data, Bar graph example

//

// Slides:

// http://slides.com/sojamo/cid-3-2122/fullscreen#/12/5

​

let defaultColors;

let dataset;

​

function preload() {

  // preload our data from our .csv file

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

​

  // define colorscheme

​

  defaultColors = generateColorScheme(150, 0.1);

​

  // if you want your own colorset, you need

  // to create an array of colors like so:

  // defaultColors = [color(255,0,0), color(255,255,0)];

  // and of course you need to add more than just 2 colors

  // to array defaultColors

}

​

function setup() {

  // if you add SVG as 3rd parameter and then

  // press s, the canvas will be saved as SVG file

  createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(40);

​

  let d0 = dataset; // reaw dataset

  let d1 = dataset.sortByColumn(1, DESC); // sorted dataset

​

  drawDonut({

    dataset: d1, // use d0 or d1 here

    dataColumn: 1,

    labelColumn: 0,

    x: width / 2,

    y: height / 2,

    d: width / 2,

    thickness: 110,

    isLabel: true,

​

    colors: defaultColors,

  });

}

​

function drawDonut(theProps = {}) {

  let isLabel = theProps.isLabel || false;

  let labelColumn = theProps.labelColumn || 0;

​

  let x = theProps.x || 0;

  let y = theProps.y || 0;

  let d = theProps.d || 200;

  let thickness = theProps.thickness || 20;

  let colors = theProps.colors || defaultColors;

  let lc = theProps.lc || color(255);

​

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

  let labels = theProps.dataset.getColumn(theProps.labelColumn);

  let n = values.length;

​

  strokeWeight(thickness);

  strokeCap(SQUARE);

  // now lets draw the donut graph

  push();

​

  // transform the graph to the location

  // passed to the function by the

  // function caller.

  translate(x, y);

  noFill();

​

  let start = 0;

  let stop = 0;

​

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

    // we use the map() function to map values

    // from one range of numbers (our data) to

    // another range of numbers (an angle

    // between 0 and 2*PI)

    start = stop;

    let val = values[i];

    let sumOfAllValues = sum(values);

    stop = start + map(val, 0, sumOfAllValues, 0, TWO_PI);

​

    // assign color based on index i read from

    // our pre-defined colors array.

    stroke(colors[i]);

    noFill();

​

    // finally lets draw the arc-segment the value

    // read from our data

    arc(0, 0, d, d, start, stop);

​

    if (isLabel == true) {

      let r = start + (stop - start) / 2;

      let x = (d + thickness) / 1.8;

      push();

      rotate(r);

      translate(x, 0);

      if (start > HALF_PI && start < PI + HALF_PI) {

        rotate(PI);

        textAlign(RIGHT, CENTER);

      } else {

        textAlign(LEFT, CENTER);

      }

      noStroke();

      fill(lc);

      text(labels[i], 0, 0);

      pop();

    }

  }

​

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

  pop();

}

​

// if you want to use the SVG export

// option, go to setup and enable SVG mode

function keyPressed() {

  if (key === "s") {

    saveSVG("donut-graph.svg");

  }

}

​

////////////////////////////////////////////////////

//

// Helper function and constant variables

// no need to make any changes below.

//

////////////////////////////////////////////////////

​

function generateColorScheme(theAmountOfNumbers, theIntensity = 0.4) {

  let colors = [];

  let startWithIndex = 1500;

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

    let step = (startWithIndex + i) * theAmountOfNumbers * theIntensity;

    let rIntensity = 50;

    let gIntensity =30;

    let bIntensity = 100;

    let r = 127 + 127 * sin(step * rIntensity);

    let g = 127 + 127 * sin(step * gIntensity);

    let b = 127 + 127 * sin(step * bIntensity);

    colors[i] = color(r, g, b);

  }

  return colors;

}

​

function sum(theData) {

  let val = 0;

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

    val += int(theData[i]);

  }

  return val;

}

​

p5.Table.prototype.sortByColumn = function (theColumnId, theDir = -1) {

  let data = [];

  let len = this.getRowCount();

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

    let o = [];

    for (let j = 0; j < this.getColumnCount(); j++) {

      let v = this.getColumn(j)[i];

      if (!isNaN(v)) {

        if (v.toString().indexOf(".") != -1) {

          v = parseFloat(v);

        } else {

          v = parseInt(v);

        }

      }

      o.push(v);

    }

    data.push(o);

  }

​

  data.sort((a, b) => a[theColumnId] * theDir - b[theColumnId] * theDir);

​

  let table = new p5.Table();

  this.columns.forEach((el) => table.addColumn(el));

  data.forEach((el, i) => {

    table.addRow();

    el.forEach((v, j) => {

      if (!isNaN(v)) {

        if (v.toString().indexOf(".") != -1) {

          v = parseFloat(v);

        } else {

          v = parseInt(v);

        }

        table.setNum(i, j, v);

      } else {

        table.setString(i, j, v);

      }

    });

  });

  return table;

};

​

const DESC = -1;

const ASC = 1;

​