Zia's D3 Enter/Exit Test

Here is some discussion of why I created this tool to play around: Blog post on Enter/Exit questions.

Colors indicate the index of the data in the array when drawn initially. Circles are shifted down before the enter of new data, so the ones that "exited" but are not removed are shifted down, others are redrawn at the top.

Enter data array as space separated integer numbers 1-10:
Data:
Compare with String Enable Exit

Colors correspond to the following index values:

Here are some useful code snippets to see what is going on with the check box options above, this example is straight javascript, so easy to modify "test.js" if you want to play with it:

    // use "String" compare function only if "Compare with String" checked
    if(document.getElementById("compare").checked){
	var circles = svg.selectAll("circle")
	    .data(data, String);
    }else{
	var circles = svg.selectAll("circle")
	    .data(data);
    }

    // only exit the data if "Enable Exit" checked, otherwise
    // leave the elements around cause it's mildly interesting
    if(document.getElementById("exit").checked){
	circles.exit().remove();
    }