index.html
<!doctype html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<script type="text/javascript" src="//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%;
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;
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);
-moz-box-shadow:0 3px 3px 0 rgba(0,0,0,0.1);
box-shadow:0 3px 3px 0 rgba(0,0,0,0.1);
}
.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);
-moz-box-shadow:0 1px 1px 0 rgba(0,0,0,0.2);
box-shadow:0 1px 1px 0 rgba(0,0,0,0.2);
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='//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] = '';
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>