var margin = {top: 0, right: 0, bottom: 0, left: 0},
    width = 960, 
    height = 500, 
    diameter = Math.min(width, height),
    radius = diameter / 2;

var tree = d3.layout.balloon()
  .size([width, height])
  .value(function(d) { return d.size; })
  .gap(function(d) { return d.externalLinkCount * 50; });

var bundle = d3.layout.bundle();

var vis = d3.select("#vis").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + (margin.left + radius) + "," + (margin.top + radius) + ")");

d3.json("./readme.json", function(json) {
  var nodes = tree.nodes(packages.root(json)),
      links = bundle(packages.imports(nodes)); 

  var line = d3.svg.line()
      .interpolate("bundle")
      .tension(0.95)
      .x(function(d) { return d.lx; })
      .y(function(d) { return d.ly; });

  var link = vis.selectAll("path.link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", line);

  var node = vis.selectAll("g.node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node");

  node.append("circle")
      .attr("r", function(d) { return d.r; })
      .attr("cx", function(d) { return d.x; })
      .attr("cy", function(d) { return d.y; });
});