just mine p7

_.md

[ Launch: just mine p6 ] 6662444 by zeffii
[ Launch: just mine p5 ] 5502419 by zeffii
[ Launch: just mine p5 ] 4966869 by zeffii
[ Launch: just mine p3 ] 4960296 by zeffii
[ Launch: just mine p2 ] 4959904 by zeffii
[ Launch: just mine ] 4959669 by zeffii
[ Launch: crossfilter racetrack ] 4956157 by zeffii
[ Launch: crossfilter racetrack ] 4624910 by zeffii
[ Launch: Another Inlet ] 4618198 by enjalot

config.json

{"description":"just mine p7","endpoint":"","display":"svg","public":true,"require":[{"name":"crossfilter","url":"https://raw.github.com/square/crossfilter/master/crossfilter.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"cars.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"conf.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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.46399999999999975,"thumbnail":"http://i.imgur.com/W5TToEy.png"}

inlet.js

// maybe extend to user search box, 
tributary.trace = true;
d3.select("body").style("background-color", rgb(25,25,25))

var trib_url = 'http://tributary.io/',
    users_url = trib_url + 'api/users',
    trib_inlet = trib_url + 'inlet/';

var username = "zeffii",
    urlBase = "http://tributary.io",
    url = urlBase + "/api/user/" + username + "/latest/400";

var recoded;

// grab the users
function getUsers(){
  d3.json(users_url, function(err, res) {
    tributary.users = {};
    tributary.userList = res;
    res.forEach(function(u) { 
      tributary.users[u.login] = u;
    })
  })
}

if (!tributary.users){
    getUsers() 
}


var svg = d3.select("svg");
var user_inlets = svg.append("g").classed("inlets", true);

var button_col = '#66665A';

var buttons = svg.append("g").classed('button', true);
var b1 = buttons.append("rect").classed('up', true)
.attr({height: 40, width: 50, transform: 'translate(40,256)'})
.style({fill: button_col})

var b2 = buttons.append("rect").classed('down', true)
.attr({height: 40, width: 50, transform: 'translate(40,321)'})
.style({fill: button_col})


var rect_style = {
  "fill": "#8FD7FF", 
  "stroke": "#545C72", 
  "stroke-width": 1.37088 + "px"
};

var text_style1 = {
  "fill": "#D8D8D8", 
  "font-size": 0.61753 +"em", 
  "font-face": "sans-serif"
};

var y_pos = -16;
var x_pos = 180;

function draw_content() {
   
  // filter inlets by username
  var username = 'zeffii';
  var single_user_inlets = _.filter(tributary.inlets, function(d){  
    var descr = d.description;
    if (!(descr[0] === "#") && d.thumbnail) return d
  });
    
  var sg = user_inlets.append("g")
    .classed("solo_group", true)
    .attr("transform", translate(x_pos, y_pos))  
  
  var groups = sg.selectAll("g")
    .data(single_user_inlets);
  
  //groups.exit().remove();
    
  var bp = groups.enter()
    .append("g")
    .classed("inlet_", true)
      .attr({
        "transform": function(d, i){ return translate(0, 58+i*19) }
      })
  
  // for each inlet group make a xlink:href
  .append("a")
      .attr({
        "xlink:href": function(d){ return trib_inlet + d.gistid },
        "xlink:show": "new",
        "cursor": "pointer"
      })
  
  // for each inlet group make a rect
  bp.append("rect")
    .style(rect_style)
    .attr({
        "height": 20,
        "width": 20,
        "id": function(d){ return d.gistid }
    })
  
  // attach mouse behaviour
  .each(function(d){
    var obj = d3.select(this);
    
    obj.on("mouseover", function(d){
      obj.style("fill", "#33A9CE")
        obj.style("stroke-width", 0.8 + "px")
    })
    obj.on("mouseout", function(d){
      obj.transition().duration(200).style(rect_style)
    })
  })
  
  // for each inlet group make a text label
  bp.append("text")
    .text(function(d){ return d.description.replace(/_/g, " ") })
    .classed("inlet_label", true)
      .style(text_style1)
      .attr({"x": 28, "y": 16})
  
  // for each inlet group display the time since.
  bp.append("text")
    .text(function(d){ 
      return d.visits
    })
    .classed("inlet_time", true)
      .style(text_style1  )
      .attr({"x": -13, "y": 16, "text-anchor": "end"})
 
  
  //solo_group.exit().remove()
}

if (!tributary.inlets){
  d3.json(url, function(err, res) {
    tributary.inlets = res;
    draw_content()
  })
} else {
  draw_content()
}



// ----------- helper functions ----------------

function translate(value_x, value_y){
  return "translate(" + [value_x, value_y] + ")"
}

function rgb(r, g ,b) { 
    return "rgb(" + [r,g,b] + ")" 
}


// -------------- buttons bandaid
var jump_dist = 400;

function mover(direction){
  y_pos -= jump_dist*direction
  var inlets = d3.select('.solo_group')
  .transition()
  .duration(900)
  .attr({transform: translate(x_pos, y_pos)})  
}


b2.on('click', function(){
  mover(-1)
})
    
b1.on('click', function(){
  mover(1)
})
    
















// EOF

style.css

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-lesser-dark div.CodeMirror-selected {
  background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark span.cm-variable { color:#22EFFF; }
.cm-s-lesser-dark span.cm-variable-2 { color: #FFCCB4; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-string { color: Chartreuse; }
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse;}
.cm-s-lesser-dark span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark pre { color:#FFF; }
.cm-s-lesser-dark span.cm-comment { color: #AFB4B4;}
.cm-s-lesser-dark span.cm-property {color: #FDA676;}
.cm-s-lesser-dark span.cm-number { color: #FF92EE;}
.cm-s-lesser-dark span.cm-keyword { color: #FFFF18; }
.cm-s-lesser-dark .CodeMirror-cursor { 
  border-left: 1px solid white !important; }

.background{
  visibility: visible !important;
  fill: #FFFFFF;
}
 
.extent { 
  visibility: visible !important;
  fill: #84D8F8;
}
 
.resize rect {
  visibility: visible !important;
  fill: #888888;
}