let chapters

​

// pick the dimensions for the bars

let charHeight = 40

let charPadding = 10

let chapterWidth = 10

let chapterPadding = 2

​

​

async function setup() {

  book = await csvData("data/book-1.csv")

  // unpack the chapters into an array [1, 2, 3, ..., last]

  chapters = book.cols.slice(1).map(n => +n)

  createCanvas(

    200 + chapters.length * (chapterWidth + chapterPadding), 

    200 + book.rows.length * (charHeight + charPadding),

    SVG

  );

​

}

​

function draw(){

  background(255)

  noLoop()

  noStroke()

​

  translate(100, 100)

  textAlign(RIGHT)

  for (const character of book.rows){

    fill(127)

    text(character.name, -20, charHeight*.55)

    for (const chap of chapters){

      if (character[chap] == 'y'){

        fill('red')

      }else{

        fill(240)

      }

      rect(chap * (chapterWidth + chapterPadding), 0, chapterWidth, charHeight)

    }

    translate(0, charHeight + charPadding)  

  }

  // save('out.svg')

}