enjalot/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Overview visualization of data collected with The Tremulator
Watch the talk explaining the project and the data.

  
## index.html
<!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 {
        margin:0;position:absolute; overflow-y: scroll;
      }
      svg { width: 100%; height: 100%; }
      #display {
        background-color: #111;
      }
      .folio {
        width: 85px;
        height: 150px;
        display: inline-block;
        margin: 4px;
				color: white;
        font-family: Courier New;
      }

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

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

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


    </style>
  </head>

  <body>
    <div id="display"></div>
    <script>
      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");

        console.log("folio array", folioArray)
  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 })

  nested.forEach(function(f) {
    var id = "#folio-" + f.key;
    console.log("id", id)
    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 = "white"
      marks.forEach(function(m) {
        if(m.certainty < 20 && m.value === "!") {
          m.certainty = 100;
          m.value = ":"
        }
      })
      marks.forEach(function(m) {
        ctx.fillStyle = "rgba(253, 239, 169, " + m.certainty/100 + ")";
        ctx.fillRect(fxscale(m.x), fyscale(m.y), 5, 5)
      })
    }
  });


});
});

    </script>
  </body>


## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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 {
	margin:0;position:absolute; overflow-y: scroll;
	}
	svg { width: 100%; height: 100%; }
	#display {
	background-color: #111;
	}
	.folio {
	width: 85px;
	height: 150px;
	display: inline-block;
	margin: 4px;
	color: white;
	font-family: Courier New;
	}

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

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

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


	</style>
	</head>

	<body>
	<div id="display"></div>
	<script>
	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");

	console.log("folio array", folioArray)
	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 })

	nested.forEach(function(f) {
	var id = "#folio-" + f.key;
	console.log("id", id)
	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 = "white"
	marks.forEach(function(m) {
	if(m.certainty < 20 && m.value === "!") {
	m.certainty = 100;
	m.value = ":"
	}
	})
	marks.forEach(function(m) {
	ctx.fillStyle = "rgba(253, 239, 169, " + m.certainty/100 + ")";
	ctx.fillRect(fxscale(m.x), fyscale(m.y), 5, 5)
	})
	}
	});



	});
	});

	</script>
	</body>