​

new p5();

function preload() {

  table = loadTable("assets/project_data.csv", "csv", "header");

  font = loadFont("assets/UbuntuMono-Regular.ttf");

}

​

function setup() {

  noCanvas();

  let pw = "100%";

  let ph = "320vw";

  let allrows = [];

​

  let meh;

  let eins;

  let inprozent;

  let meheight;

  let sumbox = 0; 

​

  let da = [];

  let myid = [];

  let pa = [];

  let ca = [];

​

  const s = (sketch) => {

    // empty

  };

​

​

  for (let i = 0; i < table.getRowCount(); i++) {

    //print(sumbox);

​

    sumbox = sumbox + table.getNum(i, 8); // höhe box

  }

​

  let pagewrapper = createDiv();

​

  pagewrapper.addClass("pagewrapper");

​

  let nav0 = createDiv();

  nav0.parent(pagewrapper);

  nav0.addClass("nav0");

​

​

  let viewport0 = createDiv();

  viewport0.parent(pagewrapper);

  viewport0.addClass("viewport0");

​

  let foot0 = createDiv();

  foot0.parent(pagewrapper);

  foot0.addClass("foot0");

​

​

  let chart0 = createDiv();

  chart0.parent(viewport0);

  chart0.addClass("chart0");

​

​

  let box0 = createDiv();

  box0.parent(chart0);

  box0.addClass("box0");

​

  let colors = ["black", "green", "purple", "blue", "pink"];

  let color1 = random(colors);

​

​

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

    meh = table.get(i, 8); // höhe box

    eins = 100 / sumbox;

    inprozent = str(meh * eins + "%");

​

    allrows[i] = createA(str(table.get(i, 9)), "", "_self");

    allrows[i].parent(box0);

    allrows[i].addClass("allrows0");

    allrows[i].style("background-color", color1);

    allrows[i].style("height", inprozent);

    allrows[i].style("width", "100%");

​

    da[i] = createDiv();

    da[i].id("myid" + i);

    da[i].parent(allrows[i]);

    da[i].style("width", "50%");

    da[i].style("height", "50%");

    da[i].style("background-color", "brown");

​

    var canvasDiv = document.getElementById("myid" + i);

    var divWidth = canvasDiv.offsetWidth;

    var divHeight = canvasDiv.offsetHeight;

    print(divWidth);

​

    pa[i] = new p5(function (p1) {

      p1.preload = function () {};

​

      p1.setup = function () {

        let c1 = p1.createCanvas(divWidth, divHeight);

        p1.background(random(0, 225));

        c1.parent("myid" + i);

      };

​

      p1.draw = function () {};

​

      // RESIZE FUNCTION 

      p1.windowResized = function () {

        p1.resizeCanvas(divWidth, divHeight);

      };

    });

    color1 = random(colors);

  }

​

  function draw() {}

}

​