d3 examples

<!doctype html>
<html>
<head>
    <title></title>
    <meta charset=utf-8>
    
    
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/jasondavies/crossfilter/filter-custom/crossfilter.min.js"></script>

text-transform: capitalize;
        }
        .menu2-container {
            padding: 12px;
            margin-top: 160px;
            text-transform:capitalize;
        }
        #list {
            width: 80%;
        }
        #list li {
            cursor: default;
            border-radius: 2px;
            margin-top: 2.5%;
            display: inline-block;
            /*vertical-align: middle; */
            margin-right: 1.6em;
            border-left: 6px solid #CCC;
            /*border-bottom: 2px solid transparent;
            border-top: 2px solid transparent;
            */
            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 {
            /*border-bottom: 2px solid #4c4c4c;*/
            -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: 148px;
            width: auto;
            display: block;
            /*vertical-align: middle; */
            margin-left: auto; margin-right: auto;
            border: 1px solid white;
            border-radius: 2px;
        }
    </style>

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

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

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

});

}

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

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

</script>

</body>
</html>

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

Updated missing url https://raw.github.com/jasondavies/crossfilter/filter-custom/crossfilter.min.js to https://cdn.jsdelivr.net/gh/jasondavies/crossfilter/filter-custom/crossfilter.min.js

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

https://raw.github.com/jasondavies/crossfilter/filter-custom/crossfilter.min.js