karthiir/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Overview visualization of data collected with The Tremulator
Watch the talk explaining the project and the data.
forked from enjalot's block: tremulator: CULk318 counts

  
## 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 {
        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>
	<!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>