Overview visualization of data collected with The Tremulator
Watch the talk explaining the project and the data.
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) | |
var counts = {} | |
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]; | |
} | |
counts[f.key] = {}; | |
if(tremor) { | |
var count = tremor.values.count; | |
counts[f.key].tremor = count; | |
var marks = tremor.values.marks; | |
//ctx.fillStyle = "rgba(253, 0, 0, 1)"; | |
//preprocess the marks | |
marks.forEach(function(m) { | |
if(m.certainty < 20 && m.value === "!") { | |
m.certainty = 100; | |
m.value = ":" | |
} | |
}) | |
marks.sort(function(a,b) { | |
return a.y - b.y; | |
}) | |
marks.forEach(function(m) { | |
div.append("span").classed("mark", true).classed("tremor", true) | |
.datum(m) | |
.text(m.value) | |
.style("background-color", "rgba(255, 255, 125, " + (m.certainty/100) + ")") | |
.on("click", function(d) { console.log("d", d) }); | |
}) | |
} | |
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> | |