Skip to content

Instantly share code, notes, and snippets.

@zeffii
Created January 16, 2013 18:34
Show Gist options
  • Save zeffii/4549563 to your computer and use it in GitHub Desktop.
Save zeffii/4549563 to your computer and use it in GitHub Desktop.
An inlet to Tributary
{"description":"An inlet to Tributary","endpoint":"","display":"html","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":11},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.476128874128599,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}
var display = d3.select("#display")
.style("overflow", "scroll");
var button = display.append("input")
.attr({
id: "fetch",
type: "button",
value: "fetch"
})
var svg = display.append("svg")
.attr({
"xmlns": "http://www.w3.org/2000/svg",
"xlink": "http://www.w3.org/1999/xlink",
"class": "tributary_svg"
})
var url = '/api/users';
button
.on("click", function() {
d3.json(url, function(err, res) {
tributary.data = res;
render();
})
})
function translate(pos){
return "translate(" + [pos.x, pos.y] + ")"
}
function translate_i(i){
var offset_top = 2;
return translate({x: 32, y: offset_top + 82*i})
}
function render() {
if(!tributary.data) return;
console.log(tributary.data)
svg.selectAll("g")
.data(tributary.data)
.enter()
.append("g")
.attr({
"id": "users",
"class": function(d){ return d.login },
"transform": function(d,i){ return translate_i(i)}
})
var backing = svg.selectAll("g#users")
.append("rect")
.attr({
"x": -9 + "px",
"y": 0 + "px",
"width": 331 + "px",
"height": 75 + "px"
})
.style({
//"fill-opacity": 0.5,
"stroke-width": 1 + "px",
"stroke": "#DADADA",
"fill": "#F7F7F7"
})
var images = svg.selectAll("g#users")
.append("a")
.attr({
"xlink:href": function(d){ return d.html_url },
"xlink:show": "new", // open in new tab
"cursor": "pointer"})
.append("image")
.attr({
"width": 58 + "px",
"height": 75 + "px", // will use the smallest of the two.
"xlink:href": function(d){ return d.avatar_url }
})
var logins = svg.selectAll("g#users")
.append("text")
.attr({x: 66, y:17,
"font-size": 0.9 +"em",
"font-weight": "bold"})
.text(function(d){ return d.login })
.append("tspan")
.attr("font-weight", "normal")
.text(function(d){ return " aka " + d.name })
};
// font loading
WebFontConfig = {
google: { families: [ 'Source+Sans+Pro:300:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
render();
if(!tributary.data || !tributary.data.length) {
d3.json(url, function(err, res) {
tributary.data = res;
render();
})
}
/*
http://lesscss.org/ Pragmatic Theme by Dealga McArdle
After original "Dark Theme" ported to CodeMirror by Peter Kroon
*/
.cm-s-lesser-dark {
font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important;
line-height: 1.26em;
}
.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #EEEEEE; }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-lesser-dark pre { padding: 0 8px; line-height: 1.3em; }/*editable code holder*/
div.CodeMirror span.CodeMirror-matchingbracket { color: #7EFC7E; }/*65FC65*/
.cm-s-lesser-dark .CodeMirror-gutters { background: #262626; border-right:1px solid #aaa; }
.cm-s-lesser-dark .CodeMirror-linenumber { color: #777; }
.cm-s-lesser-dark span.cm-keyword { color: DeepSkyBLue; }
.cm-s-lesser-dark span.cm-atom { color: #8CEEF7; font-weight: bold}
.cm-s-lesser-dark span.cm-number { color: Chartreuse; background: #000000;}
.cm-s-lesser-dark span.cm-def {color: #C4D8E6;}
.cm-s-lesser-dark span.cm-variable { color:#AAA; }
.cm-s-lesser-dark span.cm-variable-2 { color: #9DCFD8; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-property {color: #FFB78F;}
.cm-s-lesser-dark span.cm-operator {color: #92A75C;}
.cm-s-lesser-dark span.cm-comment { color: #b2b2b2; background: #000000;}
.cm-s-lesser-dark span.cm-string { color: Chartreuse; background: #424242;}
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse; background: #7E7E7E;}
.cm-s-lesser-dark span.cm-meta { color: #738C73; }
.cm-s-lesser-dark span.cm-error { color: #9d1e15; }
.cm-s-lesser-dark span.cm-qualifier {color: #000555; }
.cm-s-lesser-dark span.cm-builtin { color: #ff9e59; }
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark span.cm-tag { color: #669199; }
.cm-s-lesser-dark span.cm-attribute {color: #00c;}
.cm-s-lesser-dark span.cm-header {color: #a0a;}
.cm-s-lesser-dark span.cm-quote {color: #090;}
.cm-s-lesser-dark span.cm-hr {color: #999;}
.cm-s-lesser-dark span.cm-link {color: #00c;}
#fetch {
position:relative;
margin-top: 10px;
right: 20px;
font-size:29px;
float:right;
}
.user {
float:left;
margin-left: 10px;
margin-top: 20px;
height: 120px;
}
g#users {
font-family: 'Source Sans Pro', sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment