nsonnad/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>
    body {
        font-size: 100%;
        font-family: 'Monda', sans-serif;
    }
    #nav {
        background-color: rgba(250,250,250,0.7);
        position: fixed;
        top: 0;
        right: 0;
        width: 20%;
        /*padding: 12px; */
        max-height: 100%;
        overflow-y: auto;
        border-left: 1px solid #CCC;
    }
    #nav li {
        margin-top: 4px;
    }

    .menu1-container {
        height: 180px;

        z-index: 9;
        width: 100%;
        padding: 4px 12px;
        /*border-bottom: 2px solid #999;*/
        position: fixed;
        top: 0;
        background-color: rgba(250,250,250,0.92);
        overflow-y: auto;
        -webkit-box-shadow:0 3px 3px 0 rgba(0,0,0,0.1); /* Saf3.0+, Chrome */
           -moz-box-shadow:0 3px 3px 0 rgba(0,0,0,0.1); /* FF3.5+ */
                box-shadow:0 3px 3px 0 rgba(0,0,0,0.1); /* Opera 10.5, IE 9.0 */
    }
    .menu2-container {
        padding: 12px;
        margin-top: 190px;
        text-transform:capitalize;
    }
    #list {
        width: 80%;
    }
    #list li {
        cursor: default;
        border-radius: 2px;
        margin-top: 2.5%;
        display: inline-block;
        margin-right: 1.6em;
        border-left: 6px solid #CCC;
        padding: 2px 6px;

        -webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2); /* Saf3.0+, Chrome */
           -moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2); /* FF3.5+ */
                box-shadow:0 1px 1px 0 rgba(0,0,0,0.2); /* Opera 10.5, IE 9.0 */

        opacity: 0.5;

        -webkit-transition:opacity .24s ease-in .1s;
           -moz-transition:opacity .24s ease-in .1s;
             -o-transition:opacity .24s ease-in .1s;
                transition:opacity .24s ease-in .1s;
    }
    #list li:hover {
        opacity: 1;
    }
    li {
        list-style: none;
    }
    li a:link {
        text-decoration: none;
        font-weight: bold;
        color: black;
    }
    li a:visited {
        color: #999;
        opacity: 0.8;
    }
    li a:hover {
        text-decoration: underline;
    }
    .value {
        opacity: 0.2;
    }
    .thumbnail {
        height: 72px;
        width: auto;
        display: inline-block;
        vertical-align: middle;
        border: 1px solid white;
        border-radius: 2px;
    }
    </style>

    <link href='http://fonts.googleapis.com/css?family=Monda:400,700' rel='stylesheet' type='text/css'>
</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> <span class="value">{value}</span>
</script>

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

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

<script type="text/javascript">

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

var vizTypeScale = d3.scale.category20c()


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('visualizationType'), '.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 = '-';
        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("li.entry")
        .data(data);
    entries.enter().append("li")
        .attr("class", function(d,i){
            var type, entryClass
            entryClass = "entry"
            if(d.visualizationType != null && d.visualizationType != "") {
                entryClass += " type-"+d.visualizationType.replace(/\s/g, '')
            }
            return entryClass
        })
        .style("border-left-color", function(d,i) {
            if(d.visualizationType != null && d.visualizationType != "") {
                return vizTypeScale(d.visualizationType.replace(/\s/g, ''))
            }
        });
    entries.html(function(d, i){
        var html = template.replace(/{([^}]*)}/g, function(s, key){return d[key];});
        if(d.thumbnail != "" && d.thumbnail != null) {
            html += " <img src='"+d.thumbnail+"' class='thumbnail'/>"
        }
        return html;
    });
    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>
	body {
	font-size: 100%;
	font-family: 'Monda', sans-serif;
	}
	#nav {
	background-color: rgba(250,250,250,0.7);
	position: fixed;
	top: 0;
	right: 0;
	width: 20%;
	/padding: 12px; /
	max-height: 100%;
	overflow-y: auto;
	border-left: 1px solid #CCC;
	}
	#nav li {
	margin-top: 4px;
	}

	.menu1-container {
	height: 180px;

	z-index: 9;
	width: 100%;
	padding: 4px 12px;
	/border-bottom: 2px solid #999;/
	position: fixed;
	top: 0;
	background-color: rgba(250,250,250,0.92);
	overflow-y: auto;
	-webkit-box-shadow:0 3px 3px 0 rgba(0,0,0,0.1); /* Saf3.0+, Chrome */
	-moz-box-shadow:0 3px 3px 0 rgba(0,0,0,0.1); /* FF3.5+ */
	box-shadow:0 3px 3px 0 rgba(0,0,0,0.1); /* Opera 10.5, IE 9.0 */
	}
	.menu2-container {
	padding: 12px;
	margin-top: 190px;
	text-transform:capitalize;
	}
	#list {
	width: 80%;
	}
	#list li {
	cursor: default;
	border-radius: 2px;
	margin-top: 2.5%;
	display: inline-block;
	margin-right: 1.6em;
	border-left: 6px solid #CCC;
	padding: 2px 6px;

	-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2); /* Saf3.0+, Chrome */
	-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2); /* FF3.5+ */
	box-shadow:0 1px 1px 0 rgba(0,0,0,0.2); /* Opera 10.5, IE 9.0 */

	opacity: 0.5;

	-webkit-transition:opacity .24s ease-in .1s;
	-moz-transition:opacity .24s ease-in .1s;
	-o-transition:opacity .24s ease-in .1s;
	transition:opacity .24s ease-in .1s;
	}
	#list li:hover {
	opacity: 1;
	}
	li {
	list-style: none;
	}
	li a:link {
	text-decoration: none;
	font-weight: bold;
	color: black;
	}
	li a:visited {
	color: #999;
	opacity: 0.8;
	}
	li a:hover {
	text-decoration: underline;
	}
	.value {
	opacity: 0.2;
	}
	.thumbnail {
	height: 72px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
	border: 1px solid white;
	border-radius: 2px;
	}
	</style>

	<link href='http://fonts.googleapis.com/css?family=Monda:400,700' rel='stylesheet' type='text/css'>
	</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> <span class="value">{value}</span>
	</script>

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

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

	<script type="text/javascript">

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

	var vizTypeScale = d3.scale.category20c()


	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('visualizationType'), '.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 = '-';
	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("li.entry")
	.data(data);
	entries.enter().append("li")
	.attr("class", function(d,i){
	var type, entryClass
	entryClass = "entry"
	if(d.visualizationType != null && d.visualizationType != "") {
	entryClass += " type-"+d.visualizationType.replace(/\s/g, '')
	}
	return entryClass
	})
	.style("border-left-color", function(d,i) {
	if(d.visualizationType != null && d.visualizationType != "") {
	return vizTypeScale(d.visualizationType.replace(/\s/g, ''))
	}
	});
	entries.html(function(d, i){
	var html = template.replace(/{([^}]*)}/g, function(s, key){return d[key];});
	if(d.thumbnail != "" && d.thumbnail != null) {
	html += " <img src='"+d.thumbnail+"' class='thumbnail'/>"
	}
	return html;
	});
	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>