tremulous OthoC1 thumbs ONLY ! >= 4

_.md

[ Launch: tremulous OthoC1 thumbs ONLY ! >= 4 ] 14578ed731d5b9eb0b8a by enjalot
[ Launch: tremulous OthoC1 thumbs ONLY ! >= 3 ] cf9809e13ae18b532522 by enjalot
[ Launch: tremulous OthoC1 thumbs ONLY ! ] 488cc325cceaca4c6776 by enjalot
[ Launch: tremulous OthoC1 thumbs ONLY ! and : ] ed84722479bb34de1d48 by enjalot
[ Launch: tremulous OthoC1 data ] 9fc5311587f17ac93be2 by enjalot
[ Launch: tremulous data ] 0823d99a670acfa3fb3e by enjalot

config.json

{"description":"tremulous OthoC1 thumbs ONLY ! >= 4","endpoint":"","display":"div","public":true,"require":[{"name":"crossfilter.js","url":"http://square.github.io/crossfilter/crossfilter.v1.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/ZZTzCVH.png"}

inlet.js

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");
  
  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 })
  
  
  var counts = {};
  nested.forEach(function(f) {
    var id = "#folio-" + f.key;
    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 = 0;
      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) {
        if(!(m.value === "!")) return;
        count++;
        ctx.fillStyle = "rgba(253, 239, 169, " + m.certainty/100 + ")";
        ctx.fillRect(fxscale(m.x), fyscale(m.y), 5, 5)
      })
      counts[f.key] = count;
    }
  });
  
  
   d3.selectAll("div.folio")
  .filter(function(d) {return !counts[d.id] || counts[d.id] < 4 })
  .style("display", "none")
   
});
});

style.css

#display {
  overflow: scroll;

}
.folio {
  width: 85px;
  height: 150px;
  border: 1px solid white;
  display: inline-block;
  margin: 4px;

}

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

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

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