colorScaleBox

_.md

[ Launch: colorScaleBox ] 55c03684abeb8eea4139 by ariaz
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot

config.json

{"description":"colorScaleBox","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}},"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,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true}

inlet.js

var color1 = '#c3f900',
    color2 = '#34008e',
	itemsPerRow = 10,
	numRows = 10,
	svg = d3.select("svg"),
    svgW = tributary.sw,
	svgH = tributary.sh,
    numItems = itemsPerRow*numRows,
    sqW = Math.floor(svgW / itemsPerRow),
	sqH = Math.floor(svgH / numRows),
    data = d3.range(0, numItems),
    rgb1 = d3.hsl(color1),
    rgb2 = d3.hsl(color2),
    colorScale = d3.interpolateHsl(rgb1,rgb2),
	colorScale = d3.interpolateHsl(rgb1,rgb2);

svg.selectAll("rect").data(data)
  .enter()
  .append("svg:rect")
  .attr("x", function(d){return (d%itemsPerRow)*sqW;})
  .attr("y", function(d){return (Math.floor(d/itemsPerRow)*sqH);})
  .attr("width", sqW)
  .attr("height", sqH)
  .attr("fill",function(d){return colorScale(d/(numItems-1));})
  .append("svg:title")
  .text(function(d) { return colorScale(d/(numItems-1));});