biovisualize/index.html

## index.html
<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <script type='text/javascript' src="http://d3js.org/d3.v3.min.js"></script>
    <script type='text/javascript' src="util.js"></script>
    <script type='text/javascript' src="legend.js"></script>
    <link rel="stylesheet" type="text/css" href="./style.css">
    <style>
        div{
            position: absolute;
            top: 30px;
        }
        #container1{
            left: 0px;
        }
        #container2{
            left: 100px;
        }
        #container3{
            left: 200px;
        }
    </style>
</head>
<body>

<div id="container1"></div>
<div id="container2"></div>
<div id="container3"></div>

<script>

    var continuouslegend = micropolar.legend()
        .config({
            data: [1, 10],
            colors: ['red', 'yellow', 'limegreen'],
            containerSelector: '#container1'
        });
    continuouslegend();

    var discreteLegend = micropolar.legend()
        .config({
            data: ['a', 'b', 'c'],
            colors: ['red', 'yellow', 'limegreen'],
            containerSelector: '#container2'
        });
    discreteLegend();

    var symbolLegend = micropolar.legend()
            .config({
                data: ['a', 'b', 'c'],
                colors: 'black',
                symbols: ['square', 'line', 'cross'],
                containerSelector: '#container3'
            });
    symbolLegend();


</script>

</body>
</html>

## legend.js
var micropolar = micropolar || {version: '0.1.1'};

micropolar.legend = function module() {
    var config = {
        height: 150,
        lineHeight: 20,
        colorBandWidth: 30,
        fontSize: 12,
        containerSelector: 'body',
//        data: [1, 10],
        data: ['a', 'b', 'c'],
        symbols: 'square', //'square', 'line', 'cross', 'diamond'
        colors: ['red', 'yellow', 'limegreen'],
        textColor: 'grey'
    };
    var dispatch = d3.dispatch('hover');

    function exports() {
        var container = config.containerSelector;
        if (typeof container == 'string') container = d3.select(container);

        var isContinuous = typeof config.data[0] === 'number';
        var height = isContinuous ? config.height : (config.lineHeight) * config.data.length;
        var symbols = config.symbols || 'square';
        var colors = config.colors || ['black'];
        if(typeof colors === 'string') colors = [colors];

        var geometryGroup = container.classed('legend', true);
        var svg = geometryGroup.append('svg')
            .attr({
                width: 300,
                height: height + config.lineHeight * 2,
                xmlns: 'http://www.w3.org/2000/svg',
                'xmlns:xmlns:xlink': 'http://www.w3.org/1999/xlink',
                version: '1.1'
            });
        var svgGroup = svg.append('g')
            .attr({transform: 'translate('+ [0, config.lineHeight] +')'});

        var colorScale = d3.scale[(isContinuous) ? 'linear' : 'ordinal']().domain(config.data).range(colors);
        var dataScale = colorScale.copy()[(isContinuous) ? 'range' : 'rangePoints']([0, height]);

        var shapeGenerator = function(_type, _size){
            if(_type === 'line'){
                return 'M' + [ [-_size / 2, -_size / 8], [_size / 2, -_size / 8],
                    [_size / 2, _size / 8], [-_size / 2, _size / 8]] + 'Z';
            }
            else if(d3.svg.symbolTypes.indexOf(_type) != -1) return d3.svg.symbol().type(_type).size(Math.pow(_size / 2, 2))();
            else return d3.svg.symbol().type('square').size(Math.pow(_size / 2, 2))()
        };

        if(isContinuous){
            var gradient = svgGroup.append('defs').append('linearGradient')
                .attr({id: 'grad1', x1: '0%', y1: '0%', x2: '0%', y2: '100%'})
                .selectAll('stop')
                .data(colors);
            gradient.enter().append('stop');
            gradient.attr({ offset: function(d, i){ return i / (colors.length - 1) * 100 + '%'; } })
                .style({'stop-color': function(d, i){ return d; }});
            svgGroup.append('rect').classed('mark', true)
                .attr({height: config.height, width: config.colorBandWidth, fill: 'url(#grad1)'});
        }
        else{
            var legendElement = svgGroup.selectAll('path.mark')
                .data(config.data);
            legendElement.enter().append('path').classed('mark', true);
            legendElement.attr({
                transform: function(d, i){ return 'translate(' + [config.lineHeight / 2, dataScale(d, i)] + ')'; },
                d: function(d, i){
                    var symbolType = (typeof config.symbols === 'string') ? config.symbols : config.symbols[i];
                    return shapeGenerator(symbolType, config.lineHeight);
                },
                fill: function(d, i){ return colorScale(d, i); }
            });
        }

        var legendAxis = d3.svg.axis().scale(dataScale).orient('right');
        var axis = svgGroup.append('g').classed('legend-axis', true)
            .attr({transform: 'translate(' + [isContinuous ? config.colorBandWidth : config.lineHeight, 0] + ')'})
            .call(legendAxis);
        axis.selectAll('.domain').style({fill: 'none', stroke: 'none'});
        axis.selectAll('line').style({fill: 'none', stroke: config.textColor});
        axis.selectAll('text').style({fill: config.textColor, 'font-size': config.fontSize});

        svg.attr({width: svg.node().getBBox().width + 10});
    }
    exports.config = function(_x) {
        if (!arguments.length) return config;
        micropolar._override(_x, config);
        return this;
    };
    d3.rebind(exports, dispatch, 'on');
    return exports;
};

## util.js
var micropolar = micropolar || {version: '0.1.1'};

micropolar._override = function(_objA, _objB){ for(var x in _objA) if(x in _objB) _objB[x] = _objA[x]; };
micropolar._extend = function(_objA, _objB){ for(var x in _objA) _objB[x] = _objA[x]; };

micropolar._rndSnd = function(){
    return (Math.random()*2-1)+(Math.random()*2-1)+(Math.random()*2-1);
};
	<!DOCTYPE html>

	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title></title>
	<script type='text/javascript' src="http://d3js.org/d3.v3.min.js"></script>
	<script type='text/javascript' src="util.js"></script>
	<script type='text/javascript' src="legend.js"></script>
	<link rel="stylesheet" type="text/css" href="./style.css">
	<style>
	div{
	position: absolute;
	top: 30px;
	}
	#container1{
	left: 0px;
	}
	#container2{
	left: 100px;
	}
	#container3{
	left: 200px;
	}
	</style>
	</head>
	<body>

	<div id="container1"></div>
	<div id="container2"></div>
	<div id="container3"></div>

	<script>

	var continuouslegend = micropolar.legend()
	.config({
	data: [1, 10],
	colors: ['red', 'yellow', 'limegreen'],
	containerSelector: '#container1'
	});
	continuouslegend();

	var discreteLegend = micropolar.legend()
	.config({
	data: ['a', 'b', 'c'],
	colors: ['red', 'yellow', 'limegreen'],
	containerSelector: '#container2'
	});
	discreteLegend();

	var symbolLegend = micropolar.legend()
	.config({
	data: ['a', 'b', 'c'],
	colors: 'black',
	symbols: ['square', 'line', 'cross'],
	containerSelector: '#container3'
	});
	symbolLegend();


	</script>

	</body>
	</html>
	var micropolar = micropolar \|\| {version: '0.1.1'};

	micropolar.legend = function module() {
	var config = {
	height: 150,
	lineHeight: 20,
	colorBandWidth: 30,
	fontSize: 12,
	containerSelector: 'body',
	// data: [1, 10],
	data: ['a', 'b', 'c'],
	symbols: 'square', //'square', 'line', 'cross', 'diamond'
	colors: ['red', 'yellow', 'limegreen'],
	textColor: 'grey'
	};
	var dispatch = d3.dispatch('hover');

	function exports() {
	var container = config.containerSelector;
	if (typeof container == 'string') container = d3.select(container);

	var isContinuous = typeof config.data[0] === 'number';
	var height = isContinuous ? config.height : (config.lineHeight) * config.data.length;
	var symbols = config.symbols \|\| 'square';
	var colors = config.colors \|\| ['black'];
	if(typeof colors === 'string') colors = [colors];

	var geometryGroup = container.classed('legend', true);
	var svg = geometryGroup.append('svg')
	.attr({
	width: 300,
	height: height + config.lineHeight * 2,
	xmlns: 'http://www.w3.org/2000/svg',
	'xmlns:xmlns:xlink': 'http://www.w3.org/1999/xlink',
	version: '1.1'
	});
	var svgGroup = svg.append('g')
	.attr({transform: 'translate('+ [0, config.lineHeight] +')'});

	var colorScale = d3.scale[(isContinuous) ? 'linear' : 'ordinal']().domain(config.data).range(colors);
	var dataScale = colorScale.copy()[(isContinuous) ? 'range' : 'rangePoints']([0, height]);

	var shapeGenerator = function(_type, _size){
	if(_type === 'line'){
	return 'M' + [ [-_size / 2, -_size / 8], [_size / 2, -_size / 8],
	[_size / 2, _size / 8], [-_size / 2, _size / 8]] + 'Z';
	}
	else if(d3.svg.symbolTypes.indexOf(_type) != -1) return d3.svg.symbol().type(_type).size(Math.pow(_size / 2, 2))();
	else return d3.svg.symbol().type('square').size(Math.pow(_size / 2, 2))()
	};

	if(isContinuous){
	var gradient = svgGroup.append('defs').append('linearGradient')
	.attr({id: 'grad1', x1: '0%', y1: '0%', x2: '0%', y2: '100%'})
	.selectAll('stop')
	.data(colors);
	gradient.enter().append('stop');
	gradient.attr({ offset: function(d, i){ return i / (colors.length - 1) * 100 + '%'; } })
	.style({'stop-color': function(d, i){ return d; }});
	svgGroup.append('rect').classed('mark', true)
	.attr({height: config.height, width: config.colorBandWidth, fill: 'url(#grad1)'});
	}
	else{
	var legendElement = svgGroup.selectAll('path.mark')
	.data(config.data);
	legendElement.enter().append('path').classed('mark', true);
	legendElement.attr({
	transform: function(d, i){ return 'translate(' + [config.lineHeight / 2, dataScale(d, i)] + ')'; },
	d: function(d, i){
	var symbolType = (typeof config.symbols === 'string') ? config.symbols : config.symbols[i];
	return shapeGenerator(symbolType, config.lineHeight);
	},
	fill: function(d, i){ return colorScale(d, i); }
	});
	}

	var legendAxis = d3.svg.axis().scale(dataScale).orient('right');
	var axis = svgGroup.append('g').classed('legend-axis', true)
	.attr({transform: 'translate(' + [isContinuous ? config.colorBandWidth : config.lineHeight, 0] + ')'})
	.call(legendAxis);
	axis.selectAll('.domain').style({fill: 'none', stroke: 'none'});
	axis.selectAll('line').style({fill: 'none', stroke: config.textColor});
	axis.selectAll('text').style({fill: config.textColor, 'font-size': config.fontSize});

	svg.attr({width: svg.node().getBBox().width + 10});
	}
	exports.config = function(_x) {
	if (!arguments.length) return config;
	micropolar._override(_x, config);
	return this;
	};
	d3.rebind(exports, dispatch, 'on');
	return exports;
	};
	var micropolar = micropolar \|\| {version: '0.1.1'};

	micropolar._override = function(_objA, _objB){ for(var x in _objA) if(x in _objB) _objB[x] = _objA[x]; };
	micropolar._extend = function(_objA, _objB){ for(var x in _objA) _objB[x] = _objA[x]; };

	micropolar._rndSnd = function(){
	return (Math.random()2-1)+(Math.random()2-1)+(Math.random()*2-1);
	};