Gradient Bars

_.md

[ Launch: Gradient Bars ] 5565447 by lewis500

config.json

{"description":"Gradient Bars","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}

inlet.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
    }
  })