Sometimes certain dimensions of data are better encoded by color rather than position (i.e. weights of a weighted graph). In these cases, it is useful to have a legend to show this mapping from value -> color.
This reusable component will create a color bar based on a given color scale (should work with linear/log/polylinear/etc..). It should transition properly if colorbar parameters are changed.
This component is based off Mike's Gradient Along Stroke block (same thing, just made reusable and with an axis thrown in).
Note: This colorbar can handle a curved path, but the axis component will not. I can't think of a use-case when you would want a curved colorbar, but it could be implented without too much effort should the need arise.
Update 12/5/2012: Bug fix: When copying the color scale and readjusting is domain and range to be suitable for the axis, you also need to reset the interpolater to the default (d3.interpolate).
xxxxxxxxxx<html> <head> <title>Color bar</title> <link type="text/css" rel="stylesheet" href="colorbar.css"></link> <script type="text/javascript" src="https://d3js.org/d3.v2.min.js"></script> <script type="text/javascript" src="colorbar.js"></script> </head> <body> <script type="text/javascript">var svg = d3.select("body").append("svg") .attr("width", 1000) .attr("height", 1000),g = svg.append("g").attr("transform","translate(10,10)").classed("colorbar",true),cb = colorBar().color(d3.scale.linear().domain([-1, 0, 1]).range(["red", "green", "blue"])).size(350).lineWidth(80).precision(4);g.call(cb); </script> </body></html> Modified http://d3js.org/d3.v2.min.js to a secure url
https://d3js.org/d3.v2.min.js