uuid color mapping light-dark

_.md

[ Launch: uuid color mapping light-dark ] 5784434 by enjalot
[ Launch: uuid color mapping light-dark ] 5784335 by enjalot
[ Launch: uuid color mapping light-dark ] 5784327 by enjalot

config.json

{"description":"uuid color mapping light-dark","endpoint":"","display":"svg","public":true,"require":[],"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},"icon.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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,"thumbnail":"http://i.imgur.com/MLuhKNG.png"}

inlet.js

//inspired by identicons (and borrowing code...)
//http://tributary.io/inlet/5469856

var uuid = "5bbebde0-d692-4a17-9109-baafbeb60475"
uuid = "fffffff-d692-4a17-9109-baafbeb60475"
var parts = uuid.split('-')
var ints = parts.map(function(d) { return parseInt(d,16) })

var n = 1457;
var w = 40;
var h = 40;

//var nx = 14;
var nx = Math.floor(tributary.sw / (w + 5))

//these control the hashing algorithm. PLAY!
var ashift = 11;
var bshift = 15;

var set1 = [
"#7C8F95",
"#9580AF",
"#AE7977",
"#AF9D77",
"#93AE80",
"#939393",
"#AFAFB0",
"#C9B4C3",
"#CAB7AA",
"#C9C8AA",
"#B4C9BC",
"#9F8096",
"#E0CFCA",
"#E599C2",
"#F8A17D",
"#BFBB7B",
"#A27D66",
"#C8736B",
"#6BB1C7",
"#66A283",
"#676EA2",
"#A6B2DB"
,
//"#7BA640",
"#8B2783",
"#384CA0",
"#60BF82",
"#E76425",
"#707070",
//"#F4B620",
//"#87C540",
"#E11772",
"#116C8F",
//"#B6D433",
"#442F91",
"#652671"
//"#D6E266"
];


var len1 = set1.length;
//var len2 = set2.length;
var scale = d3.scale.linear()
.domain([0, n])
.range([0, 316342243]);

function color(d) {
  var code = scale(d);
  var a = code >> ashift
  //var b = code >> bshift
  var ind1 = Math.floor(code % (len1-1));
  //var ind2 = b & (len2-1);
  var col1 = set1[ind1];
  //var col2 = set2[ind2];
  return col1
}
var svg = d3.select("svg");



var codes = d3.range(n);
var gs = svg.selectAll("g.identicon")
.data(codes)
.enter()
.append("g").classed("identicon", true)
.attr("transform", function(d,i) {
  var x = (w+5) * (i % nx);
  var y = (h+5) * Math.floor(i / nx)
  return "translate(" + [x, y] + ")";
})

gs.append("rect")
.attr({
  x:0,
  y:0,
  width:w,
  height:h,
  fill: function(d,i) {
    return d3.rgb(color(d)).darker(0.9)
  }

})
gs.append("path")
.attr({
  d: "M" + [0,0.66*h] + "L" + [0,0] + "L" + [w,0] + "L" + [w,0.3*h],
  fill: function(d,i) {
    return color(d)
  }
})

style.css

#display {
  overflow:scroll;
  }
#display svg {
  height: 5000px;
}