|
var data = { |
|
"name": "Root", |
|
"id": 0, |
|
"children": [ |
|
{ |
|
"name": "Leaf", |
|
"size": 2098629, |
|
"id": 1, |
|
}, |
|
{ |
|
"name": "Leaf", |
|
"size": 104720, |
|
"id": 2 |
|
}, |
|
{ |
|
"name": "Leaf", |
|
"size": 5430, |
|
"id": 3, |
|
}, |
|
{ |
|
"name": "Leaf", |
|
"size": 102096, |
|
"id" : 4 |
|
}, |
|
{ |
|
"name": "Leaf", |
|
"size": 986974, |
|
"id": 5 |
|
}, |
|
{ |
|
"name": "Leaf", |
|
"size": 59735, |
|
"id": 6 |
|
}, |
|
{ |
|
"name": "Leaf", |
|
"size": 1902, |
|
"id": 7 |
|
}, |
|
] |
|
}; |
|
|
|
var diameter = 500, |
|
format = d3.format(",d"), |
|
diffsize = true, |
|
circleMin = 100, |
|
circleMax = 5000000; |
|
|
|
var svg = d3.select("#vis").append("svg") |
|
.attr("width", diameter) |
|
.attr("height", diameter); |
|
|
|
var pack = d3.layout.pack() |
|
.size([diameter - 4, diameter - 4]) |
|
.sort( function(a, b) { |
|
return -(a.value - b.value); |
|
}) |
|
.value(function(d) { |
|
if (diffsize) { |
|
return d.size; |
|
} else { |
|
return 1000; |
|
} |
|
}); |
|
|
|
var vis, titles, circles; |
|
|
|
// Munch some data into the children array |
|
function updateData() { |
|
data.children.push({ |
|
"name": "Leaf", |
|
"synthetic": true, |
|
"size": Math.floor(Math.random() * circleMax) + circleMin, |
|
"id": Math.floor(Math.random() * 1000) |
|
}); |
|
return data; |
|
}; |
|
|
|
// Visualization render |
|
function render(data) { |
|
var packedNodes = pack.nodes(data); |
|
|
|
visSelection = svg.selectAll("g.node") |
|
.data(packedNodes.splice(1, packedNodes.length), function(d) { |
|
return d.id; |
|
}); |
|
|
|
vis = visSelection.enter() |
|
.append("g") |
|
.classed("node", true); |
|
|
|
visSelection.selectAll("circle") |
|
.style("fill", function(d) { return !d.children ? "white" : "beige"; }) |
|
|
|
circles = vis.append("circle") |
|
.attr("fill", "yellow") |
|
.attr("stroke", "black") |
|
.attr("r", 0); |
|
|
|
visSelection.selectAll("circle") |
|
.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() { |
|
data = updateData(); |
|
render(data); |
|
}); |
|
|
|
d3.select("#samesize").on("click", function() { |
|
diffsize = false; |
|
render(data); |
|
}); |
|
|
|
d3.select("#diffsize").on("click", function() { |
|
diffsize = true; |
|
render(data); |
|
}); |
|
|
|
d3.select("#circlemin").on("change", function() { |
|
circleMin = parseInt(this.value, 10); |
|
}) |
|
|
|
d3.select("#circlemax").on("change", function() { |
|
circleMax = parseInt(this.value, 10); |
|
}) |
|
|
|
render(data); |
