Skip to content

Instantly share code, notes, and snippets.

@ariaz
Last active August 29, 2015 14:11
Show Gist options
  • Save ariaz/55c03684abeb8eea4139 to your computer and use it in GitHub Desktop.
Save ariaz/55c03684abeb8eea4139 to your computer and use it in GitHub Desktop.
colorScaleBox
{"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}
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));});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment