Tributary inlet

_.md

[ Launch: Tributary inlet ] 4646056 by enjalot

config.json

{"description":"Tributary inlet","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"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,"fullscreen":false,"thumbnail":"http://i.imgur.com/12baxoL.png"}

inlet.js

var url = "http://tributary.io/api/users/visits/5/-1";

var users;
d3.json(url, function(error, response) {
  console.log(response);
  users = response;
  render();
})


var display = d3.select("#display");
var userList = display.append("ul")
function render() {
  var usersSel = userList.selectAll("li.user")
    .data(users);
  
  var userEnter = usersSel.enter()
  .append("li")
  .classed("user", true);

  userEnter.append("span")  
  userEnter.append("img")

  
  usersSel.select("img").attr({
    src: function(d) { return d.avatar_url },
    width: 16 + "px",
    height: 16 + "px"
  })
  
  usersSel.select("span")
  .text(function(d) { return d.login })
  
}

style.css

#display ul {
  margin-top: 33px;
  width: 200px;
}

.user {
  text-align: right;
}