zeffii's geom dailies grid

_.md

[ Launch: zeffii's geom dailies grid ] 5527486 by enjalot
[ 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","endpoint":"","display":"svg","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,"thumbnail":"http://i.imgur.com/K3vxHc6.png"}

inlet.js

/*
These are my (@zeffii) attempts at scripting the vector graphics
mostly found on http://geometrydaily.tumblr.com/ created by @Tilman.
Buy his amazing prints and support his work!
http://geometrydaily.tumblr.com/prints

A few inlets (without # in the grid) 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.
*/


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

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

var username = "zeffii",
    urlBase = "http://tributary.io",
    url = urlBase + "/api/user/" + username + "/latest/400";
// https://github.com/enjalot/tributary/blob/master/server.js#L537

var items_wide = 4,
	rect_size = 119,
	xy_offset = {x: 170, y: 159};

var text_style1 = {
    "fill": "#D8D8D8", 
    "font-size": 0.7 + "em", 
    "font-face": "sans-serif"
};


// 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 svg = d3.select("svg")

var content_default_y = 0;
var content = svg.append("g").classed('content_grid', true)
	.attr("transform", "translate("+ [0, content_default_y] + ")")


function draw_content(){
 
  // filter inlets by username
  var username = 'zeffii';
  var single_user_inlets = _.filter(tributary.inlets, function(d){
    if (d.user.login === username) return d
  });
  
  var recoded = _.filter(single_user_inlets, function(d){
    var descr = d.description;
    if ((descr[0] === "#") && d.thumbnail) return d
  });
  
  var tmeta = content.selectAll("g")
    .data(recoded)
    .enter()
  
  var mk = tmeta.append("g")
    .classed("item_group", true)
    .attr({
      "transform": function(d, i){
          var pos = get_location(i);
          return "translate(" + [pos.x, pos.y] + ")"},
       "cursor": "pointer"
     })
   
  var bg = mk.append("a")
    .attr({
        "xlink:href": function(d, i){
          return trib_inlet + d.gistid
      },
        "xlink:show": "new"
    })
  
  bg.append("image")
    .attr({
      "xlink:href": function(d){ return d.thumbnail },
      "width": rect_size,
      "height": rect_size
    })
  
  bg.append("text")
    .attr("transform", "translate(" + [1,133] + ")")
    .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
    })
    .style(text_style1)

  
  if ([true, false][1]){
    // print to console for archiving  
      
    console.log("-----")
    console.log("name, url, thumb")

    var no_thumbs = []
    single_user_inlets.forEach(function(d){
      var descr = d.description.replace(/_/g, " ");
      var hash_id = (descr[0] === "#");
      var info_show = [d.description, d.gistid];
      if (hash_id && d.thumbnail) {
        console.log([descr.slice(1),d.gistid,d.thumbnail].join(","))
      }
      if (hash_id && !d.thumbnail) no_thumbs.push(info_show)
    })
    // print all geomdaily, without thumbs
    console.log(no_thumbs)
    
  } // end if .
  
}

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



// ripped from snowflakes

function get_location(i){
    var x = 104 + xy_offset.x * (i % items_wide);
    var y = 61 + xy_offset.y * Math.floor(i / items_wide);
    return {x: x, y: y}
}

/*    slider setup   */

// define the slider
var small_rect_bg = svg.append("rect").classed("rect_bg", true)
.attr({width: 40, height: tributary.sh, x: 0, y: 0, fill: "#DAAD21"})

var dragger_y = 0;
var dragger_height = 697;
var max_y = tributary.sh - dragger_height;
var small_rect = svg.append("rect").classed("dragger", true)
.attr({width: 40, height: dragger_height, x: 0, y: dragger_y, fill: "#728D91"})


// define the slider behaviour
var drag = d3.behavior.drag();


var temp_y = 0;
drag.on("drag", function() {
      var dx = d3.event.dx;
      var dy = d3.event.dy;
      var ddy = dy;

      var position_y = (dragger_y += dy);
      if (position_y < 0) {
        position_y = 0
        ddy = 0;
      }
      if (position_y > max_y) { 
        position_y = max_y
        ddy = 0;
      }
      
      // define drag behaviour, limiting to min/max
      d3.select("rect.dragger")
      .attr("y", position_y)
      
      // define the move behaviour of the object.
      d3.select(".content_grid")
      .attr("transform", function(){ 
          var ry_val = content_default_y - position_y
          return "translate(" + [0, ry_val] + ")"
         })
})

small_rect.call(drag);

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