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: Lato;
   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>
 <link href='https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script>

const pivotValue = "Alice"
var dataSelection = [];
  
var config = {
  pivot: "Alice",
  onSelection: function(d,i) { console.log(d) },
  pivotPadding: 20
}
  
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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", transformData, function(error, data) {
  if (error) throw error;

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(config.pivot)
    .on("click", config.onSelection)
  
  const clientRect = pivot[0][0].getClientRects()[0];
 
  var pre = g.append("text")
  	.attr("class", "pre")
  	.attr("x",  width/2 - (clientRect.width/2) - config.pivotPadding)
  	.attr("y", (d,i)=> `${i*2}rem`)
    .html(d=>d.pre)
    .on("click", config.onSelection)
  
  var post = g.append("text")
  	.attr("class", "post")
  	.attr("x",  width/2 + (clientRect.width/2) + config.pivotPadding)
  	.attr("y", (d,i)=> `${i*2}rem`)
    .html(d=>d.post)
    .on("click", config.onSelection)
  
});

function transformData(d,i) {
  const words = d.phrases.split(config.pivot)
  return {
    phrase: d.phrases,
    pre: words[0],
    post: words[1]
  }
}
</script>

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