biovisualize/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    path.layer{
        fill-opacity: 0.8;
        stroke-opacity: 1;
        stroke: white;
        stroke-width: 2px;
    }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<!--<script src="../lib/d3.js"></script>-->

<div class="chart">
</div>

<script>

    var layerCount = 4;
    var pointCount = 100;

    function generateDataPoint(_index){
        return d3.range(layerCount).map(function(dB, iB){
            buffer[iB] += (Math.random()) - 0.5;
            buffer[iB] = Math.max(buffer[iB], 0.1);
            return {key: 'Line'+iB, value: buffer[iB], date: _index};
        });
    }

    var buffer = d3.range(layerCount).map(function(d, i){ return 0; });
    var data = d3.merge(d3.range(pointCount).map(function(d, i){ return generateDataPoint(i);}));

    var width = 800;
    var height = 400;

    var x = d3.scale.linear().domain(d3.extent(data, function(d) { return d.date; })).range([0, width]);
    var y = d3.scale.linear().range([height, 0]);
    var colors = d3.scale.ordinal().range(['#4597ad', '#dc5f50', '#89c562', '#b85787', '#ebbb46', '#7376c1', '#d17c48', '#75c5ac', '#98a5b8', '#c895dc'].concat(d3.scale.category20().range()));

    var stack = d3.layout.stack()
        .offset('silhouette')
        .values(function(d){ return d.values; })
        .x(function(d){ return d.date; })
        .y(function(d){ return d.value; });

    var nest = d3.nest()
        .key(function(d){ return d.key; });

    var area = d3.svg.area()
        .interpolate('cardinal')
        .x(function(d){ return x(d.date); })
        .y0(function(d){ return y(d.y0); })
        .y1(function(d){ return y(d.y0 + d.y); });

    var svg = d3.select('.chart').append('svg')
        .attr('width', width)
        .attr('height', height);

    function update(){
        var newDataPoint = generateDataPoint(pointCount);
        pointCount++;
        data = data.slice(layerCount).concat(newDataPoint);
        var dataLayers = stack(nest.entries(data));

        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

        var layers = svg.selectAll('.layer')
            .data(dataLayers);
        layers.enter().append('path')
            .attr('class', 'layer');
        layers.attr('d', function(d){ return area(d.values); })
            .style('fill', function(d, i){ return colors(d.key); });
    }

    setInterval(update, 1000);

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	path.layer{
	fill-opacity: 0.8;
	stroke-opacity: 1;
	stroke: white;
	stroke-width: 2px;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<!--<script src="../lib/d3.js"></script>-->

	<div class="chart">
	</div>

	<script>

	var layerCount = 4;
	var pointCount = 100;

	function generateDataPoint(_index){
	return d3.range(layerCount).map(function(dB, iB){
	buffer[iB] += (Math.random()) - 0.5;
	buffer[iB] = Math.max(buffer[iB], 0.1);
	return {key: 'Line'+iB, value: buffer[iB], date: _index};
	});
	}

	var buffer = d3.range(layerCount).map(function(d, i){ return 0; });
	var data = d3.merge(d3.range(pointCount).map(function(d, i){ return generateDataPoint(i);}));

	var width = 800;
	var height = 400;

	var x = d3.scale.linear().domain(d3.extent(data, function(d) { return d.date; })).range([0, width]);
	var y = d3.scale.linear().range([height, 0]);
	var colors = d3.scale.ordinal().range(['#4597ad', '#dc5f50', '#89c562', '#b85787', '#ebbb46', '#7376c1', '#d17c48', '#75c5ac', '#98a5b8', '#c895dc'].concat(d3.scale.category20().range()));

	var stack = d3.layout.stack()
	.offset('silhouette')
	.values(function(d){ return d.values; })
	.x(function(d){ return d.date; })
	.y(function(d){ return d.value; });

	var nest = d3.nest()
	.key(function(d){ return d.key; });

	var area = d3.svg.area()
	.interpolate('cardinal')
	.x(function(d){ return x(d.date); })
	.y0(function(d){ return y(d.y0); })
	.y1(function(d){ return y(d.y0 + d.y); });

	var svg = d3.select('.chart').append('svg')
	.attr('width', width)
	.attr('height', height);

	function update(){
	var newDataPoint = generateDataPoint(pointCount);
	pointCount++;
	data = data.slice(layerCount).concat(newDataPoint);
	var dataLayers = stack(nest.entries(data));

	x.domain(d3.extent(data, function(d) { return d.date; }));
	y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

	var layers = svg.selectAll('.layer')
	.data(dataLayers);
	layers.enter().append('path')
	.attr('class', 'layer');
	layers.attr('d', function(d){ return area(d.values); })
	.style('fill', function(d, i){ return colors(d.key); });
	}

	setInterval(update, 1000);

	</script>