Pimp my Tribe

_.md

[ 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.5708681350715693,"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

/*		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: 21, right: 30, bottom: 2, left: 45},
    width = 721 - margin.left - margin.right,
    height = 507 - margin.top - margin.bottom;

var boxWidth = 7;
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"
  })

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


//grab the 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 render() {
  
  if(!tributary.inlets) return;
  
  // convert the userlist to a strata index
  var counter = 0;
  function populateStrata(name){
  	user_strata[name] = counter
    counter += 1
  }
    
  var user_strata = new Object();
  var userlist = tributary.users;
  userlist = d3.keys(userlist)
  userlist.forEach(populateStrata);
  
  // remap to iso time stamps.
  var data = _.map(tributary.inlets, function(d){
    return { 
      createdAt: iso(d.createdAt),
      t_user: d.user.login
    }
  });
     
  x.domain(d3.extent(data, function(d) { return d.createdAt } ));
  yScale.domain(userlist)
    
  d3.select("g.funky")
  	.append("g")
  	.attr({
        "class": "x axis",
        "transform": translate(0, height)
    })
    .call(xAxis)
  
    var userBars = svg.append("g")
  .attr("transform", "translate(" + [0, margin.top] + ")")
  .selectAll("rect.userbar")
  .data(userlist)
  .enter()
  .append("rect")
  .classed("userbar", true)
  .attr({
    y: function(d) { return yScale(d) - boxWidth/2 - 1 },
    x: margin.left,
    width: width + margin.left + margin.right + 100,
    height: boxWidth + 2
  })
  .style({
    fill: "#AAC1C9",
    "fill-opacity": 0.26,
    stroke: "#6049DB",
    "stroke-width": 1,
    "stroke-opacity": 0.12
  })
  
  
  var markers = d3.select("g.funky") //.append("g").classed("vis", true);

  markers.selectAll("rect")
    .data(data)
  .enter()
    .append("rect")
  	.attr({
      "transform": function(d, i) { 
      	//console.log(d)
        //var y_loc = user_strata[d.t_user] * 23 - 131
        var y_loc = yScale(d.t_user) - boxWidth/2;
      	return translate(x(d.createdAt), y_loc) 
      },
      width: boxWidth/4,
      height: boxWidth
    })
    //.attr("d", d3.svg.symbol().type("square").size(74))
  	.style({
      "fill": "#0A8B15",
      "fill-opacity": 0.18624,
      "stroke": "#004E0D",
      "stroke-width": 0.958 + "px",
      "stroke-opacity": 0.75
      
    })
  
  var userNames = svg.append("g")
  .attr("transform", "translate(" + [width, margin.top] + ")")
  .selectAll("g.username")
  .data(userlist)
  .enter()
  .append("g")
  .classed("username", true)
  .append("text")
  .text(function(d) { return d })
  .attr({
    y: function(d) { return yScale(d) },
    x: margin.left + margin.right,
    "alignment-baseline": "middle",
    "font-size": 12
  })

};
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; }
.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:29px;
  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;
}

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

/*
.x.axis path {
  display: none;
}
*/