zeffii's geom dailies grid html BW

_.md

[ Launch: zeffii's geom dailies grid html BW ] a3976f1533efcf6f25e3 by zeffii
[ Launch: zeffii's geom dailies grid html ] 5818369 by zeffii
[ Launch: zeffii's geom dailies grid ] 5756514 by zeffii
[ Launch: zeffii's geom dailies ] 5280281 by zeffii
[ Launch: zeffii's geom dailies ] 5279252 by enjalot
[ Launch: just mine p5 ] 5020279 by zeffii
[ Launch: just mine p5 ] 4966869 by zeffii
[ Launch: just mine p3 ] 4960296 by zeffii
[ Launch: just mine p2 ] 4959904 by zeffii
[ Launch: just mine ] 4959669 by zeffii
[ Launch: crossfilter racetrack ] 4956157 by zeffii
[ Launch: crossfilter racetrack ] 4624910 by zeffii
[ Launch: Another Inlet ] 4618198 by enjalot

config.json

{"description":"zeffii's geom dailies grid html BW","endpoint":"","display":"div","public":true,"require":[{"name":"crossfilter","url":"https://raw.github.com/square/crossfilter/master/crossfilter.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"cars.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"conf.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"recodes.csv":{"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,"tab":"edit","display_percent":0.46399999999999975,"ajax-caching":true}

inlet.js

/*
These are my (@zeffii) attempts at scripting the vector graphics
mostly found on http://geometrydaily.tumblr.com/ created by @Tilman.

///////////////////////////////////////////////////////////
//      Buy his prints and support his great effort!     //
//      http://geometrydaily.tumblr.com/prints           //
///////////////////////////////////////////////////////////

A few grid items (without the # prefix) are based on historic sources 
such as RecodeProject and whatever interesting stuff comes my way.


Rationale:
- Why Tributary? it allows immediate feedback while entering code, 
scrubbing values, and picking from the colourwheel.

- why D3? It simplifies the construction of SVG.

- why Geometry Daily? Because the collection is timeless and thinking
about their construction reinforces trigonometry and pattern solving.

- Why not every Geometry Daily? Because some are programmatically
more similar than they might appear. oh..and there's more than 400.

Considerations:
I think there are several approaches to scripting Vector Graphics.
- reduce the resulting SVG filesize
- reduce the code used to create the SVG
- write code that is easy for newcommers, basic yet hinting possibiliies.

In the end it's about sharpening skills and keeping them that way.

todo: add  d.visits  as hover over effect..

*/


d3.select("body").style("background-color", "#ECECEC")

var trib_url = 'http://tributary.io/',
    users_url = trib_url + 'api/users',
    trib_inlet = trib_url + 'inlet/';

var username = "zeffii",
    urlBase = "http://tributary.io",
    url = urlBase + "/api/user/" + username + "/latest/400";

var recoded;

// 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;
    })
  })
}

if (!tributary.users){
    getUsers() 
}

var content_display = d3.select("#display")
var content = content_display.append("div").classed("content_main", true)


function draw_content(){
 

  recoded = _.filter(tributary.inlets, function(d){  
    var descr = d.description;
    if ((descr[0] === "#") && d.thumbnail) return d
  });
  
  var tmeta = content.selectAll("div").data(recoded);
  
  var divs = tmeta.enter()
  .append("div")
  .classed("indiv", true)
  
  divs.append("a")
  .attr({
    href: function(d, i){ return trib_inlet + d.gistid },
    target: "_blank"
  })
  .append("img")
  .attr("src", function(d){ return d.thumbnail })
  .attr("title", function(d){ return 'visits: ' + d.visits })
  .classed("indiv bw", true)
  
  divs.append("span")
  .text(function(d, i){
      var descr = d.description.replace(/_/g, " ");
      descr = descr.replace(/#@/g, "");
      var limit = 23;
      if (descr.length > limit){
        descr = descr.slice(0, limit-3) + "..."
      }
      return descr
  })
}

//delete tributary.inlets
if (!tributary.inlets){
  d3.json(url, function(err, res) {
    tributary.inlets = res;
    draw_content()
  })
} else {
  draw_content()
}

recodes.csv

style.css

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark span.cm-variable { color:#22EFFF; }
.cm-s-lesser-dark span.cm-variable-2 { color: #FFCCB4; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-string { color: Chartreuse; }
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse;}
.cm-s-lesser-dark span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark pre { color:#FFF; }
.cm-s-lesser-dark span.cm-comment { color: #AFB4B4;}
.cm-s-lesser-dark span.cm-property {color: #FDA676;}
.cm-s-lesser-dark span.cm-number { color: #FF92EE;}
.cm-s-lesser-dark span.cm-keyword { color: #FFFF18; }
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-lesser-dark .CodeMirror-gutters {background: #505050;}
.cm-s-lesser-dark .CodeMirror-linenumber {color: #D3D3D3;}


#display {
  overflow:scroll;
  padding-bottom: 5px;
}


div.content_main { 
  //background: #DADADA; 
  float: left;
  font-size: 0.7em;
  line-height: 0.95em;
  overflow: scroll;
}

div.indiv { 
  position: relative;
  display:inline-block;
  width: 159px;
  height: 135px;
  //border: 1px solid white;
  margin: 12px;
  padding: 10px;
  float:left;
}

img.indiv {
  transition-duration: 300ms;
  height: 126px;
  -webkit-filter: grayscale(0%);  
}

.bw:hover {
  transition-duration: 500ms;
  -webkit-filter: grayscale(90%);
}