Color Scales

_.md

[ Launch: Tributary inlet ] c1ea4f7ab5c149c6c05e by ramnathv

config.json

{"description":"Color Scales","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.coffee":{"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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/ZK1boRW.png"}

inlet.coffee

svg = d3.select("svg")
  .append("g")
    .attr('transform', 'translate(20, 20)')
    
celldim = 20

colorScale = d3.scale.linear()
  .domain([0, 10])
  .range(["#FDFFCB", "#232942"])
  .interpolate(d3.interpolateHsl)

data = d3.range(10)

rects = svg.selectAll('rect')
  .data(data)
  
rectsEnter = rects.enter()
  .append("rect")
  .attr
     x: (d, i) -> i*20 + 10, 
     y: 10, 
     width: celldim, 
     height: celldim,
     fill: (d, i) -> colorScale(d)