Text Concordance

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.

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

https://d3js.org/d3.v3.min.js