Brush selection on a table

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <style type="text/css">
    #table{
        position: absolute;
    }
    #viz{
        position: absolute;
    }
    .selected{
       background-color: red;
    }
    </style>
</head>
<body>
    <div id="table"></div>
    <div id="viz"></div>
    <script type="text/javascript">

(function(){d3.custom = {};

var dragTarget = null,
        hoverTarget = null,
        htmlTable = null,
        erase = false;

d3.custom.brush = function(d, i){
        htmlTable = d3.select("#table table")
            .style("cursor", "crosshair");
        this.on("mousedown", function(d, i){brushStart(this, event, d, i)})
            .on("mousemove", function(d, i){brushDrag(this, event, d, i)})
            .on("mouseup", function(d, i){brushStop(this, event, d, i)});
        d3.select(document).on("mouseup", function(){brushStop(this, event)});
        document.oncontextmenu = function(){return false;};
        document.onselectstart = function(){return false;};
    };

function brushStart(element, event, d, i){
        dragTarget = event.target;
        htmlHover = d3.select(hoverTarget);
        erase = !htmlHover.classed("selected");
        htmlHover.classed("selected", erase);
        console.log("start: ", getRow(hoverTarget), i);
    };

function brushDrag(element, event, d, i){
        hoverTarget = event.target;
        if (dragTarget){
            console.log("drag: ", getRow(hoverTarget), i);
            d3.select(hoverTarget)
                .classed("selected", erase);
        }
    };

function getRow(element){
        for (var k=0,e=element.parentNode; e = e.previousSibling; ++k);
        return k;
    };

})();

var dataset = [],
tmpDataset = [],
i, j;

for (i = 0; i < 5; i++) {
    for (j = 0, tmpDataset = []; j < 3; j++) {
        tmpDataset.push("Row:"+i+",Col:"+j);
    }
    dataset.push(tmpDataset);
}

d3.select("#table")
    .append("table")
    .style("border-collapse", "collapse")
    .style("border", "2px black solid")

.selectAll("tr")
    .data(dataset)
    .enter().append("tr")

.selectAll("td")
    .data(function(d){return d;})
    .enter().append("td")
    .style("width", "50px")
    .style("height", "20px")
    .style("border", "1px black solid")
    .style("padding", "10px")
    .call(d3.custom.brush)
    .text(function(d){return d;})
    .style("font-size", "12px");

d3.select("#viz")
    .append("svg:svg")
    .attr("width", 0)
    .attr("height", 0);

</script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js