New Gallery for D3.js

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset=utf-8>
    <script type="text/javascript" src="https://d3js.org/d3.v3.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: 210px;
            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);  //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
            text-transform: capitalize;
        }
        .menu2-container {
            padding: 12px;
            margin-top: 210px;
            text-transform:capitalize;
        }
        .menu2-search{
            background: url('https://icons.iconarchive.com/icons/gakuseisean/radium-neue/128/Search-icon.png') no-repeat scroll left;
            background-size: 15px 15px;
            padding-left:20px;
        }
        #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 0 10px 0 rgba(0,0,0,0.2); /* Saf3.0+, Chrome */
            -moz-box-shadow:0 0 10px 0 rgba(0,0,0,0.2); /* FF3.5+ */
            box-shadow:0 0 10px 0 rgba(0,0,0,0.1); /* Opera 10.5, IE 9.0 */
            -webkit-transition:all .28s ease-out;
        }
        #list li:hover {
            -webkit-box-shadow:0 0 6px 0 rgba(0,0,0,0.45); /* Saf3.0+, Chrome */
            -moz-box-shadow:0 0 6px 0 rgba(0,0,0,0.45); /* FF3.5+ */
            box-shadow:0 0 6px 0 rgba(0,0,0,0.45); /* Opera 10.5, IE 9.0 */
        }
        li {
            list-style: none;
        }
        li a:link {
            text-decoration: none;
            font-weight: bold;
            color: black;
        }
        li a:visited {
            color: black;
        }
        .menu3-container li a:visited {
            color: #888;
        }
        li a:hover {
            text-decoration: underline;
        }
        .value {
            opacity: 0.2;
        }
        .thumbnail {
            height: 200px;
            width: auto;
            display: inline-block;
            vertical-align: middle;
            border: 1px solid white;
            border-radius: 2px;
        }
    </style>

var vizTypeScale = d3.scale.category20c();
    var splitChar = '; ';
    var json;

var data1 = {
        href: function(d, i){return '#'+ d.dimension+'=all';},
        html: function(d, i){ return d.displayName;}
    };

var data2 = {
        href: function(d, i){ return '#'+ d.dimension+'='+d.key; },
        html: function(d, i){ return d.key+'<span class="value">'+ d.value+'</span>';}
    };

d3.csv('https://docs.google.com/spreadsheet/pub?key=0AqMEGBUNwXeHdHpQNlVuY29SUE5BSXVtS3JueGlNYVE&single=true&gid=0&output=csv', function(error, _json){
        json = _json;
        buildList(dataTransformMenu1(), '.menu1-container', data1);
        buildList(dataTransformMenu2('visualizationType'), '.menu2-container', data2);
        buildList(dataTransformMenu3('title', 'all'), '.menu3-container', data3);
        processLocationHash();
    });

function splitter(data){
        return (data.indexOf(splitChar) !== -1) ? data.split(splitChar) : data;
    }

function dataTransformMenu3(dimension, value){
        return json.filter(function(d, i){
            var splitted = splitter(d[dimension]);
            if (value == 'all') return true;
            else if(value == 'untagged') return (splitted == '');
            else if(splitted.indexOf(value) >= 0) return true;
            else return false;
        });
    }

function buildList(data, containerSelector, content){
        var entries = d3.select(containerSelector)
            .selectAll("li.entry")
            .data(data);
        entries.enter().append("li")
            .attr('class', 'entry')
            .append('a');
        entries.each(function(d, i){
            d3.select(this)
                .select('a')
                .attr('href', content.href)
                .html(content.html)
        });
        entries.exit().remove();
    }

d3.select('.menu2-search')
        .on('change', function(d, i){ filterList(this.value); })
        .on('keyup', function(d, i){ filterList(this.value); });
    d3.select('body').on('mouseover', function(){
            if (d3.event.target.nodeName == 'A') d3.select('.menu2-search').node().blur();
        });

function filterList(value){
        var dimension = window.location.hash.substring(1).split('=')[0] || 'visualizationType';
        buildList(dataTransformMenu2(dimension, value), '.menu2-container', data2);
    }

function processLocationHash(){
        if(window.location.hash) {
            var hash = window.location.hash.substring(1);
            var hashSplit = hash.split('=');
            if(hashSplit[1] == 'all') buildList(dataTransformMenu2(hashSplit[0]), '.menu2-container', data2);
            buildList(dataTransformMenu3(hashSplit[0], hashSplit[1]), '.menu3-container', data3);
        }
    }

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

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js