Pimp my Tribe (update2)

_.md

[ Launch: Pimp my Tribe (update2) ] 4596906 by enjalot
[ Launch: Pimp my Tribe ] 4594558 by zeffii
[ Launch: Pimp my Tribe ] 4585252 by zeffii
[ 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 (update2)","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}},"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,"tab":"edit","display_percent":0.6597453544693251,"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.

- marker & usernames are links
- marker mouseover shows inlet title
- username mouseover shows user stats
*/


/*		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 trib_inlet = 'http://tributary.io/inlet/';

var iso = d3.time.format.utc("%Y-%m-%dT%H:%M:%S.%LZ").parse;


/*		AXIS SETUP		*/
var margin = {top: 76, right: 130, bottom: 2, left: 45},
    extent_width = tributary.sw,
    width = extent_width - margin.left - margin.right,
    height = 615 - margin.top - margin.bottom;

var boxWidth = 12,
    boxHeight = 12;
var x = d3.time.scale()
  .range([0, width]);

var yScale = d3.scale.ordinal()
  .rangeBands([0, height], 0)

var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom")
    .ticks(7)
    .tickSubdivide(1)
    .tickSize(11, 4, 5);


/*  	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)
})
/*
// example slider/pannel
svg.append("rect")
	.attr({
      "x": 144,
      "y": 9,
      "width": 200,
      "height": 50})
	.style({
      "fill": "#008ACA",
      "fill-opacity": .3
    })

// configure sliders
var bar_x = 42;
var time_window = svg.append("g")
	.classed("time_window", true)
	.append("line")
	.attr({
      "x1": margin.left,
      "y1": margin.top - bar_x,
      "x2": extent_width - margin.right,
      "y2": margin.top - bar_x
    })
	.style({
      "stroke-width": 3 + "px",
      "stroke": "#5F5C56"})
*/      
      
// theme
var marker_style = {
  "fill": "#49BDFF",
  "fill-opacity": 0.33,
  "stroke": "none"
}

var bar_style = {
  "fill": "#FFFFFF",
  "fill-opacity": 0.74681
}

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


/*	DATA PRUNING FUNCTIONS	*/
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 remove_empties(data){

  var data_reduced = [];
    data.forEach(function(item){
    	if (item.t_user){
       		data_reduced.push(item)
      	}
  	})  
	return data_reduced
}


function cherry_pick(){

  var data = _.map(tributary.inlets, function(d){

	// or populate an array duing this run.    
    if (iso(d.createdAt) > iso("2013-01-12T00:43:36.000Z")){
    //if(true){
      return { 
        createdAt: iso(d.createdAt),
        t_user: d.user.login,
        description: d.description,
        gist_id: d.gistid
      }
    }
    else return {}
  });

  return remove_empties(data)
  
}


function compose_stats(d){

  var stat = tributary.users[d];
  return "visits: " + (stat.visits || 0) +
         "  forks: " + (stat.nforks || 0) +
         "  inlets: " + (stat.inlets || 0)
         
} 


/*	MAIN DRAW FUNCTION	*/
function render() {
  
  if(!tributary.inlets) return;
  
  var user_object = make_user_obj();
  var data = cherry_pick();
  
  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) - boxHeight/2 - 1 },
      "x": margin.left - boxWidth/2,
      "width": width + margin.left + margin.right + 90,
      "height": boxHeight + 2
    })
    .style(bar_style)
   
  
  var markers = svg.select("g.funky") 
    .selectAll("a")
    .data(data);
  markers
    .enter()
  	  .append("a")
  		.attr({
          "xlink:href": function(d){ return trib_inlet + d.gist_id },
          "xlink:title": function(d){ return d.description },
          "xlink:show": "new",
          "cursor": "pointer"
  		})  		
      .append("rect")
  markers.select("rect")
  	.attr({
      "transform": function(d, i) { 
        var y_loc = yScale(d.t_user) - boxHeight/2;
      	return translate(x(d.createdAt)- boxWidth/2, y_loc) 
      },
      "width": boxWidth,
      "height": boxHeight
    })
  	.style(marker_style)
  

  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:title": function(d){ 
            return compose_stats(d)
          },
          "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 - 25
    })
    .style(text_style)
};

render();

if(!tributary.inlets || !tributary.inlets.length) {
   d3.json(created_url, function(err, res) {
    tributary.inlets = res;
    render();
  })
}

style.css

#fetch {
  position:relative;
  margin-top: 20px;
  left: 10px;
  font-size:1.7em;
  padding: 3px 10px 3px 10px;
  float:left;
}

.inlet {
  margin-left: 10px;
  margin-top: 20px;
}

.inlet img {
  margin-left: 10px;
  //margin-top: 5px;
}

.time {
  font-size: 0.8em;
  margin-left: 10px;
}

svg {
  font: 9px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #919191;
  shape-rendering: crispEdges;
}

#panel #file-list {overflow-x: hidden;}
/*
.x.axis path {
  display: none;
}
*/