tremulator: CULk318 counts

Overview visualization of data collected with The Tremulator

Watch the talk explaining the project and the data.

<!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 { 
        width:100%;
        margin:0;position:absolute; overflow-y: scroll;
      }
      svg { width: 100%; height: 100%; }
      
      #display {
        width:100%;
        overflow: scroll;
        font-family: Courier;
        background-color: #262626;
      }

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

.description {
        font-size: 14px;
        color: white;
        text-align: left;
				width: 55px;
        padding-right: 5px;
          padding-left: 5px;
      }
      .count {
        font-size: 14px;
        color: white;
        text-align: left;
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
      }
    </style>
  </head>

<body>
    <div id="display"></div>
    <script>
      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) { 
      if(a.side === 'r') return -1;
      return 1
    }
    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 table = display.append("table")
  
  var rows = table.selectAll("tr")
  .data(folioArray, function(f) { return f.id})
  .enter().append("tr")
    .attr("id", function(d) { return "tr-" + d.id })
  
  var desc = rows.append("td").classed("description", true)
  var counttd = rows.append("td").classed("count", true)
  rows.append("td").attr("id", function(d) { return "folio-" + d.id })
  
  /*
  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)

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);
      })
    }

});

desc.text(function(f) { 
        /*
    return f.index + f.side;
    */
    var str = f.index + f.side + " "

if(counts[f.id])
      str += counts[f.id].tremor || 0;
    return str;

})
  
});
});

</script>
  </body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js