xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>Random radius</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js"></script>
</head>
<body>
<script>
var dataset = [];
for (var i = 0; i < 108; i++) {
var newNumber = Math.floor((Math.random()*100)+10);;
dataset.push(newNumber);
}
var w = 520, h = 520;
var duration = 520;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var circle = svg.append("circle")
.attr("cx", w/2)
.attr("cy", h/2)
.attr("fill", "black");
var label = svg.append("text")
.attr("x", "10")
.attr("y", "20")
.attr("font-family", "monospace")
.attr("font-size", "18px")
.attr("fill", "red");
dataset.forEach(function(d, i) {
circle.transition().duration(duration).delay(i * duration)
.attr("r", d);
label.transition().duration(duration).delay(i * duration)
.text(function (d) { return dataset[i] });
});
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js