tremulous OthoC1 counts ONLY 100%

_.md

[ Launch: tremulous OthoC1 counts ONLY 100% ] 5a5bc41dfeac1a766aab by enjalot
[ Launch: tremulous OthoC1 counts ] 9b516c122192051be4b5 by enjalot
[ Launch: tremulous data ] 9352d58a979286955897 by enjalot
[ Launch: tremulous data ] 0823d99a670acfa3fb3e by enjalot

config.json

{"description":"tremulous OthoC1 counts ONLY 100%","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/e0P8Xld.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) { return a.side - b.side }
    return a.index - b.index 
  });
  //console.log("folio", folioArray[0]);
  
  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)
    .attr("id", function(d) { return "folio-" + d.id })
  
  var text = fdivs.append("div").classed("description", true)

  
  
  var counts = {}
  nested.forEach(function(f) {
    var id = "#folio-" + f.key;
    var div = display.select(id)
    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];
    }
    counts[f.key] = {};
     
    if(tremor) {
      var count = tremor.values.count;
      
      var marks = tremor.values.marks;
      //ctx.fillStyle = "rgba(253, 0, 0, 1)";
      
      //preprocess the marks
      marks.forEach(function(m) {
        if(m.certainty < 20 && m.value === "!") {
          m.certainty = 100;
          m.value = ":"
        }
      })
      marks.sort(function(a,b) {
        return a.y - b.y;
      })
      count = 0;
      marks.forEach(function(m) {
        if(m.certainty < 100) return;
        count++;
        div.append("span").classed("mark", true).classed("tremor", true)
          .datum(m)
          .text(m.value)
          .style("background-color", "rgba(255, 255, 125, " + (m.certainty/100) + ")")
          .on("click", function(d) { console.log("d", d) });
      })
      
      //counts[f.key].tremor = count;
      counts[f.key].tremor = count;
    }
    if(original) {
      var count = original.values.count;
      var marks = original.values.marks;
     
      marks.forEach(function(m) {
        div.append("span").classed("mark", true).classed("original", true)
          .text(m.value);
      })
    }
  });

   
  text.text(function(f) { 
    var str = "(" + f.index + f.side + " - "

    if(counts[f.id])
      str += counts[f.id].tremor + ")";
    return str;
  })
  
});
});

style.css

#display {
  overflow: scroll;
  font-family: Courier;
}
.folio {
  width: 100%;
  overflow-x: scroll;
  display: inline-block;
  margin: 1px;
  background-color: #dcc9b1;
  padding: 0;
}

.mark {
  display: inline-block;
  padding: 1px;
  margin: 1px;
  font-size: 10px;
  width: 12px;
}
.tremor {
  background-color: yellow;
}
.original {
  background-color: #25736d;
  color: white;
}

.description {
  font-size: 14px;
  color: black;
  text-align: left;
  display: inline-block;
  padding-right: 5px;
  width: 92px;
}

.folio canvas {
  width: 80px;
  height: 120px;
}