title: Visualizing a parse tree with d3.js
body: <p>I've been trying to obtain a visual representation of a parse tree by generating an HTML file that uses <code>d3.js</code> to draw a tree. The file looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;head&gt;&lt;title&gt; Tree Visualization &lt;/title&gt;&lt;/head&gt;
  &lt;script src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      function drawTree(o) {
          d3.select("#"+o.divID).select("svg").remove() 
  
          var viz = d3.select("#"+o.divID)
              .append("svg")
              .attr("width", o.width)
              .attr("height", o.height)  
  
          var vis = viz.append("g")
              .attr("id","treeg")
              .attr("transform", "translate("+ o.padding +","+ o.padding +")") 
  
          var tree = d3.layout.tree()
              .size([o.width - (2 * o.padding), o.height - (2 * o.padding)]);
  
          var diagonal = d3.svg.diagonal()
              .projection(function(d) { return [d.x, d.y]; });
  
          var nodes = tree.nodes(o.treeData);
  
          var link = vis.selectAll("pathlink")
              .data(tree.links(nodes)).enter()
              .append("path")
              .attr("class", "link")
              .attr("d", diagonal)
  
          var node = vis.selectAll("g.node")
              .data(nodes).enter()
              .append("g")
              .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
  
          node.append("circle")
              .attr("r", 10)
              .style("fill", function(d) { return (d.children) ? "#E14B3B" : "#1C8B98" });
  
          node.append("svg:text")
              .attr("dx", function(d) { return d.children ? 0 : 0; })
              .attr("dy", function(d) { return d.children ? 5 : 5; })
              .attr("text-anchor", function(d) { return d.children ? "middle" : "middle"; })
              .style("fill", "white").text(function(d) { return d.name; })
      }
   &lt;/script&gt;
  
  &lt;body onLoad="drawTree({divID: 'viz', width: 600, height: 400, padding: 50, treeData: {name: 'S', children: [{name: 'S', children: [{name: 'S', children: [{name: 'S', children: [{name: 'x'}]}, {name: 'S', children: [{name: 'y'}]}, {name: '*'}]}, {name: 'S', children: [{name: '1'}]}, {name: '+'}]}, {name: 'S', children: [{name: 'S', children: [{name: '1'}]}, {name: '-'}]}, {name: '+'}]}})"&gt;
  &lt;div id="viz"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I want it to look like:
  <img src="https://i.stack.imgur.com/GBqbQ.png" alt="this"></p>
  
  <p>What it currently looks like:
  <img src="https://i.stack.imgur.com/9xNuq.png" alt="this"></p>
  
  <p>I'm completely new to <code>d3.js</code> and, to be honest, the code is taken from an example and only modified by me. I managed to get to this point this way, but I just can't figure out where it goes wrong.</p>
  
  <p>I'd appreciate every bit of help. Thanks in advance!</p>