diff --git a/public/js/translateTree.js b/public/js/translateTree.js
index 0ade20b..e7ce83d 100644
--- a/public/js/translateTree.js
+++ b/public/js/translateTree.js
@@ -1,87 +1,128 @@
 var cleanRegex = /^([^\/]+?\/)?[^\:]+?\:/;
 
-// SnippetTree constructor
-function SnippetTree (obj) {
-  this.children = [];
-  this.data = obj;
+var renderer = new dagreD3.Renderer();
+var oldDrawNodes = renderer.drawNodes();
+renderer.drawNodes(
+  function (graph, root) {
+    var svgNodes = oldDrawNodes(graph, root);
+    svgNodes.each(function(u) {
+      d3.select(this).classed(graph.node(u).nodeclass, true);
+    });
+    return svgNodes;
+  });
 
-  // Replace title
+// Disable pan and zoom
+renderer.zoom(false);
+
+function SnippetTree (graph) {
+  this.next = new Number(0);
+  this.graph = graph;
+
+  // Fix title
   this.cleanTitle = function (title) {
     return title.replace(cleanRegex, "");
   };
 
-  // Add new child to tree
-  this.addChild = function (childData) {
-    var c = new SnippetTree (childData);
-    this.children.push(c);
-    return c;
-  };
+  // This is a new root
+  this.graph.addNode(this.next++,{
+    nodeclass: "root"
+  })
 
-  // Recursively parse children
-  this.parseChildren = function (children) {
+  // Add the children to the node
+  this.parseChildren = function (parent, children) {
     for (var i in children) {
       var c = children[i];
-      if (c.nodeType === 1) {
+
+      // Element node
+      if (c.nodeType == 1) {
+
+	// Get title from html
 	if (c.getAttribute("title")) {
 	  var title = this.cleanTitle(c.getAttribute("title"));
-	  var childTree = this.addChild({ type : title });
-	  if (c.hasChildNodes())
-	    childTree.parseChildren(c.childNodes);
-	}
-	else if (c.hasChildNodes())
-	  this.parseChildren(c.childNodes);
-      }
-      else if (c.nodeType === 3)
-	if (c.nodeValue.match(/[-a-z0-9]/i)) {
-	  this.addChild({
-	    type : "leaf",
-	    word : c.nodeValue
+
+	  // Add child node
+	  var id = this.next++;
+	  this.graph.addNode(id, {
+	    nodeclass : "middle",
+	    label : title
 	  });
+	  this.graph.addEdge(null, parent, id);
+
+	  // Check for next level
+	  if (c.hasChildNodes())
+	    this.parseChildren(id, c.childNodes);
+	}
+
+	// Step further
+	else if (c.hasChildNodes())
+	  this.parseChildren(parent, c.childNodes);
+      }
+
+      // Text node
+      else if (c.nodeType == 3)
+	if (c.nodeValue.match(/[-a-z0-9]/i)) {
+	  // Add child node
+	  var id = this.next++;
+	  this.graph.addNode(id, {
+	    nodeclass : "leaf",
+	    label : c.nodeValue
+	  });
+	  this.graph.addEdge(null, parent, id);
 	};
     };
     return this;
   };
-
-  // Recursively parse children
-  this.parseChildren2 = function (children) {
-    for (var i in children) {
-      var c = children[i];
-      if (c.nodeType === 1) {
-	if (c.getAttribute("title")) {
-	  var title = this.cleanTitle(c.getAttribute("title"));
-	  var childTree = this.addChild({ type : title });
-	  if (c.hasChildNodes())
-	    childTree.parseChildren2(c.childNodes);
-	}
-	else if (c.hasChildNodes())
-	  this.parseChildren2(c.childNodes);
-      }
-      else if (c.nodeType === 3)
-	if (c.nodeValue.match(/[-a-z0-9]/i)) {
-	  this.addChild({
-	    type : "leaf",
-	    word : c.nodeValue
-	  });
-	};
-    };
-    return this;
-  };
-
-
-  this.toTable = function () {
-    
-  };
-
-  var tree = document.createElement('tree');
-  html.innerHTML = snippet;
-  this.parseChildren2(html.childNodes);
 };
 
-// Make tree from snippet
 function translateTree (snippet) {
   var html = document.createElement("tree");
   html.innerHTML = snippet;
-  return new SnippetTree({ type : "ROOT" }).parseChildren(html.childNodes);
+  var st = new SnippetTree(new dagreD3.Digraph());
+  st.parseChildren(0, html.childNodes);
+  var g = st.graph;
+
+  // Root node has only one child
+  if (Object.keys(g._outEdges[0]).length === 1)
+    g.delNode(0);
+  return g;
 };
 
+function showTree (o, foundry, layer) {
+  var match = o.parentNode.parentNode;
 
+  var tree = d3.select(match).select("div > div.treeInfo");
+
+  if (tree.classed("active")) {
+    tree.classed("active", false);
+    return;
+  }
+  else if (!tree.select("svg").empty()) {
+    tree.classed("active", true);
+    return;
+  };
+
+  var corpusID = match.getAttribute('data-corpus-id');
+  var docID    = match.getAttribute('data-doc-id');
+  var matchID  = match.getAttribute('data-match-id');
+  var url      =
+    '/corpus' +
+    '/' + corpusID +
+    '/' + docID +
+    '/' + matchID +
+    '?foundry=' + foundry +
+    '&layer=' + layer +
+    '&spans=true';
+
+  jQuery.getJSON(url, function (res) {
+    var svg = tree.append("svg");
+    var svgGroup = svg.append("svg:g");
+    var treething = translateTree(res['snippet']);
+
+    var layout = renderer.run(treething, svgGroup);
+
+    svg.attr("width", layout.graph().width + 40)
+      .attr("height", layout.graph().height + 40);
+
+    tree.classed("active", true);
+  });
+};