Tree viz works!

.gitignore

@@ -2,6 +2,7 @@ mpos/
 negex.python/
 node_modules/
 retext/
+bower_components/
 
 *.tar.Z
 *.zip

bower.json

@@ -0,0 +1,25 @@
+{
+  "name": "parseTest",
+  "main": "index.js",
+  "version": "0.0.0",
+  "homepage": "https://github.com/hsubox76/parse-test",
+  "authors": [
+    "Christina Holland <hsubox@gmail.com>"
+  ],
+  "moduleType": [
+    "amd",
+    "node"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "d3": "~3.5.5",
+    "jquery": "~2.1.4"
+  }
+}

index.js

@@ -1,16 +1,40 @@
 var LSU = require('./lsu.js');
 var pos = require('pos');
 var natural = require('natural');
+var d3 = require('d3');
+var express = require('express');
+var bodyParser = require('body-parser');
+var app = express();
 
 var tokenizer = new natural.TreebankWordTokenizer();
-var words = tokenizer.tokenize("Economic news had little effect on financial markets.");
-var taggedWords = new pos.Tagger().tag(words);
-taggedWords = LSU.processWords(taggedWords);
 
-var tree = LSU.parse(taggedWords);
+var server = app.listen(3000, function () {
+  console.log('app listening on 3000');
+});
 
-var words = tokenizer.tokenize("The cat was fat.");
-var taggedWords = new pos.Tagger().tag(words);
-taggedWords = LSU.processWords(taggedWords);
+app.use(express.static('public'));
+app.use(bodyParser());
 
-var tree = LSU.parse(taggedWords);
+app.get('/', function(req,res) {
+  res.render('public/index.html');
+});
+
+app.post('/parse', function(req,res) {
+  var sentence = req.body.sentence;
+  console.log("------");
+  console.log(sentenceToTree(sentence));
+  console.log("------");
+  res.json(sentenceToTree(sentence));
+});
+
+var sentenceToTree = function(sentence) {
+  var words = tokenizer.tokenize(sentence);
+  var taggedWords = new pos.Tagger().tag(words);
+  taggedWords = LSU.processWords(taggedWords);
+
+  //console.log(taggedWords);
+
+  var tree = LSU.parse(taggedWords);
+  //console.log(tree);
+  return tree;
+};

lsu.js

@@ -1,3 +1,6 @@
+// LSU (list-based search with uniqueness) based on algorithm here:
+// http://web.stanford.edu/~mjkay/covington.pdf
+
 var List = function () {
   this.head = null;
   this.tail = null;
@@ -105,20 +108,20 @@ Queue.prototype.length = function () {
 var Tree = function (value) {
   this.value = value;
   this.children = [];
-  this.parent = null;
+  //this.parent = null;
 };
 
 Tree.prototype.addChild = function (value) {
   var child = new Tree(value);
-  child.parent = this;
+  //child.parent = this;
   this.children.push(child);
   return child;
 };
 
 Tree.prototype.removeMe = function () {
   console.log('removing ' + this.word + ' from parent ' + this.parent.word);
   var index = this.parent.children.indexOf(this);
-  this.parent.children.splice(index, 1);
+  //this.parent.children.splice(index, 1);
 };
 
 // breadth first tree print to console
@@ -129,7 +132,8 @@ Tree.prototype.print = function () {
     if (!rows[depth]) {
       rows[depth] = "";
     }
-    var x = node.parent ? node.parent.value.word : 'null';
+    //var x = node.parent ? node.parent.value.word : 'null';
+    var x = 'x';
     rows[depth] = rows[depth].concat(' [ ' + node.value.word + ' | ' + node.value.tag + ' | ' + x + ' ] ');
     for (var i = 0; i < node.children.length; i++) {
       queue.enqueue([node.children[i], depth+1]);
@@ -390,7 +394,7 @@ var getArcs = function(wordData) {
       headList.addToHead(w);
     }
   });
-  console.log(deps);
+  //console.log(deps);
   return { head: headList.head, deps: deps };
 };
 
@@ -401,7 +405,7 @@ var parse = function(wordData) {
   var arcs = arcData.deps;
   var root = arcData.head;
   var tree = new Tree(root.value);
-  console.log(root);
+  //console.log(root);
   var recurse = function (head, node) {
     arcs[head].forEach( function (dependent) {
       var newNode = node.addChild(wordData[dependent]);
@@ -412,6 +416,7 @@ var parse = function(wordData) {
   };
   recurse(root.value.index, tree);
   tree.print();
+  return tree;
 };
 
 exports.getArcs = getArcs;

package.json

@@ -9,6 +9,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "body-parser": "^1.12.4",
+    "d3": "^3.5.5",
+    "express": "^4.12.4",
     "natural": "^0.2.1",
     "pos": "^0.1.9",
     "retext": "^0.5.1"

public/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title></title>
+    <link rel="stylesheet" href="tree.css">
+  </head>
+  <body>
+    <div class="sentenceInput">
+      <input id="sentence-input" type="text"></input>
+      <button type="nosubmit" id="graph-button">Graph</button>
+    </div>
+    <script src="lib/jquery.min.js"></script>
+    <script src="lib/d3.min.js"></script>
+    <script src="tree.js"></script>
+  </body>
+</html>

public/tree.css

@@ -0,0 +1,17 @@
+.sentenceInput input {
+  width: 500px;
+}
+
+.node circle {
+  fill: #fff;
+  stroke: steelblue;
+  stroke-width: 3px;
+}
+
+.node text { font: 12px sans-serif; }
+
+.link {
+  fill: none;
+  stroke: #ccc;
+  stroke-width: 2px;
+}

public/tree.js

@@ -0,0 +1,81 @@
+var getParsedTreeData = function(sentence) {  
+  var query = {sentence: sentence};
+  $.ajax({
+    url: 'parse',
+    dataType: 'json',
+    type: 'POST',
+    data: query,
+    success: function(data) {
+      console.log('got data');
+      drawGraph(data);
+    },
+    error: function(xhr, status, err) {
+      console.log(status);
+    }
+  });
+
+};
+
+var drawGraph = function (treeData) {
+    //JSON object with the data
+    treeData = treeData || {"name" : "A", "info" : "tst", "children" : [
+          {"name" : "A1" },
+          {"name" : "A2" },
+          {"name" : "A3", "children": [
+                {"name" : "A31", "children" :[
+          {"name" : "A311" },
+          {"name" : "A312" }
+  ]}] }
+    ]};
+
+  var cont = d3.select('body').append('div')
+    .attr('id', 'container');;
+  var svg = cont.append('svg')
+    .attr('width', 600)
+    .attr('height', 300)
+    .attr('id', 'treesvg');
+
+  var tree = d3.layout.tree().size([600,220]);
+
+  var nodes = tree.nodes(treeData);
+  var links = tree.links(nodes);
+
+  var diagonal = d3.svg.diagonal()
+  .projection(function(d) { return [d.x, d.y+25]; });
+
+
+  var link = svg.selectAll("pathlink")
+    .data(links)
+    .enter().append("svg:path")
+    .attr("class", "link")
+    .attr("d", diagonal);
+
+  var node = svg.selectAll("g.node")
+    .data(nodes)
+    .enter().append("g")
+    .attr("class", "node")
+    .attr("transform", function(d) {
+      return "translate(" + d.x + "," + (d.y + 25) + ")";
+    });
+
+  node.append("circle")
+    .attr("r", 15);
+
+  node.append("text")
+    .attr("dy", ".35em")
+    .attr("text-anchor", "middle")
+    .text(function (d) { return d.value.word; });
+};
+
+var handleParseRequest = function(event) {
+  event.preventDefault();
+  var textToParse = document.getElementById('sentence-input').value;
+  getParsedTreeData(textToParse);
+};
+
+var init = function () {
+  var button = document.getElementById('graph-button');
+  button.addEventListener('click', handleParseRequest);
+};
+
+init();