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.
Last active
May 3, 2016 18:00
-
-
Save jeffcatania/7917d7895b3fe9b5552d95c297188709 to your computer and use it in GitHub Desktop.
Text Concordance
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| phrases | |
|---|---|
| Alice was beginning to get very tired of s | |
| hat is the use of a book , ' thought Alice 'without pictures or conversations ? | |
| so VERY remarkable in that ; nor did Alice think it so VERY much out of the way | |
| looked at it , and then hurried on , Alice started to her feet , for it flashed | |
| hedge . In another moment down went Alice after it , never once considering ho | |
| ped suddenly down , so suddenly that Alice had not a moment to think about stop | |
| she fell past it . 'Well ! ' thought Alice to herself , 'after such a fall as t | |
| own , I think -- ' ( for , you see , Alice had learnt several things of this so | |
| tude or Longitude I 've got to ? ' ( Alice had no idea what Latitude was , or L | |
| . There was nothing else to do , so Alice soon began talking again . 'Dinah 'l | |
| ats eat bats , I wonder ? ' And here Alice began to get rather sleepy , and wen | |
| dry leaves , and the fall was over . Alice was not a bit hurt , and she jumped | |
| not a moment to be lost : away went Alice like the wind , and was just in time | |
| but they were all locked ; and when Alice had been all the way down one side a | |
| on it except a tiny golden key , and Alice 's first thought was that it might b | |
| and to her great delight it fitted ! Alice opened the door and found that it le | |
| ad would go through , ' thought poor Alice , 'it would be of very little use wi | |
| ay things had happened lately , that Alice had begun to think that very few thi | |
| rtainly was not here before , ' said Alice , ) and round the neck of the bottle | |
| ay 'Drink me , ' but the wise little Alice was not going to do THAT in a hurry | |
| bottle was NOT marked 'poison , ' so Alice ventured to taste it , and finding i | |
| * * 'What a curious feeling ! ' said Alice ; 'I must be shutting up like a tele | |
| for it might end , you know , ' said Alice to herself , 'in my going out altoge | |
| garden at once ; but , alas for poor Alice ! when she got to the door , she fou | |
| no use in crying like that ! ' said Alice to herself , rather sharply ; 'I adv |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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='http://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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment