/*********** STEP 1 ************
Create an svg canvas to draw on*/
var HEIGHT = 600;
var WIDTH = 600;
var svg = d3.select('#chart')
  .append('svg')
    .attr('height', HEIGHT)
    .attr('width', WIDTH);

/*********** STEP 3 ************
We can draw circles based on data*/

var DATA = [100, 300, 400, 500];

var circle = svg.selectAll('circle').data(DATA);
circle.enter()
  .append('circle')
    .attr('r', 25)
    .attr('cx', function(datum) {return datum;})
    .attr('cy', 25)

/*********** STEP 4 ************
We can animate attributes based on data*/

/*Animating in D3 is as easy as adding .transition and specifying the duration you want the animation to run*/
circle
  .transition()
    .duration(5000)
  .attr("cy", function(datum) {return datum / 2;})
// We can string together two transitions

/*.transition()
    .duration(3000)
   .attr('fill', function(datum) {
      if (datum === 100) {return 'purple';};
    })*/