user list

_.md

[ Launch: user page ] 6616371 by georules
[ Launch: user page vanity edition ] 6094415 by enjalot
[ Launch: user page ] 5860371 by gelicia
[ Launch: testing params ] 5088240 by enjalot
[ Launch: testing params ] 5088156 by enjalot

config.json

{"description":"user list","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"style.css":{"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,"thumbnail":"http://i.imgur.com/pahyNyq.png"}

inlet.js

var urlBase = "http://tributary.io"
var url = urlBase + "/api/users/inlets/200/-1"

var link = urlBase + "/s/6094415?user="

var dateFormat = d3.time.format("%m.%d.%Y")
var display  = d3.select("#display")
display.style("background-color","#333333")

var stats = {}
var height=100

d3.json(url, function(err, people) {
  stats.nPeople = people.length
  people.forEach(function(p,i) {
    stats.max = Math.max(p.inlets, stats.max)
    stats.min = Math.min(p.inlets, stats.min)
  })
  people.forEach(function(p,i) {
    if (p.inlets > 0)
      render(p);
  })
});

var inletPics = function(d, username) {
  d.append("div").style("clear","both")
  var url = urlBase + "/api/user/" + username + "/latest/10/";
  d3.json(url, function(err,data) {
    count = 0
    data.forEach(function(inlet,i) {
      if ((inlet.thumbnail) && count < 3) {
        d.append("img").attr("src",inlet.thumbnail).attr("height",height+"px").attr("width",(100-1)+"px")
        count++;
      }
      
    })
  })
}

var render = function(p)	{
  var inlets = (p.inlets > 10) ? p.inlets : height
  inlets = (inlets > 100) ? 100 : inlets
  
  divs = 3
  d= display.append("div").classed("name",true)
  //.style('width',tributary.sw/divs-(divs*10)+"px")
  .style('width',300+"px")
  .style('height',height*2+2+'px')
  .append("a").attr("href",link+p.login).attr("target","blank")
  
  d.append("img").attr("src",p.avatar_url).attr("height",height+"px").style("float","left")
  
  fs = (p.login.length > 10) ? 22 : 30;
   
  d.append("p").style("margin-top","36px")
  .style('font-size',fs+'px')
  .text(p.login)
  
  if(p.inlets >2)
    inletPics(d,p.login)
}

style.css

#display {
  overflow: scroll;
  background-color: white;

}
.name {
  font-weight: 108;
  font-size: 30px;
  margin-left: 10px;
  border-radius:10px;
  float:left;
  border:1px solid black;
  margin-top:10px;
  padding:0;
  background-color:#cccccc;
}
p {
margin-right:10px;
  float:right;
}
img{
 border-radius:20px;
  margin:0;
  padding:0;
}