Another Inlet

_.md

[ Launch Inlet ]
Gist #3650755
See Previous Inlet [ Gist ]

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.7,"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}}

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);
    }
  })