Tributary Inlet Leaderboard With more stats

_.md

[ Launch: Tributary Inlet Leaderboard With more stats ] 4569273 by enjalot
[ Launch: Tributary Inlet Leaderboard With more stats ] 4563152 by enoex
[ Launch: Tributary Inlet Leaderboard (With # of tribs) ] 4563125 by enoex
[ Launch: Tributary Inlet Leaderboard ] 4563077 by enoex
[ Launch: Tributary Inlets ] 4562256 by poezn
[ Launch: Tributary Inlets ] 4561783 by enjalot
[ Launch: Tributary Inlets ] 4561743 by enjalot
[ Launch: Tributary Inlets ] 4549657 by enjalot
[ Launch: An inlet to Tributary ] 4545400 by enjalot

config.json

{"description":"Tributary Inlet Leaderboard With more stats","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.41525243309002435,"hidepanel":false,"fullscreen":false,"ajax-caching":true}

inlet.js

var display = d3.select("#display")
.style("overflow", "scroll");

var users_url = 'http://tributary.io/api/users';

//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;
    })
    render();
  })
}
if(!tributary.users) {
 getUsers();
}


display.append("input")
.attr({
  id: "fetch",
  type: "button",
  value: "fetch"
})
.on("click", function() {
getUsers()
})

var sorter = display.append("div")
.attr({
  id: "sort"
})


//var sortBy = "inlets";
var sortBy = "visits";
//var sortBy = "nforks";


var sorts = ["inlets", "visits", "nforks"];
var sortrdio = sorter.selectAll("input")
.data(sorts)
.enter().append("div")
sortrdio.append("span")
.text(function(d) { return d + " " })
sortrdio
.append("input")
.attr({
  type: "radio",
  name: "sort",
  value: function(d) { return d },
  
  checked: function(d) { return (d === sortBy ? true : null) }
})
.on("change", function() {
  sortrdio.selectAll("input").each(function(sorter) {
    if(this.checked) {
      sortBy = sorter;
      render();
    }
  })
})

sortrdio.append("br")




function render() {
  if(!tributary.userList) return;

  tributary.userList.sort(function(a,b) {
    return (a[sortBy] || 0) < (b[sortBy] || 0) ? 1 : -1
  })
  
  var inletsSel = display.selectAll("div.inlet")
    .data(tributary.userList, function(d) { return d.id });

  inletsSel.exit().remove()
  
  var inlets = inletsSel
    .enter()
    .append("div")
    .classed("inlet", true)

  
  inlets
    .append("div")
    .classed('rank', true)
  
  inletsSel.select("div.rank")
    .text(function(d, i) { 
      return i + 1 + "." })
    .style({
      "font-weight": function(d, i) {
        return i < 3 ? "bold" : "normal";
      }
    });

  
  inlets.append("img")
  inletsSel.select("img")
    .attr({
      src: function(d) { 
        return d.avatar_url;
      },
      width: function(d, i) {
        return i < 3 ? 50 : 25;
      },
      height: function(d, i) {
        return i < 3 ? 50 : 25;
      }
    });

  inlets
  .append("div")
  	.classed('userName', true)
    .classed('user', true)
  var userdiv = inlets.select("div.user")
  userdiv
  .append("a")
  .attr({
    href:function(d) { return "http://tributary.io/inlet/5088240?user="+ d.login },
    target: "_blank"
  })
    .text(function(d) { 
      var visits = d.visits || 0;
      var inlets = d.inlets || 0;
      var nforks = d.nforks || 0;
      return d.login + ": " + inlets + " inlets | " + visits + " visits | " + nforks + " forked inlets"
    });
 
   
       
  
};
render();

style.css

#fetch {
  position:relative;
  margin-top: 20px;
  right: 40px;
  font-size:29px;
  float:right;
}

#sort {
  position:relative;
  top: 60px;
  float: right;
 
  width: 100px;
  height: 100px;
  text-align: right; 
}

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

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

.inlet .user, .inlet .rank {
  display: inline;
}
    
.inlet .rank {
  margin-right: 10px;
  font-size: 20px;
}