nyc-d3-live-code

<!DOCTYPE html>
<meta charset="utf-8">

var width = 960,
    height = 500;

var svg = d3.select('body')
  .append('svg')
    .attr('width', width)
    .attr('height', height)

svg.selectAll('circle')
    .data(d3.range(0, width, 10)).enter()
  .append('circle')
    .attr('cx', function(d){ return d; })
    .attr('cy', function(d){ return Math.sin(d/50)*200 + 200})
    .attr('r', 5)
    
svg.selectAll('circle')
  .transition()
    .attr('cy', function(d){ return Math.sin(d/20)*1 + 200; })

svg.selectAll('circle').on('mouseover', function(){
  d3.select(this)
    .transition()
      .attr('cy', function(d){ return Math.sin(d/20)*100 + 200; })
    .transition()
      .attr('cy', function(d){ return Math.sin(d/20)*10 + 200; })
});

function addRect(size, x, y){
  svg.append('rect')
      .attr('x', x)
      .attr('width', size)
      .attr('y', y)
      .attr('height', size)
      .on('mouseover', function(){
        addRect(size*.95, x, y);
        d3.select(this)
          .transition()
            .attr('x', Math.random()*width)
            .attr('y', Math.random()*height)
          .transition()
            .attr('fill', 'rgb(' + Math.random()*255 +', 100, 100)')
      })
}

addRect(50, 300, 300);
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js