D3 JSON from tributary API

_.md

[ Launch: Tributary inlet ] 7067305 by colster

config.json

{"description":"D3 JSON from tributary API","endpoint":"","display":"div","public":true,"require":[{"name":"d3","url":"http://d3js.org/d3.v3.min.js"}],"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":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/NEX8NoZ.png","inline-console":false}

inlet.js

/* http://www.youtube.com/watch?v=h60j8k3SOrA&list=PLI_sHchSmdCBa3CrSwobdZWU-tV_ZeaCO&index=1&noredirect=1 */


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

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

var display = d3.select("#display");

function render() {
  //console.log(users);
  //display.append("span").text("Hello world");
  var userList = display.append("ul");
  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: 20px;
  	width: 200px;
  	text-align: right;
  
}

img {
	padding-left:3px;
}