Skip to content

Instantly share code, notes, and snippets.

@biovisualize

biovisualize/index.html

Last active December 11, 2015 03:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save biovisualize/4541355 to your computer and use it in GitHub Desktop.
Save biovisualize/4541355 to your computer and use it in GitHub Desktop.
Download ZIP
New Gallery for D3.js
Raw
index.html
<!doctype html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<script type="text/javascript" src="http://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('http://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>
<link href='http://fonts.googleapis.com/css?family=Monda:400,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="gallery">
<div id="nav">
<div class="menu1-container"></div>
<div class="menu2-container">
<input type="text" class="menu2-search" />
</div>
</div>
<div id="list">
<div class="menu3-container"></div>
</div>
</div>
<script type="text/javascript">
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>';}
};
var data3 = {
href: function(d, i){return d.url;},
html: function(d, i){
var content = d.title;
if(d.author) content += '-'+ d.author;
if(d.thumbnail) content += "<br /> <img src='"+d.thumbnail+"' class='thumbnail'/><br />";
return content;}
};
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 dataTransformMenu1(){
//TODO: change in spreadsheet
var dimensionsMap = {author: 'Author', documentType: 'Format', sourceName:
'Source', visualizationType: 'Visualization', technology: 'Tag', title: 'Title', url: 'URL'};
return d3.keys(dimensionsMap).map(function(d, i){return {dimension: d, displayName: dimensionsMap[d]};});
}
function dataTransformMenu2(dimension, filter){
var splitted = d3.merge(json.map(function(d, i){
return splitter(d[dimension]);
}));
var filtered = (filter) ? splitted.filter(function(d, i){ return d.toLowerCase().indexOf(filter.toLowerCase()) != -1; }) : splitted;
var unemptied = filtered.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 splitter(data){
return (data.indexOf(splitChar) !== -1) ? data.split(splitChar) : data;
}
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);
return(uniques);
}
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment