title: d3.js Family chart
body: <p><a href="https://i.stack.imgur.com/zuaEb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zuaEb.png" alt="enter image description here"></a></p>
  
  <p>^ this is the goal to start enhancing the chart to take the birth/death/name data -- but to have it be more flexible to take it. Also cleaning up the data source.</p>
  
  <p><a href="https://i.stack.imgur.com/hIVGJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hIVGJ.png" alt="enter image description here"></a></p>
  
  <p>I am trying to develop a d3.js family chart. I'm interested in trying to enhance the data structure of this chart, along with the addition and space/design for the labels -- if there is a way of giving the parts dynamic lengths to give them the space it needs.</p>
  
  <p>I've made this jsfiddle
  <a href="http://jsfiddle.net/857edt69/30/" rel="nofollow noreferrer">http://jsfiddle.net/857edt69/30/</a></p>
  
  <pre><code>  // Create the node rectangles.
    nodes.append("circle")
      .attr("class", "node")
      .attr("r", function(d, i) {
        return smallRadius;
      })
      .style("fill", function(d, i) {
  
        var userName = d.userName;
        if (userName) {
          userName.toLowerCase()
        }
  
        var id = d.id + "-" + userName; //small circles
        return "url(#" + id + ")";
      })
      .attr("id", function(d) {
        return d.id;
      })
      .attr("display", function(d) {
        if (d.hidden) {
          return "none"
        } else {
          return ""
        };
      })
      .attr("cx", function(d) {
        return d.x - (smallRadius / 2) + 10;
      })
      .attr("cy", function(d) {
        return d.y - (smallRadius / 2) + 10;
      });
  
  
    // Create the node text label.
    nodes.append("text")
      .text(function(d) {
        //return d.name;
        return d.userName;
      })
      .attr("x", function(d) {
        return d.x - (smallRadius / 2) + 10;
      })
      .attr("y", function(d) {
        return d.y - (smallRadius / 2) - 20;
      });
  </code></pre>