tremulous counts

_.md

[ Launch: tremulous data ] 9352d58a979286955897 by enjalot
[ Launch: tremulous data ] 0823d99a670acfa3fb3e by enjalot

config.json

{"description":"tremulous counts","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":true,"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/YOL6vOV.png"}

inlet.js

d3.json("https://s3.amazonaws.com/medieval/tremor/CULKk318/folios.json", function(err, folios) {
d3.json("https://s3.amazonaws.com/medieval/tremor/CULKk318/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 })
  
  fdivs.append("div").classed("description", true)
  .text(function(f) { return f.index + f.side })
  
  
  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];
    }
    
    if(tremor) {
      var count = tremor.values.count;
      var marks = tremor.values.marks;
      //ctx.fillStyle = "rgba(253, 0, 0, 1)";
      
      marks.forEach(function(m) {
        div.append("span").classed("mark", true).classed("tremor", true)
          .text(m.value);
      })
    }
    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);
      })
    }
  });
  
  
  
});
});

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: white;
  text-align: left;
  display: inline-block;
  padding-right: 5px;
  width: 29px;
}

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