D3 Examples - d3 examples

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
    <title></title>
    <meta charset=utf-8>
    <!--<script type="text/javascript" src="../lib/d3.v3.js"></script>-->
    <!--<script type="text/javascript" src="../lib/crossfilter_custom_filter.js"></script><!doctype html>-->
    <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>
​
    <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: 22%;
            max-height: 100%;
            overflow-y: auto;
            border-left: 1px solid #CCC;
        }
        #nav li {
            margin-top: 4px;
        }
        .menu1-container {
            height: 150px;
            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: 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>
​
    <link href='https://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} <br />
</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();
    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 dataTransformMenu1(){
        var excludedEntries = ['title', 'thumbnail', 'authorTwitter', 'url'];
        var filteredAndPrepared = d3.keys(dimensions).filter(function(d, i){return excludedEntries.indexOf(d) == -1;})
                .map(function(d, i){return {dimension: d}});
        return filteredAndPrepared;
    }
​
    function dataTransformMenu2(dimension){
        var splitted = d3.merge(json.map(function(d, i){return d[dimension].split('; ');}));
        var unemptied = splitted.map(function(d, i){return (d == '') ? 'untagged' : d;});
        var grouped = groupCount(unemptied);
        var prepared = d3.entries(grouped).map(function(d, i){
                d.dimension = dimension;
                return d;
            });
        var sorted = prepared.sort(function(a, b){return b.value - a.value});
        return sorted;
    }
​
    function groupCount(arr) {
        var uniques = {}, val;
        var dups = {};
        for (var i = 0, len = arr.length; i < len; i++) {
            val = arr[i];
            if (val in uniques) {
                uniques[val]++;
                dups[val] = uniques[val];
            } else uniques[val] = 1;
        }
        return(dups);
    }
​
    function dataTransformMenu3(dimension, value){
        var filtered = dimensions[dimension].filter(function(d) {
                if (value == 'all') return true;
                if(d.indexOf(value) >= 0) return true;
                return false;
            }).top(Infinity);
        dimensions[dimension].filter(null);
        var sortDimension = 'title';
        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] == '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>
​
    