Color scales in Protovis are implemented using scales. Quantitative scales (such as linear or log) produce quantitative color encodings, and ordinal scales produc categorical color encodings. There are also two shorthand expressions (pv.colors and pv.ramp) for constructing color scales. Additionally, there are several built-in color palettes for categorical encoding (pv.Colors).
See also: pv.colors, pv.color, pv.ramp API reference
You can define a quantitative color scale—i.e., encode a quantitative dimension of your data using color—using a standard linear scale. The only difference is that the output range is specified in colors. For example, here is a diverging scale that blends from red to yellow in the domain [0, .5], and from yellow to green in the domain [.5, 1]:
new pv.Panel()
.width(340)
.height(32)
.add(pv.Bar)
.data(pv.range(0, 1, 1/85))
.left(function() this.index * 4)
.width(4)
.fillStyle(pv.Scale.linear(0, .5, 1).range('red', 'yellow', 'green'))
.root.render();
Colors are interpolated in RGB color space, even if specified as HSL. Colors can be specified as strings, according to the CSS Color Module Level 3. The following formats are supported:
Additionally, you can directly pass in an instance of pv.Color. This is useful if you use a built-in color operator, such as masking the alpha channel, or deriving a brighter or darker color.
As shorthand, you can define a linear scale with the default domain [0, 1] using pv.ramp. For example, to create a color gradient from black to white:
new pv.Panel()
.width(340)
.height(32)
.add(pv.Bar)
.data(pv.range(0, 1, 1/85))
.left(function() this.index * 4)
.width(4)
.fillStyle(pv.ramp('black', 'white'))
.root.render();
Note that while linear scales are the most common, you can also use log scales for color:
new pv.Panel()
.width(340)
.height(32)
.add(pv.Bar)
.data(pv.range(0, 1, 1/85))
.left(function() this.index * 4)
.width(4)
.fillStyle(pv.Scale.log(.1, 1).range("black", "white"))
.root.render();
When your data is nominal or ordinal, such as the names of categories, you can use an ordinal scale for categorical color encoding. As with other ordinal scales, the scale is a mapping from a set of discrete domain values (such as names or indexes) to a set of discrete range values (colors). One nicety of ordinal scales—particularly for color encoding—is that you do not have to specify the domain explicitly. Instead, Protovis will allocate a new color from the range whenever it sees a unique value. If it sees more unique domain values than there exist in the range, it will start recycling colors.
The primary method of defining a categorical color encoding is using pv.colors, which is simply shorthand for constructing an ordinal scale with the given range:
new pv.Panel()
.width(660)
.height(32)
.add(pv.Bar)
.data(pv.range(6))
.left(function() this.index * 34)
.width(32)
.fillStyle(pv.colors("red", "orange", "yellow", "green", "blue", "violet"))
.root.render();
Protovis has several built-in color palettes that can serve as standard categorical encodings.
new pv.Panel()
.width(340)
.height(32)
.add(pv.Panel)
.data(pv.Colors.category10().range())
.left(function() this.index * 34)
.width(32)
.fillStyle(function(d) d)
.title(function(d) d.color)
.root.render();
"#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"
new pv.Panel()
.width(680)
.height(32)
.add(pv.Panel)
.data(pv.Colors.category20().range())
.left(function() this.index * 34)
.width(32)
.fillStyle(function(d) d)
.title(function(d) d.color)
.root.render();
"#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"
new pv.Panel()
.width(660)
.height(32)
.add(pv.Panel)
.data(pv.Colors.category20().range())
.left(function() this.index * 34)
.width(32)
.fillStyle(function(d) d)
.title(function(d) d.color)
.root.render();
"#9c9ede", "#7375b5", "#4a5584", "#cedb9c", "#b5cf6b", "#8ca252", "#637939", "#e7cb94", "#e7ba52", "#bd9e39", "#8c6d31", "#e7969c", "#d6616b", "#ad494a", "#843c39", "#de9ed6", "#ce6dbd", "#a55194", "#7b4173"