ordinal color scales

_.md

[ Launch: ordinal color scales ] 680bdeae199e6597b07e by jedwood

config.json

{"description":"ordinal color scales","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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}},"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/6pcZnDH.png","ajax-caching":true,"inline-console":true}

inlet.js

var svg = d3.select("svg")

var rw = 12;
var rh = 87;
var space = 2;

var yy = -48;
var xx = 10;
var xi = 0;
var n = 64;
var data = d3.range(n);
var data2 = d3.range(n/2);
var data3 = d3.range(n/4);
var data4 = d3.range(n/8);
var data5 = d3.range(n/16);
var data6 = d3.range(n/32);

var bordeaux = ["#4A1A2C", "#8E3557", "#8EA106", "#59631E"].reverse();
var burma = ["#354242", "#ACEBAE", "#FFFF9D", "#C9DE55", "#7D9100"];

var paleYellow = '#f4e999';
var coral = '#F49F99';
var tempura = '#F3B670';
var bamboo = '#B8D94C';
var jade = '#97CFCB';
var wave = '#86CAE3';
var fuji = '#BBB4CC';
var pebble = '#BEBBB3';

var coralMid = "#E57770"
var tempuraMid = "#D58A34"
var bambooMid = "#9CBE30"
var jadeMid = "#71B5B0"
var waveMid = "#64AFCA"
var fujiMid = "#897EA2"
var pebbleMid = "#9F9D98"

var coralMidFull = "#C14139"
var tempuraMidFull = "#AF6816"
var bambooMidFull = "#7A9C0F"
var jadeMidFull = "#3D7B77"
var waveMidFull = "#1B88B0"
var fujiMidFull = "#60527E"
var pebbleMidFull = "#726E67"

var coralFull = '#A62219';
var tempuraFull = '#8C4B00';
var bambooFull = '#648200';
var jadeFull = '#2C6965';
var waveFull = '#03678B';
var fujiFull = '#4D4266';
var pebbleFull = '#54524F';


var inner_scale = d3.scale.linear() 
    .domain([d3.min(data), d3.max(data)]).range([0,1]); 

var outer_scale = d3.scale.linear()
  .domain([0, .49, .5, 1.0])
    //.interpolate(d3.interpolateHsl) 
    //.interpolate(d3.interpolateLab) 
  .interpolate(d3.interpolateRgb)
  //.interpolate(d3.interpolateHcl) 
  //.range([jade, wave, fuji, coral]);
  .range([jadeMidFull, jade, coral, coralMidFull]);
  //.range(bordeaux)
  //.range(burma)
  //.range([jadeFull, waveFull, fujiFull, coralFull]);


svg.selectAll("rect.a")
.data(data)
.enter()
.append("rect").classed("a", true)
.attr({
  x: function(d,i) {return xx + i * (rw + space); },
  y: yy+rh+space,
  width: rw,
  height: rh
}).style({
  fill: function(d,i) { return outer_scale(inner_scale(i)) }
}).on("mouseover", function (){$(this).remove()});

rw *= 2;
rw += 2;
inner_scale.domain([d3.min(data2), d3.max(data2)])

svg.selectAll("rect.b")
.data(data2)
.enter()
.append("rect").classed("b", true)
.attr({
  x: function(d,i) { return xx + i * (rw + space); },
  y: yy+rh*2 + space*2,
  width: rw,
  height: rh
}).style({
  fill: function(d,i) { return outer_scale(inner_scale(i)) }
}).on("mouseover", function (){$(this).remove()});

rw *= 2;
rw += 2

inner_scale.domain([d3.min(data3), d3.max(data3)]);

svg.selectAll("rect.c")
.data(data3)
.enter()
.append("rect").classed("c", true)
.attr({
  x: function(d,i) { return xx + i * (rw + space); },
  y: yy+rh*3 + space*3,
  width: rw,
  height: rh
}).style({
  fill: function(d,i) { return outer_scale(inner_scale(i)) }
}).on("mouseover", function (){$(this).remove()});

rw *= 2;
rw += 2

inner_scale.domain([d3.min(data4), d3.max(data4)]);


svg.selectAll("rect.d")
.data(data4)
.enter()
.append("rect").classed("d", true)
.attr({
  x: function(d,i) { return xx + i * (rw + space); },
  y: yy+rh*4 + space*4,
  width: rw,
  height: rh
}).style({
  fill: function(d,i) { return outer_scale(inner_scale(i)) }
}).on("mouseover", function (){$(this).remove()});


rw *= 2;
rw += 2

inner_scale.domain([d3.min(data5), d3.max(data5)]);


svg.selectAll("rect.e")
.data(data5)
.enter()
.append("rect").classed("e", true)
.attr({
  x: function(d,i) { return xx + i * (rw + space); },
  y: yy+rh*5 + space*5,
  width: rw,
  height: rh
}).style({
  fill: function(d,i) { return outer_scale(inner_scale(i)) }
}).on("mouseover", function (){$(this).remove()});

rw *= 2;
rw += 2

inner_scale.domain([d3.min(data6), d3.max(data6)]);


svg.selectAll("rect.f")
.data(data6)
.enter()
.append("rect").classed("f", true)
.attr({
  x: function(d,i) { return xx + i * (rw + space); },
  y: yy+rh*6 + space*6,
  width: rw,
  height: rh
}).style({
  fill: function(d,i) { return outer_scale(inner_scale(i)) }
}).on("mouseover", function (){$(this).remove()});

/*
CORAL
#F49F99
#E57770
#C14139
#A62219

TEMPURA
#F3B670
#D58A34
#AF6816
#8C4B00

BAMBOO
#B8D94C
#9CBE30
#7A9C0F
#648200

JADE
#97CFCB
#71B5B0
#3D7B77
#2C6965

WAVE
#86CAE3
#64AFCA
#1B88B0
#03678B

FUJI
#BBB4CC
#897EA2
#60527E
#4D4266

PEBBLE
#BEBBB3
#9F9D98
#726E67
#54524F
*/

style.css

#display {
  background: #eee;
}