color scales

_.md

See Previous Inlet [ Gist ]

config.json

{"description":"color scales","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.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,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":528,"height":570,"hide":false},"thumbnail":"http://i.imgur.com/7uig89c.png"}

inlet.js

var svg = d3.select("svg");

var data1 = d3.range(38);

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


//var colorScale = d3.scale.category20();

/*
var colorScale = d3.scale.ordinal()
    .range(["#540069", 
            "#0033FF",
            "#00C2FF",
            "#831010"
           ]);
*/

var colorScale = d3.scale.linear()
    .domain([d3.min(data1), d3.max(data1)])
    //.interpolate(d3.interpolateHsl)
    //.interpolate(d3.interpolateLab)
    .interpolate(d3.interpolateHcl)
    .range(["#007AFF", "#FFF500"]);


rects.enter()
  .append("rect")
  .attr({
    width: 12,
    height: 100,
    y: 100,
    x: function(d,i) {
      return i * 13 + 115;
    },
    fill: function(d,i) {
      return colorScale(d);
    }
  })

inlet.svg