Skip to content

Instantly share code, notes, and snippets.

@chucklarge

chucklarge/index.html

Created July 22, 2012 00:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chucklarge/3157707 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chucklarge/3157707 to your computer and use it in GitHub Desktop.
Download ZIP
Rectangle color gradient
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Rectangle Color Gradient</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
svg {
xborder:1px solid red;
}
</style>
</head>
<body>
<div id='d3'></div>
</body>
<script type="text/javascript" src="rect.js"></script>
</html>
Raw
rect.js
var width = 960,
height = 200,
divisions = 10;
var newData = [];
var sectionWidth = Math.floor(width / divisions);
for (var i=0; i < width; i+= sectionWidth ) {
newData.push(i);
}
var colorScaleLin = d3.scale.linear()
.domain([0, newData.length-1])
.interpolate(d3.interpolateRgb)
.range(['red', 'green']);
var colorScalePow = d3.scale.pow().exponent(.6)
.domain([0, newData.length-1])
.interpolate(d3.interpolateRgb)
.range(['red', 'green']);
var vis = d3.select("#d3")
.append("svg")
.attr("width", width)
.attr("height", height);
vis.selectAll('rect')
.data(newData)
.enter()
.append('rect')
.attr("x", function(d) { return d; })
.attr("y", 0)
.attr("height", height)
.attr("width", sectionWidth)
.attr('fill', function(d, i) { return colorScaleLin(i)});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment