jeffcatania/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    A simple text concordance plot producing similar output to NLTK's function.  These are great for showing raw text in context with its surrounding meaning. Inspired by the Openvisconf Text Analysis Workshop taught by Jim and Yannick.

  
## data.csv

          
            pre
            post

            
              was beginning to get very tired of s

            
              hat is the use of a book , ' thought
              'without pictures or conversations ?

            
              so VERY remarkable in that ; nor did
              think it so VERY much out of the way

            
              looked at it , and then hurried on ,
              started to her feet , for it flashed

            
               hedge . In another moment down went
              after it , never once considering ho

            
              ped suddenly down , so suddenly that
              had not a moment to think about stop

            
              she fell past it . 'Well ! ' thought
              to herself , 'after such a fall as t

            
              own , I think -- ' ( for , you see ,
              had learnt several things of this so

            
              tude or Longitude I 've got to ? ' (
              had no idea what Latitude was , or L

            
               . There was nothing else to do , so
              soon began talking again . 'Dinah 'l

            
              ats eat bats , I wonder ? ' And here
              began to get rather sleepy , and wen

            
              dry leaves , and the fall was over .
              was not a bit hurt , and she jumped

            
               not a moment to be lost : away went
              like the wind , and was just in time

            
               but they were all locked ; and when
              had been all the way down one side a

            
              on it except a tiny golden key , and
              's first thought was that it might b

            
              and to her great delight it fitted !
              opened the door and found that it le

            
              ad would go through , ' thought poor
              , 'it would be of very little use wi

            
              ay things had happened lately , that
              had begun to think that very few thi

            
              rtainly was not here before , ' said
              , ) and round the neck of the bottle

            
              ay 'Drink me , ' but the wise little
              was not going to do THAT in a hurry

            
              bottle was NOT marked 'poison , ' so
              ventured to taste it , and finding i

            
              * * 'What a curious feeling ! ' said
              ; 'I must be shutting up like a tele

            
              for it might end , you know , ' said
              to herself , 'in my going out altoge

            
              garden at once ; but , alas for poor
              ! when she got to the door , she fou

            
               no use in crying like that ! ' said
              to herself , rather sharply ; 'I adv

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

  text {
   font-family: Consolas;
   font-size: 1rem
  }

  .line:hover {
    fill: steelblue;
    font-weight: bold;
  }

  .line:hover .pivot {
    fill: steelblue;
  }
  .pivot {
    font-weight: bold;
    fill: steelblue;
    text-anchor: middle;
  }

  .pre {
    text-anchor: end;
  }

  .post {
    text-anchor: start;
  }

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

const pivotValue = "Alice"
var dataSelection = [];

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10, "%");

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("data.csv", function(error, data) {
  console.log(error)
  console.log(data)
  if (error) throw error;

  x.domain(data.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

  var g = svg.selectAll("g")
    .data(data)
   .enter().append("g")
  		.attr("class", "line")

  var pivot = g.append("text")
  	.attr("class", "pivot")
  	.attr("x", width/2)
  	.attr("y", (d,i)=> `${i*2}rem`)
    .html(pivotValue)
    .on("click", changeState)

  var pre = g.append("text")
  	.attr("class", "pre")
  	.attr("x", (width-120)/2)
  	.attr("y", (d,i)=> `${i*2}rem`)
    .html(d=>d.pre)
    .on("click", changeState)

  var post = g.append("text")
  	.attr("class", "post")
  	.attr("x", (width+120)/2)
  	.attr("y", (d,i)=> `${i*2}rem`)
    .html(d=>d.post)
    .on("click", changeState)


   function changeState(d,i) {

	 }

});


</script>
	pre	post
		was beginning to get very tired of s
	hat is the use of a book , ' thought	'without pictures or conversations ?
	so VERY remarkable in that ; nor did	think it so VERY much out of the way
	looked at it , and then hurried on ,	started to her feet , for it flashed
	hedge . In another moment down went	after it , never once considering ho
	ped suddenly down , so suddenly that	had not a moment to think about stop
	she fell past it . 'Well ! ' thought	to herself , 'after such a fall as t
	own , I think -- ' ( for , you see ,	had learnt several things of this so
	tude or Longitude I 've got to ? ' (	had no idea what Latitude was , or L
	. There was nothing else to do , so	soon began talking again . 'Dinah 'l
	ats eat bats , I wonder ? ' And here	began to get rather sleepy , and wen
	dry leaves , and the fall was over .	was not a bit hurt , and she jumped
	not a moment to be lost : away went	like the wind , and was just in time
	but they were all locked ; and when	had been all the way down one side a
	on it except a tiny golden key , and	's first thought was that it might b
	and to her great delight it fitted !	opened the door and found that it le
	ad would go through , ' thought poor	, 'it would be of very little use wi
	ay things had happened lately , that	had begun to think that very few thi
	rtainly was not here before , ' said	, ) and round the neck of the bottle
	ay 'Drink me , ' but the wise little	was not going to do THAT in a hurry
	bottle was NOT marked 'poison , ' so	ventured to taste it , and finding i
	* * 'What a curious feeling ! ' said	; 'I must be shutting up like a tele
	for it might end , you know , ' said	to herself , 'in my going out altoge
	garden at once ; but , alas for poor	! when she got to the door , she fou
	no use in crying like that ! ' said	to herself , rather sharply ; 'I adv
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	text {
	font-family: Consolas;
	font-size: 1rem
	}

	.line:hover {
	fill: steelblue;
	font-weight: bold;
	}

	.line:hover .pivot {
	fill: steelblue;
	}
	.pivot {
	font-weight: bold;
	fill: steelblue;
	text-anchor: middle;
	}

	.pre {
	text-anchor: end;
	}

	.post {
	text-anchor: start;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	const pivotValue = "Alice"
	var dataSelection = [];

	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1);

	var y = d3.scale.linear()
	.range([height, 0]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(10, "%");

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.tsv("data.csv", function(error, data) {
	console.log(error)
	console.log(data)
	if (error) throw error;

	x.domain(data.map(function(d) { return d.letter; }));
	y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

	var g = svg.selectAll("g")
	.data(data)
	.enter().append("g")
	.attr("class", "line")

	var pivot = g.append("text")
	.attr("class", "pivot")
	.attr("x", width/2)
	.attr("y", (d,i)=> `${i*2}rem`)
	.html(pivotValue)
	.on("click", changeState)

	var pre = g.append("text")
	.attr("class", "pre")
	.attr("x", (width-120)/2)
	.attr("y", (d,i)=> `${i*2}rem`)
	.html(d=>d.pre)
	.on("click", changeState)

	var post = g.append("text")
	.attr("class", "post")
	.attr("x", (width+120)/2)
	.attr("y", (d,i)=> `${i*2}rem`)
	.html(d=>d.post)
	.on("click", changeState)



	function changeState(d,i) {

	}

	});


	</script>