An inlet to Tributary

_.md

[ Launch: An inlet to Tributary ] 4550129 by georules
[ Launch: An inlet to Tributary ] 4548638 by zeffii
[ Launch: An inlet to Tributary ] 4547472 by zeffii
[ Launch: An inlet to Tributary ] 4545400 by enjalot

config.json

{"description":"An inlet to Tributary","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},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.5483865958915067,"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,"hidepanel":false}

inlet.js

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

var button = display.append("input")
  .attr({
    id: "fetch",
    type: "button",
    value: "fetch"
  })

var svg = display.append("svg")
  .attr({
    "xmlns": "http://www.w3.org/2000/svg",
    "xlink": "http://www.w3.org/1999/xlink",
    "class": "tributary_svg"
  })

var url = '/api/users';

button
  .on("click", function() {
    d3.json(url, function(err, res) {
      tributary.data = res;
      render();
    })
  })

function translate(pos){
  return "translate(" + [pos.x, pos.y] + ")"
}

function translate_i(i){
  var offset_top = 2;
  return translate({x: 32, y: offset_top + 82*i}) 
}


function render() {
  if(!tributary.data) return;
  
  console.log(tributary.data)

  svg.selectAll("g")
  	.data(tributary.data)
  	.enter()
  .append("g")
  	.attr({
      "id": "users",
      "class": function(d){ return d.login },
      "transform": function(d,i){ return translate_i(i)}
     })
  
  var backing = svg.selectAll("g#users")
	.append("rect")
      .attr({
        "x": -9 + "px",
        "y": 0 + "px",
        "width": 331 + "px",
        "height": 75 + "px"
      })
      .style({
        //"fill-opacity": 0.5,
        "stroke-width": 1 + "px",
        "stroke": "#DADADA",
        "fill": "#F7F7F7"
      })
 
  var images = svg.selectAll("g#users")
  	.append("a")
      .attr({
        "xlink:href": function(d){ return d.html_url },
        "xlink:show": "new", // open in new tab
        "cursor": "pointer"})       
    .append("image")
      .attr({
        "width": 58 + "px",
        "height": 75 + "px", // will use the smallest of the two.
        "xlink:href": function(d){ return d.avatar_url }
      })

  var logins = svg.selectAll("g#users")
  	.append("text")
      .attr({x: 66, y:17, 
             "font-size": 0.88 +"em"})
      .text(function(d){ return d.login + " aka  " + d.name })
  
       
  
};

// font loading
  WebFontConfig = {
    google: { families: [ 'Source+Sans+Pro:300:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
render();

style.css

/*
http://lesscss.org/ Pragmatic Theme by Dealga McArdle
After original "Dark Theme" ported to CodeMirror by Peter Kroon
*/

.cm-s-lesser-dark {
  font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important;
  line-height: 1.26em;
 }

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #EEEEEE;  }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-lesser-dark pre { padding: 0 8px; line-height: 1.3em; }/*editable code holder*/

div.CodeMirror span.CodeMirror-matchingbracket { color: #7EFC7E; }/*65FC65*/

.cm-s-lesser-dark .CodeMirror-gutters { background: #262626; border-right:1px solid #aaa; }
.cm-s-lesser-dark .CodeMirror-linenumber { color: #777; }

.cm-s-lesser-dark span.cm-keyword { color: DeepSkyBLue; }
.cm-s-lesser-dark span.cm-atom { color: #8CEEF7; font-weight: bold}
.cm-s-lesser-dark span.cm-number { color: Chartreuse; background: #000000;}
.cm-s-lesser-dark span.cm-def {color: #C4D8E6;}
.cm-s-lesser-dark span.cm-variable { color:#AAA; }
.cm-s-lesser-dark span.cm-variable-2 { color: #9DCFD8; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-property {color: #FFB78F;}
.cm-s-lesser-dark span.cm-operator {color: #92A75C;}
.cm-s-lesser-dark span.cm-comment { color: #b2b2b2; background: #000000;}
.cm-s-lesser-dark span.cm-string { color: Chartreuse; background: #424242;}
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse; background: #7E7E7E;}
.cm-s-lesser-dark span.cm-meta { color: #738C73; }
.cm-s-lesser-dark span.cm-error { color: #9d1e15; }
.cm-s-lesser-dark span.cm-qualifier {color: #000555; }
.cm-s-lesser-dark span.cm-builtin { color: #ff9e59; }
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark span.cm-tag { color: #669199; }
.cm-s-lesser-dark span.cm-attribute {color: #00c;}
.cm-s-lesser-dark span.cm-header {color: #a0a;}
.cm-s-lesser-dark span.cm-quote {color: #090;}
.cm-s-lesser-dark span.cm-hr {color: #999;}
.cm-s-lesser-dark span.cm-link {color: #00c;}





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

.user {
  float:left;
  margin-left: 10px;
  margin-top: 20px;
  height: 120px;
}

g#users {
  font-family: 'Source Sans Pro', sans-serif;
}