``````<body role="document">
<center><div id="chart"> </div></center>
</body>``````
``````/*********** 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()*/
``````

### External CSS

This Pen doesn't use any external CSS resources.