D3 Intro Enter / Exit

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.js"></script>
<div class="chart"><svg></svg></div>

JavaScript

var data = [1 ,4, 5, 6, 24, 8, 12, 1, 1, 20];
var chart = d3.select('.chart svg');

// Add all bars to the chart.
var rects = chart
    .selectAll('rect') 
    .data(data) 
    .enter() 
createRectangles(rects); 

// Remove bars after a short delay.
d3.selectAll('g')
    .data([5, 6])
    .order()    
    .exit()
    .transition()
    .delay(3000)
    .remove();

// Separate out the creation from the data selection.
function createRectangles(data){
   
    // Create a group with a rectangle
    data.append("g").append('rect')
        .attr("class", "rectangle")
        .attr("stroke", "black")
        .attr("stroke-width","1px")
        .attr("fill","none")
        .attr("x", 0)
        .attr("y", function(d, i) { return 25 * i; } )
        .attr("width", function(d) { return 22 * d; } )
        .attr("height", "20");
    
    // Add text to the group
    d3.selectAll("g")
        .append("text")
        .text(function(d){ return d; })
        .attr("x", 2)
        .attr("y", function(d, i) { return 25 * i + 16; } )
        .attr("fill", "steelblue");
        
    return rects;
}