biovisualize/index.html

## index.html
<!doctype html>
<html>
<head>
    <title></title>
    <meta charset=utf-8>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="https://raw.github.com/square/crossfilter/master/crossfilter.min.js"></script>
    <style>
    .menu1-container, .menu2-container, .menu3-container{
        position: relative;
        float: left;
        width: 300px;
        border: 1px #eee solid;
        padding: 20px;
    }
    .menu3-container{
        width: 800px;
    }
    </style>
</head>
<body>

<script id="template-menu1" type="text/template">
    <a class="link" href="#{dimension}=all">{dimension}</a>
</script>

<script id="template-menu2" type="text/template">
    <a class="link" href="#{dimension}={key}">{key}</a> -- {value}
</script>

<script id="template-menu3" type="text/template">
    <a class="link" href="{url}">{title}</a> -- {author}
</script>

<div class="gallery">
<div class="menu1-container"></div>
<div class="menu2-container"></div>
<div class="menu3-container"></div>
</div>

<script type="text/javascript">

var galleryCrossfilter = crossfilter();
var dimensions = {};

d3.csv('https://docs.google.com/spreadsheet/pub?key=0AqMEGBUNwXeHdHpQNlVuY29SUE5BSXVtS3JueGlNYVE&single=true&gid=0&output=csv', function(error, json){
    galleryCrossfilter.add(json);
    d3.keys(json[0]).forEach(function(d, i){
        dimensions[d] = galleryCrossfilter.dimension(function(d2){return d2[d];});
    });
    buildList(dataTransformMenu1(d3.keys(json[0])), '.menu1-container', '#template-menu1');
    buildList(dataTransformMenu2('documentType'), '.menu2-container', '#template-menu2');
    buildList(dataTransformMenu3('title', 'all'), '.menu3-container', '#template-menu3');
    processLocationHash();
});

function dataTransformMenu1(data){
    return data.map(function(d, i){return {dimension: d};});
}

function dataTransformMenu2(dimension){
    return d3.values(dimensions[dimension].group().all()).map(function(d, i){
        if(d.key == '') d.key = 'untagged';
        d.dimension = dimension; return d;
    });
}

function dataTransformMenu3(dimension, value){
    var sortDimension = 'title';
    if(value == 'all') value = null;
    var filtered = dimensions[dimension].filter(value).top(Infinity);
    dimensions[dimension].filter(null);
    return crossfilter.quicksort.by(function(d){return d[sortDimension];})(filtered, 0, filtered.length);
}

function buildList(data, containerSelector, templateSelector){
    var container = d3.select(containerSelector);
    var template = d3.select(templateSelector).text();
    var entries = container.selectAll("div.entry")
        .data(data);
    entries.enter().append("div")
        .attr("class", "entry");
    entries.html(function(d, i){
        return template.replace(/{([^}]*)}/g, function(s, key){return d[key];});
    });
    entries.exit().remove();
}

function processLocationHash(){
    if(window.location.hash) {
        var hash = window.location.hash.substring(1);
        hashSplit = hash.split('=');
        if(hashSplit[1] == 'untagged') hashSplit[1] = ''; //TODO
        if(hashSplit[1] == 'all') buildList(dataTransformMenu2(hashSplit[0]), '.menu2-container', "#template-menu2");
        buildList(dataTransformMenu3(hashSplit[0], hashSplit[1]), '.menu3-container', '#template-menu3');
    }
}

d3.select(window).on('hashchange', function () {
    processLocationHash();
});

</script>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title></title>
	<meta charset=utf-8>
	<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="https://raw.github.com/square/crossfilter/master/crossfilter.min.js"></script>
	<style>
	.menu1-container, .menu2-container, .menu3-container{
	position: relative;
	float: left;
	width: 300px;
	border: 1px #eee solid;
	padding: 20px;
	}
	.menu3-container{
	width: 800px;
	}
	</style>
	</head>
	<body>

	<script id="template-menu1" type="text/template">
	<a class="link" href="#{dimension}=all">{dimension}</a>
	</script>

	<script id="template-menu2" type="text/template">
	<a class="link" href="#{dimension}={key}">{key}</a> -- {value}
	</script>

	<script id="template-menu3" type="text/template">
	<a class="link" href="{url}">{title}</a> -- {author}
	</script>

	<div class="gallery">
	<div class="menu1-container"></div>
	<div class="menu2-container"></div>
	<div class="menu3-container"></div>
	</div>

	<script type="text/javascript">

	var galleryCrossfilter = crossfilter();
	var dimensions = {};

	d3.csv('https://docs.google.com/spreadsheet/pub?key=0AqMEGBUNwXeHdHpQNlVuY29SUE5BSXVtS3JueGlNYVE&single=true&gid=0&output=csv', function(error, json){
	galleryCrossfilter.add(json);
	d3.keys(json[0]).forEach(function(d, i){
	dimensions[d] = galleryCrossfilter.dimension(function(d2){return d2[d];});
	});
	buildList(dataTransformMenu1(d3.keys(json[0])), '.menu1-container', '#template-menu1');
	buildList(dataTransformMenu2('documentType'), '.menu2-container', '#template-menu2');
	buildList(dataTransformMenu3('title', 'all'), '.menu3-container', '#template-menu3');
	processLocationHash();
	});

	function dataTransformMenu1(data){
	return data.map(function(d, i){return {dimension: d};});
	}

	function dataTransformMenu2(dimension){
	return d3.values(dimensions[dimension].group().all()).map(function(d, i){
	if(d.key == '') d.key = 'untagged';
	d.dimension = dimension; return d;
	});
	}

	function dataTransformMenu3(dimension, value){
	var sortDimension = 'title';
	if(value == 'all') value = null;
	var filtered = dimensions[dimension].filter(value).top(Infinity);
	dimensions[dimension].filter(null);
	return crossfilter.quicksort.by(function(d){return d[sortDimension];})(filtered, 0, filtered.length);
	}

	function buildList(data, containerSelector, templateSelector){
	var container = d3.select(containerSelector);
	var template = d3.select(templateSelector).text();
	var entries = container.selectAll("div.entry")
	.data(data);
	entries.enter().append("div")
	.attr("class", "entry");
	entries.html(function(d, i){
	return template.replace(/{([^}]*)}/g, function(s, key){return d[key];});
	});
	entries.exit().remove();
	}

	function processLocationHash(){
	if(window.location.hash) {
	var hash = window.location.hash.substring(1);
	hashSplit = hash.split('=');
	if(hashSplit[1] == 'untagged') hashSplit[1] = ''; //TODO
	if(hashSplit[1] == 'all') buildList(dataTransformMenu2(hashSplit[0]), '.menu2-container', "#template-menu2");
	buildList(dataTransformMenu3(hashSplit[0], hashSplit[1]), '.menu3-container', '#template-menu3');
	}
	}

	d3.select(window).on('hashchange', function () {
	processLocationHash();
	});

	</script>

	</body>
	</html>