transition 1

all transitions together

HTML

<body>
  <button id="run">run</button>
  <svg class="container"></svg>
</body>

JavaScript

var data = [
[10, 50, 5, "red"], 
[50, 20, 10, "blue"], 
[40, 60, 15, "green"]
];

d3.select("#run").on("click", function() {
  d3.select(".container")
    .selectAll("circle")
    .data(data)
    .enter()
    .append('circle')
    // initial values
    .style("fill", function (d) { return d[3]; })
    .attr("cx", 0)
    .attr("cy", 0)
    .attr("r", 0)
    .transition(2000)
    // final values
    .attr("cx", function (d) { return d[0]; })
    .attr("cy", function (d) { return d[1]; })
    .attr("r", function (d) { return d[2]; });
});