JavaScript
var data = [
{x:0, y:10, r:10, text:"a"},
{x:10, y:0, r:15, label:'blah', text:"blah"},
{x:10, y:0, r:7, label:'blah'},
{x:10, y:0, r:5, label:'blah'},
{x:10, y:0, r:9, label:'blah'},
{x:10, y:0, r:5, label:'blah'},
{x:10, y:0, r:5, label:'blah'},
{x:0, y:10, r:10, label:'blah'},
{x:10, y:0, r:15, label:'blah'},
{x:10, y:0, r:7, label:'blah'},
{x:10, y:0, r:5, label:'blah'},
{x:10, y:0, r:9, label:'blah'},
{x:10, y:0, r:5, label:'blah'},
{x:10, y:0, r:5, label:'blah'},
{x:10, y:10, r:2, label:'blah'}
];
var width = 800, height = 800;
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height);
var nodes = svg.selectAll("circle").data(data);
nodes.enter().append("circle")
.attr("cx", function(d){ return d.x; })
.attr("cy", function(d){ return d.y; });
nodes.attr("r", 0)
.style({'fill': function(d){ return d3.rgb(255,255*Math.random(),64*Math.random()).toString() }})
.transition()
.duration(1000)
.attr("r", function(d){ return d.r; });
nodes
.on("mouseover", function(d, i){
var lbl = svg.selectAll("g").interrupt().data([d]);
lbl.enter().append("g");
lbl.attr("pointer-events", "none")
.attr("transform", function(d){ return "translate(" + d.x + "," + d.y + ")"; })
.append("text")
.text(function(d) { return d.label; })
.transition()
.duration(200)
;
}
)
.on("mouseout", function(d, i){
var lbl = svg.selectAll("g").data([]);
lbl.exit().transition()
.duration(400)
.style({"fill-opacity": 0.0})
.remove();
}
);
/*var labels = svg.selectAll("g").data(data);
labels.enter().append("g")
.attr("transform", function(d){ return "translate(" + d.x + "," + d.y + ")"; });
labels.append("text")
.attr("text-anchor", "middle")
.text(function(d){ return d.label; })
...