A CodePen by BrianGenisio. Simple Animations - Using D3.js, animate the points as they are drawn

index.html

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

script.js

var width = 800,
    height = 200,
    margin = 50;

var data = [50, 125, 75, 150];
var svg = d3.select('body').append('svg')
  .attr('width', width + margin*2)
  .attr('height', height + margin*2)
  .append('g')
    .attr('transform', 'translate(' + margin + ',' + margin + ')');


var scaleX = d3.scale.linear()
  .range([0, width])
  .domain([0, data.length-1]);

function x(d, i) { return scaleX(i); }

var scaleY = d3.scale.linear()
  .range([height, 0])
  .domain(d3.extent(data));
  
function y(d, i) { return scaleY(d); }

var xAxis = d3.svg.axis()
    .scale(scaleX)
    .orient('bottom');

svg.append('g')
    .attr('class', 'axis')
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis);
  
var yAxis = d3.svg.axis()
    .scale(scaleY)
    .orient('left');

svg.append('g')
    .attr('class', 'axis')
    .call(yAxis);


function update() {
  var circles = svg.selectAll('circle').data(data);
  circles.enter()
    .append('circle')
    .attr({
      fill: '#f00',
      cx: x,
      cy: height,
      r: 0
    })
    .transition()
    .duration(1500)
    .delay(function(d, i) { return i * 300; })
    .attr('cy', y)
    .attr('r', function(d, i) { return Math.sqrt(d); } );
  
  var line = d3.svg.line()
    .interpolate('basis')
    .x(x)
    .y(y);
  
  svg.append('path')
    .datum(data)
    .attr({
      'fill': 'none',
      'stroke-width': 2,
      stroke: '#00F',
      d: line
    });  
}

update();

style.css

.axis path {
  fill: none;
  stroke: #000;
}