Pimp my Tribe

_.md

[ 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

config.json

{"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}

inlet.js

/*		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();
  })
}

style.css

/*
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;
}
*/