|
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)); |
