created by http://livecoding.io/3411676

README.md

View this code at http://livecoding.io/3746776

options.json

{
    "libraries": [
        "d3"
    ],
    "mode": "json",
    "layout": "fullscreen mode (vertical)"
}

water.css

.node circle {
  fill: oldlace;
  stroke: tomato;
  stroke-width: 1.5px;
}

.node {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

water.html

<div id='chart'>
</div>

water.js

var width = 300,
    height = 100;

var tree = d3.layout.tree()
    .size([height, width - 160]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var vis = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(40, 0)");

  var nodes = tree.nodes(livecoding.json);

  var link = vis.selectAll("path.link")
      .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("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

  node.append("circle")
    .attr("r", function(d){return 2+d.size/2});

  node.append("text")
      .attr("dx", function(d) { return d.children ? -8 : 8; })
      .attr("dy", 3)
      .attr("text-anchor", function(d) { return d.children ? "end" : "start"; })
      .text(function(d) { return d.name; });

water.json

{
 "name": "",
 "children": [
   {"name": "2", "size": 2},
   {"name": "4", "size": 4},
   {
   "name": "",
   "children": [
       {
       "name": "",
       "children": [
         {"name": "3", "size": 3},
         {"name": "2", "size": 2},
         {"name": "2", "size": 2},
         {"name": "1", "size": 1}
       ]
      },
   {
   "name": "",
   "children": [
     {"name": "6", "size": 6},
     {
   "name": "",
   "children": [
     {"name": "4", "size": 4},
     {"name": "6", "size": 6}
   ]}
     ]}
   ]
  }
 ]
}