All examples By author By category About

chrisbrich

Reuseable component - Color Bar

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