ordinal color scales

_.md

[ Launch: ordinal color scales ] 5744730 by enjalot

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

inlet.js

var svg = d3.select("svg")

var rw = 20;
var rh = 87;
var space = 4;

var yy = 120;
var xx = 12;
var xi = 0;
var n = 20;
var data = d3.range(n);

//repeats after 10 elements
var colorA = d3.scale.category10()
.domain(data);

//repeating scale with your own colors
var colorB = d3.scale.ordinal()
.domain(data)
.range(["#0B77EB", "#40B4C4", "#467BCA"]);

//another built in scale, also try category20b, category20c
var colorC = d3.scale.category20()
.domain(data);


svg.selectAll("rect.a")
.data(data)
.enter()
.append("rect").classed("a", true)
.attr({
  x: function(d,i) { return xx + i * (rw + space); },
  y: yy+0,
  width: rw,
  height: rh
}).style({
  fill: function(d,i) { return colorA((i+xi) % n) }
})

svg.selectAll("rect.b")
.data(data)
.enter()
.append("rect").classed("b", 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 colorB((i+xi)%n) }
})

svg.selectAll("rect.c")
.data(data)
.enter()
.append("rect").classed("c", 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 colorC((i+xi)%n) }
})

style.css

#display {
  background: #eee;
}