JSFiddle - React, Tailwind, and code Playground

created based on SO question http://stackoverflow.com/questions/14905671/d3-js-retrieving-dom-subset-given-data-subset

by activescott

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<html>
    <body>
    </body>
</html>

JavaScript

var data = [];
var width=500,height=500;
var itemCount = 5000;

for (var i=0; i < itemCount; i++) {
    data.push({i: i}); 
}
// use the data operator's key operand to bind elements to data by a key rather than by index which is the default
var keyFunc = function(d) { return "di" + d.i;};

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var ellipse = svg.selectAll("ellipse").data(data, keyFunc).enter()
    .append("ellipse")
    .each(function(d) { d.dom = this; })
    .attr("class", function (d) { 
        var cl = "di" + d.i;
        if (d.i % 10 == 0)
            cl+= " subset";
        return cl;
    ;})
    .attr("cx", function (d) {
        return Math.random() * (width - 0) + 0;
    })
    .attr("cy", function (d) {
        return Math.random() * (height - 0) + 0;
    })
    .attr("rx", 15)
    .attr("ry", 5);


//now lets go back and turn every 10th one a different color:
var subset = data.filter(function (d) { return d.i % 10 == 0; });

var d3UpdateMethod = function() {
    svg.selectAll("ellipse").data(subset, keyFunc)
        .attr("style", "fill:green");
}
var loopMethod = function() {
    for (var i=0; i < subset.length; i++) {
        svg.selectAll(".di" + subset[i].i).attr("style", "fill:red");
    }
}
var directMethod = function() {
    var updated = [];
    for (var i=0; i < subset.length; i++) {
        updated.push(subset[i].dom);
    }
    d3.selectAll(updated).attr("style", "fill:blue");
}
var cssClassMethod = function() {
    svg.selectAll("ellipse.subset").attr("style", "fill:yellow");
}
var timedTest = function(f) {
    var sumTime=0;
    for (var i=0; i < 10; i++) {
        var startTime = Date.now();
        f();
        sumTime += (Date.now() - startTime);
    }
    return sumTime / 10;
};
var nextY = 50;
var log = function(text) {
    svg.append("text")
        .attr("x", width/2)
        .attr("y", nextY+=50)
        .attr("text-anchor", "middle")
        .attr("style", "fill:red")
   ...