1 /**
  2  * Returns a new categorical color encoding using the specified colors.  The
  3  * arguments to this method are an array of colors; see {@link pv.color}. For
  4  * example, to create a categorical color encoding using the <tt>species</tt>
  5  * attribute:
  6  *
  7  * <pre>pv.colors("red", "green", "blue").by(function(d) d.species)</pre>
  8  *
  9  * The result of this expression can be used as a fill- or stroke-style
 10  * property. This assumes that the data's <tt>species</tt> attribute is a
 11  * string.
 12  *
 13  * @param {string} colors... categorical colors.
 14  * @see pv.Scale.ordinal
 15  * @returns {pv.Scale.ordinal} an ordinal color scale.
 16  */
 17 pv.colors = function() {
 18   var scale = pv.Scale.ordinal();
 19   scale.range.apply(scale, arguments);
 20   return scale;
 21 };
 22 
 23 /**
 24  * A collection of standard color palettes for categorical encoding.
 25  *
 26  * @namespace A collection of standard color palettes for categorical encoding.
 27  */
 28 pv.Colors = {};
 29 
 30 /**
 31  * Returns a new 10-color scheme. The arguments to this constructor are
 32  * optional, and equivalent to calling {@link pv.Scale.OrdinalScale#domain}. The
 33  * following colors are used:
 34  *
 35  * <div style="background:#1f77b4;">#1f77b4</div>
 36  * <div style="background:#ff7f0e;">#ff7f0e</div>
 37  * <div style="background:#2ca02c;">#2ca02c</div>
 38  * <div style="background:#d62728;">#d62728</div>
 39  * <div style="background:#9467bd;">#9467bd</div>
 40  * <div style="background:#8c564b;">#8c564b</div>
 41  * <div style="background:#e377c2;">#e377c2</div>
 42  * <div style="background:#7f7f7f;">#7f7f7f</div>
 43  * <div style="background:#bcbd22;">#bcbd22</div>
 44  * <div style="background:#17becf;">#17becf</div>
 45  *
 46  * @param {number...} domain... domain values.
 47  * @returns {pv.Scale.ordinal} a new ordinal color scale.
 48  * @see pv.color
 49  */
 50 pv.Colors.category10 = function() {
 51   var scale = pv.colors(
 52       "#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd",
 53       "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf");
 54   scale.domain.apply(scale, arguments);
 55   return scale;
 56 };
 57 
 58 /**
 59  * Returns a new 20-color scheme. The arguments to this constructor are
 60  * optional, and equivalent to calling {@link pv.Scale.OrdinalScale#domain}. The
 61  * following colors are used:
 62  *
 63  * <div style="background:#1f77b4;">#1f77b4</div>
 64  * <div style="background:#aec7e8;">#aec7e8</div>
 65  * <div style="background:#ff7f0e;">#ff7f0e</div>
 66  * <div style="background:#ffbb78;">#ffbb78</div>
 67  * <div style="background:#2ca02c;">#2ca02c</div>
 68  * <div style="background:#98df8a;">#98df8a</div>
 69  * <div style="background:#d62728;">#d62728</div>
 70  * <div style="background:#ff9896;">#ff9896</div>
 71  * <div style="background:#9467bd;">#9467bd</div>
 72  * <div style="background:#c5b0d5;">#c5b0d5</div>
 73  * <div style="background:#8c564b;">#8c564b</div>
 74  * <div style="background:#c49c94;">#c49c94</div>
 75  * <div style="background:#e377c2;">#e377c2</div>
 76  * <div style="background:#f7b6d2;">#f7b6d2</div>
 77  * <div style="background:#7f7f7f;">#7f7f7f</div>
 78  * <div style="background:#c7c7c7;">#c7c7c7</div>
 79  * <div style="background:#bcbd22;">#bcbd22</div>
 80  * <div style="background:#dbdb8d;">#dbdb8d</div>
 81  * <div style="background:#17becf;">#17becf</div>
 82  * <div style="background:#9edae5;">#9edae5</div>
 83  *
 84  * @param {number...} domain... domain values.
 85  * @returns {pv.Scale.ordinal} a new ordinal color scale.
 86  * @see pv.color
 87 */
 88 pv.Colors.category20 = function() {
 89   var scale = pv.colors(
 90       "#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c",
 91       "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5",
 92       "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f",
 93       "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5");
 94   scale.domain.apply(scale, arguments);
 95   return scale;
 96 };
 97 
 98 /**
 99  * Returns a new alternative 19-color scheme. The arguments to this constructor
100  * are optional, and equivalent to calling
101  * {@link pv.Scale.OrdinalScale#domain}. The following colors are used:
102  *
103  * <div style="background:#9c9ede;">#9c9ede</div>
104  * <div style="background:#7375b5;">#7375b5</div>
105  * <div style="background:#4a5584;">#4a5584</div>
106  * <div style="background:#cedb9c;">#cedb9c</div>
107  * <div style="background:#b5cf6b;">#b5cf6b</div>
108  * <div style="background:#8ca252;">#8ca252</div>
109  * <div style="background:#637939;">#637939</div>
110  * <div style="background:#e7cb94;">#e7cb94</div>
111  * <div style="background:#e7ba52;">#e7ba52</div>
112  * <div style="background:#bd9e39;">#bd9e39</div>
113  * <div style="background:#8c6d31;">#8c6d31</div>
114  * <div style="background:#e7969c;">#e7969c</div>
115  * <div style="background:#d6616b;">#d6616b</div>
116  * <div style="background:#ad494a;">#ad494a</div>
117  * <div style="background:#843c39;">#843c39</div>
118  * <div style="background:#de9ed6;">#de9ed6</div>
119  * <div style="background:#ce6dbd;">#ce6dbd</div>
120  * <div style="background:#a55194;">#a55194</div>
121  * <div style="background:#7b4173;">#7b4173</div>
122  *
123  * @param {number...} domain... domain values.
124  * @returns {pv.Scale.ordinal} a new ordinal color scale.
125  * @see pv.color
126  */
127 pv.Colors.category19 = function() {
128   var scale = pv.colors(
129       "#9c9ede", "#7375b5", "#4a5584", "#cedb9c", "#b5cf6b",
130       "#8ca252", "#637939", "#e7cb94", "#e7ba52", "#bd9e39",
131       "#8c6d31", "#e7969c", "#d6616b", "#ad494a", "#843c39",
132       "#de9ed6", "#ce6dbd", "#a55194", "#7b4173");
133   scale.domain.apply(scale, arguments);
134   return scale;
135 };
136