var data =
    [
        {
            "name": "Root",
            "id": 0
        },
        {
            "name": "Leaf",
            "size": 2098629,
            "id": 1,
            "parent": 0
        },
        {
            "name": "Leaf",
            "size": 104720,
            "id": 2,
            "parent": 0
        },
        {
            "name": "Leaf",
            "size": 5430,
            "id": 3,
            "parent": 0
        },
        {
            "name": "Leaf",
            "size": 102096,
            "id" : 4,
            "parent": 0
        },
        {
            "name": "Leaf",
            "size": 986974,
            "id": 5,
            "parent": 0
        },
        {
            "name": "Leaf",
            "size": 59735,
            "id": 6,
            "parent": 0
        },
        {
            "name": "Leaf",
            "size": 1902,
            "id": 7,
            "parent": 0
        },
    ];

var diameter = 500,
    format = d3.format(",d"),
    diffsize = true,
    circleMin = 100,
    circleMax = 5000000,
    idCounter = data.length;

var svg = d3.select("#vis").append("svg")
    .attr("width", diameter)
    .attr("height", diameter);

var root;
var stratify = d3.stratify()
    .id(function(d) { return d.id; })
    .parentId(function(d) { return d.parent; });

var pack = d3.pack()
    .size([diameter - 4, diameter - 4]);

var vis, titles, circles;

function getRoot(data) {
    return stratify(data)
        .sum(function(d) {
            if (diffsize) {
                return d.size;
            } else {
               return 1000;
            }
        })
        .sort( function(a, b) {
        return -(a.value - b.value);
    });
}

// Munch some data into the children array
function updateData() {
   data.push({
      "name": "Leaf",
      "synthetic": true,
      "size": Math.floor(Math.random() * circleMax) + circleMin,
      "id": idCounter++,
      "parent": 0
   });
};

// Visualization render
function render(root) {
    var packedNodes = pack(root);
    var children = packedNodes.leaves();

    var circles = svg.selectAll("circle")
        .data(children, function(d) {
            return d.id;
        });

    // entering
    var entering = circles.enter()
        .append("circle");


    // existing, before rest
    circles.style("fill", "white");

    entering
        .style("fill", "yellow")
        .style("stroke", "black")
        .attr("r", 0);

    circles.merge(entering)
        .transition().duration(500)
        .attr("cx", function(d) {
            return d.x;
        })
        .attr("cy", function(d) {
            return d.y;
        })
        .attr("r", function(d) {
            return d.r;
        });
}

// wire up button
d3.select("#adddata").on("click", function() {
    updateData();
    render(getRoot(data));
});

d3.select("#samesize").on("click", function() {
    diffsize = false;
    render(getRoot(data));
});

d3.select("#diffsize").on("click", function() {
    diffsize = true;
    render(getRoot(data));
});

d3.select("#circlemin").on("change", function() {
    circleMin = parseInt(this.value, 10);
})

d3.select("#circlemax").on("change", function() {
    circleMax = parseInt(this.value, 10);
})

render(getRoot(data));