biovisualize/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.0.0"></script>
<style type="text/css">
body {
font: 10px sans-serif;
}
svg {
shape-rendering: crispEdges;
}
.x.axis path{
display: none;
}
</style>
</head>
<body>
<script type="text/javascript">

function newName(length) {
    var consonants = "bcdfglmnprstv";
    var vocals = "aeiou";
    var s = "";
    var type = false;
    for (var i = 0; i < length; i++) {
        type = !type;
        var rnd = Math.random();
        s += (type == 0)? consonants.charAt(~~(rnd*consonants.length)) : vocals.charAt(~~(rnd*vocals.length));
        if (s.length == 1) s = s.toUpperCase();
    }
    return s;
}

var itemCount = 10;
var names = d3.range(itemCount).map(function(){ return newName(~~(Math.random() * 12 + 2)); });
var data1 = d3.range(itemCount).map(function(){return Math.random()*0.7+0.1;});
var data2 = d3.range(itemCount).map(function(){return Math.random()*0.9+0.1;});

var w = 430,
    h = 230,
    x = d3.scale.linear().domain([0, 1]).range([0, w]),
    y = d3.scale.ordinal().domain(d3.range(data1.length)).rangeBands([0, h], .2)
    color = d3.interpolateRgb("#446688", "#88ddff"),
    xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true),
    yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");

var vis = d3.select("body")
  .append("svg:svg")
    .attr("width", w + 40)
    .attr("height", h + 20)
  .append("svg:g")
    .attr("transform", "translate(20,0)");

vis.append("svg:g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + h + ")")
    .call(xAxis);

var barGroup = vis.selectAll("g.bar")
    .data(data1)
  .enter().append("svg:g")
    .attr("class", "bar")
    .attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; });

barGroup.append("svg:rect")
    .attr("class", "shadow")
    .attr("width", x)
    .attr("height", y.rangeBand())
    .attr("fill", function(d, i){return color(d)})
    .attr("opacity", 0.3);

barGroup.append("svg:rect")
    .attr("class", "bar")
    .attr("width", x)
    .attr("height", y.rangeBand())
    .attr("fill", function(d, i){return color(d)});

barGroup.append("svg:text")
    .text(function(d, i){return names[i];})
    .attr("width", x)
    .attr("x", 3)
    .attr("y", 3)
    .attr("fill", "black")
    .style("alignment-baseline", "hanging");

vis.append("svg:line")
    .attr("y1", 0)
    .attr("y2", h)
    .attr("stroke", "black")
    .attr("stroke-width", 2);

var toggleData = false;
var newData = data1;
function refresh(){
    newData = toggleData ? data2 : data1;
    toggleData = !toggleData;
    barGroup
        .sort(function(a, b){return b - a;})
        .transition()
        .duration(500)
        .attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; })
        .each("end", function(d, i){if(i==0)resize();});
}
refresh();
setInterval(refresh, 4000);

function resize(){
    barGroup.data(newData);

    d3.selectAll("rect.bar")
        .data(newData)
        .transition()
        .delay(500)
        .attr("width", x);
    d3.selectAll("rect.shadow")
        .data(newData)
        .transition()
        .delay(1500)
        .attr("opacity", 0)
        .transition()
        .delay(2000)
        .attr("width", x)
        .each("end", function(d, i){if(i==0)rescale();});
}

function rescale(){
    x.domain([0, d3.max(newData)]);
    var t = vis.transition().duration(500);
    t.select(".x.axis").call(xAxis);
    d3.selectAll("rect.bar")
        .transition()
        .duration(500)
        .attr("width", x);
    d3.selectAll("rect.shadow")
        .transition()
        .duration(500)
        .attr("width", x)
        .attr("opacity", 0.3);
}
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bar Chart</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.0.0"></script>
	<style type="text/css">
	body {
	font: 10px sans-serif;
	}
	svg {
	shape-rendering: crispEdges;
	}
	.x.axis path{
	display: none;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">

	function newName(length) {
	var consonants = "bcdfglmnprstv";
	var vocals = "aeiou";
	var s = "";
	var type = false;
	for (var i = 0; i < length; i++) {
	type = !type;
	var rnd = Math.random();
	s += (type == 0)? consonants.charAt(~~(rndconsonants.length)) : vocals.charAt(~~(rndvocals.length));
	if (s.length == 1) s = s.toUpperCase();
	}
	return s;
	}

	var itemCount = 10;
	var names = d3.range(itemCount).map(function(){ return newName(~~(Math.random() * 12 + 2)); });
	var data1 = d3.range(itemCount).map(function(){return Math.random()*0.7+0.1;});
	var data2 = d3.range(itemCount).map(function(){return Math.random()*0.9+0.1;});

	var w = 430,
	h = 230,
	x = d3.scale.linear().domain([0, 1]).range([0, w]),
	y = d3.scale.ordinal().domain(d3.range(data1.length)).rangeBands([0, h], .2)
	color = d3.interpolateRgb("#446688", "#88ddff"),
	xAxis = d3.svg.axis().scale(x).tickSize(-h).tickSubdivide(true),
	yAxis = d3.svg.axis().scale(y).ticks(4).orient("right");

	var vis = d3.select("body")
	.append("svg:svg")
	.attr("width", w + 40)
	.attr("height", h + 20)
	.append("svg:g")
	.attr("transform", "translate(20,0)");

	vis.append("svg:g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + h + ")")
	.call(xAxis);

	var barGroup = vis.selectAll("g.bar")
	.data(data1)
	.enter().append("svg:g")
	.attr("class", "bar")
	.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; });

	barGroup.append("svg:rect")
	.attr("class", "shadow")
	.attr("width", x)
	.attr("height", y.rangeBand())
	.attr("fill", function(d, i){return color(d)})
	.attr("opacity", 0.3);

	barGroup.append("svg:rect")
	.attr("class", "bar")
	.attr("width", x)
	.attr("height", y.rangeBand())
	.attr("fill", function(d, i){return color(d)});

	barGroup.append("svg:text")
	.text(function(d, i){return names[i];})
	.attr("width", x)
	.attr("x", 3)
	.attr("y", 3)
	.attr("fill", "black")
	.style("alignment-baseline", "hanging");

	vis.append("svg:line")
	.attr("y1", 0)
	.attr("y2", h)
	.attr("stroke", "black")
	.attr("stroke-width", 2);

	var toggleData = false;
	var newData = data1;
	function refresh(){
	newData = toggleData ? data2 : data1;
	toggleData = !toggleData;
	barGroup
	.sort(function(a, b){return b - a;})
	.transition()
	.duration(500)
	.attr("transform", function(d, i) { return "translate(0," + y(i) + ")"; })
	.each("end", function(d, i){if(i==0)resize();});
	}
	refresh();
	setInterval(refresh, 4000);

	function resize(){
	barGroup.data(newData);

	d3.selectAll("rect.bar")
	.data(newData)
	.transition()
	.delay(500)
	.attr("width", x);
	d3.selectAll("rect.shadow")
	.data(newData)
	.transition()
	.delay(1500)
	.attr("opacity", 0)
	.transition()
	.delay(2000)
	.attr("width", x)
	.each("end", function(d, i){if(i==0)rescale();});
	}

	function rescale(){
	x.domain([0, d3.max(newData)]);
	var t = vis.transition().duration(500);
	t.select(".x.axis").call(xAxis);
	d3.selectAll("rect.bar")
	.transition()
	.duration(500)
	.attr("width", x);
	d3.selectAll("rect.shadow")
	.transition()
	.duration(500)
	.attr("width", x)
	.attr("opacity", 0.3);
	}
	</script>
	</body>
	</html>