tremulator: OthoC1 thumbs by enjalot

index.html

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { 
        margin:0;position:absolute; overflow-y: scroll;
      }
      svg { width: 100%; height: 100%; }
      #display {
        background-color: #111;
      }
      .folio {
        width: 85px;
        height: 150px;
        display: inline-block;
        margin: 4px;
				color: white;
        font-family: Courier New;
      }

      .description {
        text-align: center;
        position:relative;
        height: 150px;
        margin:10px;
      }

      .folio canvas {
        margin-top: 30px;
        width: 80px;
        height: 120px;
        position:absolute;
      }

      .folio img {
        margin-top: 30px;
        position:absolute;
      }


    </style>
  </head>

  <body>
    <div id="display"></div>
    <script>
      d3.json("https://s3.amazonaws.com/medieval/tremor/OthoC1/folios.json", function(err, folios) {
			d3.json("https://s3.amazonaws.com/medieval/tremor/OthoC1/marks.json?", function(err, marks) {
  var cwidth = 80;
  var cheight = 120;
  
  var folioArray = [];
  for(key in folios) {
    folioArray.push(folios[key])
  }
  folioArray.sort(function(a,b) { 
    if(a.index === b.index) { 
      if(a.side === 'r') return -1;
      return 1
    }
    return a.index - b.index 
  });
  
  var fxscale = d3.scale.linear()
  .domain([0, 980])
  .range([0, 80])
  var fyscale = d3.scale.linear()
  .domain([0, 1500])
  .range([0, 120])
  
  var nested = d3.nest()
  .key(function(d) { return d.folioId })
  .key(function(d) { return d.author })
  .rollup(function(leaves) { return { count: leaves.length, marks: leaves } })
  .entries(marks)
  console.log("nested", nested[0]);
  
  var display = d3.select("#display");
  
        console.log("folio array", folioArray)
  var fdivs = display.selectAll("div.folio")
  .data(folioArray, function(f) { return f.id})
  .enter().append("div").classed("folio", true)
  
  fdivs.append("img").attr({
    src: function(d) {return  "https://s3.amazonaws.com/medieval/tremor/OthoC1/thumbs/" + d.index + d.side + "_tn.jpg" },
    height: 120 + "px"
  })
  
  var canvii = fdivs.append("canvas")
    .attr("id", function(d) { return "folio-" + d.id })
    .attr("width", cwidth)
    .attr("height", cheight);
  
  fdivs.append("div").classed("description", true)
  .text(function(f) { return f.index + f.side })
  
  nested.forEach(function(f) {
    var id = "#folio-" + f.key;
    console.log("id", id)
    var canvas = display.select(id).node();
    var ctx = canvas.getContext("2d");
    if(f.values[0].key == "original") {
      var original = f.values[0];
      var tremor = f.values[1];
    } else {
      var original = f.values[1];
      var tremor = f.values[0];
    }

    if(original) {
      var count = original.values.count;
      var marks = original.values.marks;
      ctx.fillStyle = "rgba(0, 0, 255, 0.5)"
      marks.forEach(function(m) {
        ctx.fillRect(fxscale(m.x), fyscale(m.y), 5, 5)
      })
    }
    if(tremor) {
      var count = tremor.values.count;
      var marks = tremor.values.marks;
      
      //ctx.fillStyle = "white"
      marks.forEach(function(m) {
        if(m.certainty < 20 && m.value === "!") {
          m.certainty = 100;
          m.value = ":"
        }
      })
      marks.forEach(function(m) {
        ctx.fillStyle = "rgba(253, 239, 169, " + m.certainty/100 + ")";
        ctx.fillRect(fxscale(m.x), fyscale(m.y), 5, 5)
      })
    }
  });
  
  
  
});
});

    </script>
  </body>