/*********** 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, String);
circle.enter()
  .append('circle')
    .attr('r', 25)
    .attr('cx', function(datum) {return datum;})
    .attr('cy', 25)

/*********** STEP 5 ************
If the data changes, we can animate attributes of the data that don't exist anymore*/
var DATA = [100, 200];

var circle = svg.selectAll('circle').data(DATA, String);
// These are the circles that correspond to data no longer in the dataset [300, 400, 500]
// Let's make them red
circle.exit()
  .attr('fill', 'red');
// These are the circles that new to the dataset [200]
// Let's make them green
circle.enter()
  .append('circle')
    .attr('r', 25)
    .attr('cx', function(datum) {return datum;})
    .attr('cy', 25)
  .attr('fill', 'green');
// You will notice that one circle is not red or green.
// That is the circle that corresponds to the datum that did not change [100]

// The most common thing to do with circles that no longer correspond to existing data is to remove them
/*circle.exit()
  .transition()
    .duration(5000)
  .style('opacity', 0)
  .remove()*/