tremulous data

_.md

[ Launch: tremulous data ] 0823d99a670acfa3fb3e by enjalot

config.json

{"description":"tremulous data","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/gKU3vqm.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])
  
  //console.log("marks", marks)
  //console.log("mark", marks[0])
  /*
  var xf = crossfilter(marks);
  var byFolio = xf.dimension(function(d) { return d.folioId });
  var byAuthor = xf.dimension(function(d) { return d.author });
  var byValue = xf.dimension(function(d) { return d.value });
  */
  
  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)
  
  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;
    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 = "rgba(253, 0, 0, 1)";
      ctx.fillStyle = "yellow"
      marks.forEach(function(m) {
        ctx.fillRect(fxscale(m.x), fyscale(m.y), 5, 5)
      })
    }
  });
  
  
  
});
});

style.css

#display {
  overflow: scroll;

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

.description {
  color: white;
  text-align: center;
}

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