d3.timer

_.md

[ Launch: - ] 4696173 by antulik

config.json

{"description":"d3.timer","endpoint":"","display":"svg","public":true,"require":[{"name":"d3","url":"http://d3js.org/d3.v2.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var i = 0,
    svg = d3.select("svg");
    svg.append("circle");
    var circle = svg.select("circle");
    circle.attr("fill", "#777777")
        .attr("cx", function(){ return $(window).width() / 2 })
        .attr("cy", function(){ return $(window).height() / 2 })

d3.timer(function() {
  i++;
  var a = 1 + Math.sin(i / 30);
  var x = a * 124;
  var c = d3.rgb(x,x,x)
  circle.attr("r", function() { return a * 40; })
        .attr("fill", function() { return c; });
});

style.css

body {
    background-color: #555;
}