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>