Color practice

_.md

[ Launch: Tributary inlet ] 6129488 by tarvaina

config.json

{"description":"Color practice","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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/ATti63a.png"}

inlet.js

// Practicing http://vimeo.com/49741435 in a kata-like fashion

var width = 10;
var gap = 1;

var data = d3.range(80);


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


var colorScale = d3.scale.linear()
  .domain([d3.min(data), d3.max(data)])
  .interpolate(d3.interpolateHsl)
  .range(["#ff0000", "#45923E"]);

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