colorscale

_.md

[ Launch: colorscale ] e66354bd25b0f9abbe87 by ahlusar1989

config.json

{"description":"colorscale","endpoint":"","display":"svg","public":true,"require":[{"name":"d3.js","url":"https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"d3.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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/v1oriNw.png"}

d3.js

var svg = d3.select("svg"); //a selection of the svg object

var data = d3.range(38); //range of numbers 1-38

var rects = svg.selectAll("rect")
    .data(data)
      .enter()
    .append("rect"); //creates 38 rectangles with no attributes


var colorScale = d3.scale.linear() //function that takes numbers & returns colors
    .domain([d3.min(data), d3.max(data)]) //domain of input data 1 to 38
    .range(["blue", "yellow"]) //the color range
    .interpolate(d3.interpolateHcl); //how to fill the inbetween colors

rects.attr({
    width: 12,
    height: 100,
    y: 100,
    x: function(d,i) {
      return i * 15 + 115; //the bars are spread out 15px + 115 to the right
    },
    fill: function(d,i) {
      return colorScale(d); //take each rect's data (d) and turn it into a color
    }
  })

inlet.js

{}