createCanvas(1.3 * windowWidth, 1.2 * windowHeight);

  //createCanvas(windowWidth, 5 * windowHeight);

  textSize(14);

  textAlign(RIGHT, CENTER);

  colorMode(HSB, 360, 100, 100);

  noLoop();

}

​

function draw() {

  background(0, 0, 100);

  drawArtworksByNationality();

  //drawArtworksByCategory();

}

​

function drawArtworksByNationality() {

  var nations = byNationality

    .sort(function(nationA, nationB) {

      return nationB.Artworks.Total - nationA.Artworks.Total;  

    })

    .slice(0, 17);

​

  push();

  translate(20, 80);

  noStroke();

  textStyle(BOLD);

  text("Artworks by nationality", 160, -50);

  textStyle(NORMAL);

  var scale = 0.01; // 1px for 100 artworks

  for (var i = 0; i < nations.length; i++) {

    var nation = nations[i];

    var productivity = ceil(nation.Artworks.Total / nation.Artists.Total);

    fill(0, 0, 0);

    text(nation.Nationality, 120, 40 * i);

    text(productivity, 20, 40 * i);    

​

    rect(140, 40 * i - 10, nation.Artworks.Total * scale, 20);

  }

  pop();

}

​

function drawArtworksByCategory() {

  var categories = byCategory.slice(0, 14);

  var ymaxArtists = 3000;

  var ymaxArtworks = 30000;

  push();

  translate(20, 80);

  strokeWeight(0.3);

​

  textSize(14);

  textAlign(CENTER, CENTER);

​

  for (var i = 0; i < categories.length; i++) {

    var category = categories[i];

    rect(40, 220 * i, 240, 200);

    text(category.Category, 160, 220 * i + 20);

    // Draw change in artists

    push();

    translate(60, 220 * i + 50);

    var ystart = map(category.Artists['19'].Total, 0, ymaxArtists, 60, 0);

    var ystop = map(category.Artists['20'].Total, 0, ymaxArtists, 60, 0);

    //rect(0, 0, 130, 60);

    beginShape();

    vertex(10, ystart);

    vertex(40, ystart);

    vertex(90, ystop);

    vertex(120, ystop);

    endShape();

    textSize(12);

    textAlign(LEFT, CENTER);

    text(category.Artists['19'].Total.toLocaleString('en-US'), 10, ystart - 7);

    text(category.Artists['20'].Total.toLocaleString('en-US'), 100, ystop - 7);

    var delta = category.Artists['20'].Total - category.Artists['19'].Total

    text(delta.toLocaleString('en-US') + ' ' + (delta > 0 ? '↑' : '↓'), 160, 30);

    pop();

​

    // Draw change in artworks

    push();

    translate(60, 220 * i + 120);

    //rect(0, 0, 130, 60);

    var ystart = map(category.Artworks['19'].Total, 0, ymaxArtworks, 60, 0);

    var ystop = map(category.Artworks['20'].Total, 0, ymaxArtworks, 60, 0);

​

    beginShape();

    vertex(10, ystart);

    vertex(40, ystart);

    vertex(90, ystop);

    vertex(120, ystop);

    endShape();

    textSize(12);

    textAlign(LEFT, CENTER);

    text(category.Artworks['19'].Total.toLocaleString('en-US'), 10, ystart - 7);

    text(category.Artworks['20'].Total.toLocaleString('en-US'), 100, ystop - 7);

    var delta = category.Artworks['20'].Total - category.Artworks['19'].Total

    text(delta.toLocaleString('en-US') + ' ' + (delta > 0 ? '↑' : '↓'), 160, 30);

​

    pop();

  }

  pop();

}

​

function mousePressed() {

  save("artworks-category-barchart.jpeg");

}