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

<svg class="tributary_svg" width="1308" height="703"><rect width="12" height="100" y="100" x="115" fill="#007aff"></rect><rect width="12" height="100" y="100" x="128" fill="#4a78ff"></rect><rect width="12" height="100" y="100" x="141" fill="#6a76ff"></rect><rect width="12" height="100" y="100" x="154" fill="#8374fe"></rect><rect width="12" height="100" y="100" x="167" fill="#9971fb"></rect><rect width="12" height="100" y="100" x="180" fill="#ac6ef8"></rect><rect width="12" height="100" y="100" x="193" fill="#be6bf4"></rect><rect width="12" height="100" y="100" x="206" fill="#ce67f0"></rect><rect width="12" height="100" y="100" x="219" fill="#de64ea"></rect><rect width="12" height="100" y="100" x="232" fill="#ec60e4"></rect><rect width="12" height="100" y="100" x="245" fill="#f95ddd"></rect><rect width="12" height="100" y="100" x="258" fill="#ff5ad6"></rect><rect width="12" height="100" y="100" x="271" fill="#ff57cf"></rect><rect width="12" height="100" y="100" x="284" fill="#ff56c6"></rect><rect width="12" height="100" y="100" x="297" fill="#ff55be"></rect><rect width="12" height="100" y="100" x="310" fill="#ff55b5"></rect><rect width="12" height="100" y="100" x="323" fill="#ff57ac"></rect><rect width="12" height="100" y="100" x="336" fill="#ff5aa3"></rect><rect width="12" height="100" y="100" x="349" fill="#ff5e9a"></rect><rect width="12" height="100" y="100" x="362" fill="#ff6390"></rect><rect width="12" height="100" y="100" x="375" fill="#ff6987"></rect><rect width="12" height="100" y="100" x="388" fill="#ff707e"></rect><rect width="12" height="100" y="100" x="401" fill="#ff7874"></rect><rect width="12" height="100" y="100" x="414" fill="#ff806b"></rect><rect width="12" height="100" y="100" x="427" fill="#ff8862"></rect><rect width="12" height="100" y="100" x="440" fill="#ff9158"></rect><rect width="12" height="100" y="100" x="453" fill="#ff994f"></rect><rect width="12" height="100" y="100" x="466" fill="#ffa246"></rect><rect width="12" height="100" y="100" x="479" fill="#ffab3c"></rect><rect width="12" height="100" y="100" x="492" fill="#ffb432"></rect><rect width="12" height="100" y="100" x="505" fill="#ffbc28"></rect><rect width="12" height="100" y="100" x="518" fill="#ffc51c"></rect><rect width="12" height="100" y="100" x="531" fill="#ffcd0e"></rect><rect width="12" height="100" y="100" x="544" fill="#ffd600"></rect><rect width="12" height="100" y="100" x="557" fill="#ffde00"></rect><rect width="12" height="100" y="100" x="570" fill="#ffe600"></rect><rect width="12" height="100" y="100" x="583" fill="#ffed00"></rect><rect width="12" height="100" y="100" x="596" fill="#fff500"></rect></svg>