Learning d3.js

I read the introductory d3js.org website, downloaded the latest version, and read through one of the tutorials - Three little circles. I decided to build something animated using circles.

Here is the code used for this animation:

var w = 500,
var h = 300,
var svg = d3.select("svg")
  .attr("width", w)
  .attr("height", h)
  .style("background-color", "#fefefe")
  .style("display", "block");

var circle = svg.selectAll("circle")
  .data([19,30,18,20,22,29]);

circle.enter()
  .append("circle")
  .style("fill", "#cc2266");

function move() {
  circle.transition()
  .duration(1780)
  .attr("cx", function(d) { return Math.random() * (w - 100) + 50; })
  .attr("cy", function(d) { return Math.random() * (h - 100) + 50; })
  .attr("r", function(d) { return d + Math.random() * 30; });
}

window.setInterval(move, 1800);

Concepts learnt:

The notion of adding data to selectors.
The enter() and exit() commands that allow addition/removal of elements based on the data.
Combining css / attr operations with SVG.

John Trengrove

Learning d3.js