zeffii's geom dailies

_.md

[ 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","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/XcDQMKK.png"}

inlet.js

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

Using tributary allows us to get instant feedback while entering
code, scrubbing values, and picking from the colourwheel.


Rationale:
- why D3? It simplies the construction of SVG.

- why Geometry Daily? Because the collection is timeless and thinking
about their construction puts tools in your cranial toolkit that you
can not acquire by merely looking at them.


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.
*/


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

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";
var urlBase = "http://tributary.io"
var url = urlBase + "/api/user/" + username + "/latest?limit=200";

var rect_size = 66;

var text_style1 = {
  "fill": "#D8D8D8", 
  "font-size": 0.81254 +"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 content = d3.select("svg").append("g");



// outputs a csv
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){
      		return "translate(" + [24, 10 + 74*i] + ")"},
       "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
  	})
  	//.style({"border": 0})
  
  bg.append("text")
  	.attr("transform", "translate(" + [80,39] + ")")
  	.text(function(d, i){
  		var descr = d.description.replace(/_/g, " ");
      return descr})
    .style(text_style1)
  
         
  //tmeta.exit().remove()

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

    single_user_inlets.forEach(function(d){
      var descr = d.description.replace(/_/g, " ");
      if ((descr[0] === "#") && d.thumbnail) {
        console.log([descr.slice(1),d.gistid,d.thumbnail].join(","))
      }
    })

  
  } // end if .
  
  
  
  
}

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

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