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/square/crossfilter/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>

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){

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>

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

Updated missing url https://raw.github.com/square/crossfilter/master/crossfilter.min.js to https://cdn.jsdelivr.net/gh/square/crossfilter/crossfilter.min.js

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

https://raw.github.com/square/crossfilter/master/crossfilter.min.js