Create a gist now

Instantly share code, notes, and snippets.

@enjalot /README.md
Last active Oct 5, 2015

tremulator: OthoC1 thumbs
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment