D3.js playground

HTML

<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>

CSS

body {
    font: 12px/16px Arial, Helvetica, sans-serif;
}

div {
  width: 100px;
  height: 100px;
  background-color: #FF00FF;
  margin: 5px;
  float: left;
}

JavaScript

d3.selectAll("div")
    .transition()
    .delay( function(d, i) {
        return i * 250;
    })
    .ease("circle")
    .style("background-color", "#00FF00");
d3.select("div")
	.append("p");