Colors

_.md

[ Launch: Tributary inlet ] 9531393 by tanemaki

config.json

{"description":"Colors","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"hoge.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/Izi2L51.png"}

inlet.js

// http://enjalot.github.io/dot-enter/

var svg = d3.select("svg")

var data1 = d3.range(20);

var rects = svg.selectAll("rect")
		.data(data1);

//var colorScale = d3.scale.category10();
//var colorScale = d3.scale.category20();
//var colorScale = d3.scale.category20b();
//var colorScale = d3.scale.category20c();

// -------------------------
// User-defined color scales
// -------------------------

// Type 1: Repeated color
var colorScale = d3.scale.ordinal()
	.range(["#ff0000", 
            "#00ff00",
            "#00ddff"])

// Type 2: Gradient of color
var colorScale = d3.scale.linear()
	.domain([d3.min(data1), d3.max(data1)])
	// Select interpolation
	//.interpolate(d3.interpolateRgb)	
	//.interpolate(d3.interpolateHsl)
	//.interpolate(d3.interpolateLab)
	.interpolate(d3.interpolateHcl)
	.range(["#ff0000", "#00ff00"]);

rects.enter()
	.append("rect")
	.attr({
      width: 20,
      height: 100,
      y: 70,
      x: function(d, i) {
        return i * 30 + 50;
      },
      fill: function(d, i) {
      	return colorScale(i);
      }
	})