uuid color mapping

_.md

[ Launch: uuid color mapping ] 5470760 by enjalot

config.json

{"description":"uuid color mapping","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}},"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/io8FAwS.png"}

inlet.js

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

var uuid = "5bbebde0-d692-4a17-9109-baafbeb60475"
var parts = uuid.split('-')
var ints = parts.map(function(d) { return parseInt(d,16) })
console.log(ints)
//var code = ints[ints.length-1];
var code = ints[0]

var blue = (code >> 16) & 31;
var green = (code >> 21) & 31;
var red = (code >> 27) & 31;
var foreColor = "rgb(" + (red << 3) + "," + (green << 3) + "," + (blue << 3) + ")";

console.log(26410 & 60)

/*
First set:

#7C8F95
#9580AF
#AE7977
#AF9D77
#93AE80
#939393
#AFAFB0
#C9B4C3
#CAB7AA
#C9C8AA
#B4C9BC
#9F8096
#E0CFCA
#E599C2
#F8A17D
#BFBB7B
#A27D66
#C8736B
#6BB1C7
#66A283
#676EA2
#A6B2DB

Second set:


#7BA640
#8B2783
#384CA0
#60BF82
#E76425
#9A4C9D
#F4B620
#87C540
#E11772
#116C8F
#B6D433
#442F91
#652671
#D6E266
*/


//we want 180 - 240 for hue
//.4 - .8 for saturation
//.4-.6 for lightness
// & x will give you a number between 0 and x
function hslmapper(h,s,l) {
  return function hslmap(code) {
    var hue = h + ((code >> 16) & 60)
    var sat = s + 0.01 * ((code >> 21) & 40)
    var lit = l + 0.01 * ((code >> 27) & 20)
    return d3.hsl(hue,sat,lit);
  }
}

var dark = hslmapper(180, 0.4, 0.2)
var light = hslmapper(180, 0.4, 0.5)

var svg = d3.select("svg")
svg.append("rect")
.attr({
  x:0,
  y:0,
  width:100,
  height:100,
  fill: dark(code)

})
svg.append("path")
.attr({
  d: "M0,70L0,0L100,0L100,29",
  x:0,
  y:0,
  width:100,
  height:100,
  fill: light(code)
})

var range = d3.range(60)
svg.selectAll("rect.range")
.data(range)
.enter()
.append("rect")
.classed("range", true)
.attr({
  x: 325,
  y: function(d,i) { return 100 + i * 2 },
  width: 100,
  height: 2,
  fill: function(d,i) { return d3.hsl(201 + d, 0.4, .5) }
})