biovisualize/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.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 brushStop(element, event, d, i){
        if (dragTarget){
            var targetElement = event.target;
            if(targetElement.nodeName == "TD"){
                console.log("stop", getRow(targetElement), i);
            }
        }
        dragTarget = null;
    };

    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>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.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 brushStop(element, event, d, i){
	if (dragTarget){
	var targetElement = event.target;
	if(targetElement.nodeName == "TD"){
	console.log("stop", getRow(targetElement), i);
	}
	}
	dragTarget = null;
	};

	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>