d3 playing

by hrabinowitz

HTML

<p>A simple example</p>
<svg></svg>

JavaScript

d3.select("body").transition()
    .duration(2750)
    .style("background-color", "blue");

var svg = d3.select("svg");
var data = [
    {"x": 1.0, "y": 1.1}, 
    {"x": 50.0, "y": 2.5},
    {"x": 100.0, "y": 3}
];
var circle = svg.selectAll("circle")
    .data(data);

circle.enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 0)
    .transition()
    .duration(1000)
    .attr("r", function(d) { return Math.sqrt(d.x); })
    .style("fill", "red");