Skip to content

Instantly share code, notes, and snippets.

@zeffii
Created January 19, 2013 15:08
Show Gist options
  • Save zeffii/4573091 to your computer and use it in GitHub Desktop.
Save zeffii/4573091 to your computer and use it in GitHub Desktop.
Pimp my Tribe

[ Launch: Pimp my Tribe ] 4573091 by zeffii
[ Launch: Pimp my Tribe ] 4572416 by zeffii
[ Launch: Pimp my Tribe ] 4571945 by zeffii
[ Launch: Pimp my Tribe ] 4568998 by enjalot
[ Launch: Pimp my Tribe ] 4567995 by zeffii
[ Launch: Pimp my Tribe ] 4564213 by zeffii
[ Launch: Pimp my Tribe ] 4558845 by enjalot
[ Launch: Pimp my Tribe ] 4558042 by zeffii
[ Launch: Tributary Inlets ] 4552099 by zeffii
[ Launch: Tributary Inlets ] 4551425 by zeffii
[ Launch: Tributary Inlets ] 4549657 by enjalot
[ Launch: An inlet to Tributary ] 4545400 by enjalot

{"description":"Pimp my Tribe","endpoint":"","display":"html","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.6217642171346192,"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}
/* NOTES
In firefox text attribute "alignment-baseline" will fail.
Instead, to get this to look similar on a variety of
browsers i'd consider making y depend on text height of
(boxWidth / 2) + (lowercase n height / 2). Right now
this is a hardcoded value.
*/
/* HELPER FUNCTIONS + CONSTANTS */
function translate(value_x, value_y){
return "translate(" + [value_x, value_y] + ")"
}
function rotate(amount){
return "rotate(" + amount + ")"
}
var users_url = '/api/users';
var created_url = '/api/latest/created';
var iso = d3.time.format.utc("%Y-%m-%dT%H:%M:%S.%LZ").parse;
/* AXIS SETUP */
var margin = {top: 19, right: 30, bottom: 2, left: 45},
width = 712 - margin.left - margin.right,
height = 527 - margin.top - margin.bottom;
var boxWidth = 12;
var x = d3.time.scale()
.range([0, width]);
var yScale = d3.scale.ordinal()
.rangeBands([0, height], -0.0612)
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
/* SVG SETUP */
var display = d3.select("#display")
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"
})
//initialize chart containers
var userBars = svg.append("g")
.classed("userBars", true)
.attr("transform", translate(0, margin.top))
svg.append("g")
.classed("usernames", true)
.attr("transform", translate(width, margin.top))
var box = svg.append("g")
.classed("funky", true)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("transform", translate(margin.left, margin.top));
box.append("g").attr({
"class": "x axis",
"transform": translate(0, height)
})
// theme
var marker_style = {
"fill": "#49BDFF",
"fill-opacity": 0.1,
"stroke": "none"
}
var bar_style = {
"fill": "#FFFFFF",
"fill-opacity": 0.60227
}
var text_style = {
"font-size": 1.3 + "em",
"font-family": 'Roboto', // sans-serif',
"font-weight": 300
}
//font
WebFontConfig = {
google: { families: [ 'Roboto:400,100: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);
})();
/* GET USERS */
if(!tributary.users) {
d3.json(users_url, function(err, res) {
tributary.users = {};
res.forEach(function(u) {
tributary.users[u.login] = u;
})
render();
})
}
button.on("click", function() {
d3.json(created_url, function(err, res) {
tributary.inlets = res;
render();
})
})
function make_user_obj(){
var inlets = tributary.inlets
var user_list = tributary.users;
var user_strata = new Object();
// convert the userlist to a strata index
var counter = 0;
function populateStrata(name){
user_strata[name] = counter
counter += 1
}
user_list = d3.keys(user_list);
user_list.forEach(populateStrata);
return {
user_list: user_list,
user_strata: user_strata
}
}
function render() {
if(!tributary.inlets) return;
var user_object = make_user_obj();
// remap to iso time stamps. and cherrypick
var data = _.map(tributary.inlets, function(d){
return {
createdAt: iso(d.createdAt),
t_user: d.user.login,
description: d.description
}
});
x.domain(d3.extent(data, function(d) { return d.createdAt } ));
yScale.domain(user_object.user_list)
svg.select("g.x.axis")
.call(xAxis)
.style(text_style)
var ubSel = userBars
.selectAll("rect.userbar")
.data(user_object.user_list)
ubSel
.enter()
.append("rect")
.classed("userbar", true)
ubSel
.attr({
"y": function(d) { return yScale(d) - boxWidth/2 - 1 },
"x": margin.left,
"width": width + margin.left + margin.right + 100,
"height": boxWidth + 2
})
.style(bar_style)
var markers = svg.select("g.funky")
.selectAll("rect")
.data(data);
markers
.enter()
.append("rect")
markers
.attr({
"transform": function(d, i) {
var y_loc = yScale(d.t_user) - boxWidth/2;
return translate(x(d.createdAt), y_loc)
},
"width": boxWidth,
"height": boxWidth
})
.style(marker_style)
console.log(tributary.users)
var userNames = svg.select("g.usernames")
.selectAll("g.username")
.data(user_object.user_list);
userNames
.enter()
.append("g")
.classed("username", true)
.append("a")
.attr({
"xlink:href": function(d){
return tributary.users[d].html_url},
"xlink:show": "new",
"cursor": "pointer"
})
.append("text")
userNames.select("text")
.text(function(d) { return d })
.attr({
"y": function(d) { return yScale(d) + 3.864 },
"x": margin.left + margin.right
})
.style(text_style)
};
render();
if(!tributary.inlets || !tributary.inlets.length) {
d3.json(created_url, function(err, res) {
tributary.inlets = 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; width: 30px}
.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: 20px;
right: 40px;
font-size:1.7em;
padding: 3px 10px 3px 10px;
float:right;
}
.inlet {
margin-left: 10px;
margin-top: 20px;
}
.inlet img {
margin-left: 10px;
//margin-top: 5px;
}
.time {
font-size: 0.8em;
margin-left: 10px;
}
body {
font: 9px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #919191;
shape-rendering: crispEdges;
}
/*
.x.axis path {
display: none;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment