Creating color options
tm.color.range.{color_option}
Description: Defines a color option – where {color_option} is a unique name used internally to reference the color option; and the value of the parameter specifies the exact colors used by a {color_option} and optionally assigns a specific value to one or more of the colors.
Value: {color_value1}[:{data_value}], ... ,{color_valueN}[:{data_value}]
A comma separated list of {color_values} with a {data_value} optionally assigned to a {color_value}.
| {color_value} | Any hexadecimal color. |
|---|---|
| {data_value} | For a numeric color spectrum: any number. For a discrete color spectrum (based on enumerated text): any word/phrase found in the data. |
Example: "tm.color.range.Quota_PercentCLR":"ff0000:-5,000000:0,00ff00:5",
"tm.color.range.Total_SalesCLR": "990000,e33500,ffff00,78F065,0F6A00", "tm.color.range.Quota_MetCLR": "ff0000:No,00ff00:Yes",
"tm.color.range.Sales_RegionCLR": "78F065:Mountain West,ffff00: Southeast,0000dd:Southwest,990000:Northeast,e33500:Great Lakes, 0F6A00:Northwest",
tm.color.nodata
Description: Specifies the color to use for a cell when a cell has invalid data or no data for the currently selected color option.
Value: Any hexadecimal color value.
Example: "tm.color.nodata": "cccccc",
Optional: Custom-defined color legend
In Flaremap JS, the color legend is automatically generated based on the “tm.color.range.{color_option}” parameter. Occasionally, it may be useful to use a custom-defined color legend instead of the automatically generated one. For example, when a color option includes ranges for outlier values, the majority of the color legend may be obscured because the colors are being spaced on a linear scale. The custom-defined color legend allows designers to create a color legend independent of the color scale used by treemap (i.e. independent of the “tm.color.range.{color_option}” parameter). The custom-defined color legend can display a simplified legend that connotes the colors being used by the treemap.
To create a custom-defined color legend (and override the automatically generated color legend), include the following two parameters (both parameter must be used).
color.range.{color_option}
Description: Sets the legend color values for a {color_option}.
Value: {color_value1}[:{data_value}], ... ,{color_valueN}[:{data_value}]
A comma separated list of {color_values} with a {data_value} optionally assigned to a {color_value}.
| {color_value} | Any hexadecimal color. |
|---|---|
| {data_value} | For a numeric color spectrum: any number. For a discrete color spectrum (based on enumerated text): any word/phrase found in the data. |
Example: "color.range.Quota_PercentCLR":"ff0000:-5,000000:0,00ff00:5",
"color.range.Sales_RegionCLR": "78F065,ffff00,0000dd,990000, e33500,0F6A00",
color.legend.{color_option}
Description: Specifies a list of labels that map to the corresponding colors as specified by the color.range.{color_option} parameter.
Value: {legend_type},{label1},...,{labelN}
A comma separated list of {labelN}.
Special Note: The value of each “color.legend.{color_option}” parameter must be have the same number of labels as there are points in the associated color range. If the label for a particular point is not to appear (to avoid clutter, for example), an empty entry must be used.
| {legend_type} | Not used in current version of Flaremap JS. Any value may be entered, or this field can be left blank. |
|---|---|
| {labelN} | Any string. |
Example: "color.legend.Quota_PercentCLR": ",-5%,At Quota,5%",
"color.legend.Sales_RegionCLR": "Mt West,SE,SW,NE,Gt Lakes,NW",
Color blind support
Color blind support can be optionally enabled in Flaremap JS. When the color blind functionality is turned on a hyperlink appears near the color legend that allows the user to switch the color options between the standard colors and the color blind safe colors. By default, the color blind functionality operates in a smart-auto mode and automatically converts all color options to color blind safe color options. The smart-auto color blind options can also be overridden by manually defining color blind options
The smart-auto functionality is designed to create a color option that makes it easy for people with color deficiencies to use the interface. To be most effective, the smart-auto functionality simplifies existing color options and replaces the colors with a set of high contrast, color blind safe colors. During our trials, this method was far superior to every other option tested and was the most logical for users with color deficiencies to understand. The smart-auto functionality works well for all typical color options. For highly customized and intricate color options it is expected that designers will manually create a second color option suitable for people with color deficiencies.
The smart-auto functionality works by scanning the standard color option parameters and then creating color blind safe alternative color options: The smart-auto option will create a smooth, color blind safe gradient between the endpoints of the standard color option. All colors listed in between the endpoints of the standard color option will be discarded – unless one of the middle colors is tied to the numerical value “0” or “100”. If one of the middle colors of the standard color option are tied to “0” or “100” the smart-auto option will create a three-color gradient that pivots on the “0” or “100” – smart-auto will preserve the numeric value of the middle number. If the endpoints of the standard color option are tied to a numerical value, the smart-auto option will preserve the numerical values of those endpoints in the smart-auto option.
tm.color.cb.toggle
Description: Toggles color blind support on and off.
Value: “on” or “off”. The value “on” will turn on color blind support.
Example: "tm.color.cb.toggle": "on",
tm.strings.cb.control.turn_on.label
Description: In the Flaremap interface, near the color legend, a link will appear (default text is “Click here for color safe version”) that the user can click to toggle between color blind mode and full-color mode. The text of the hyperlink can be changed with the following parameter.
Value: Any string – basic html markup is allowed.
Example: "tm.strings.cb.control.turn_on.label": "Click here for <br>color safe version",
tm.strings.cb.control.turn_off.label
Description: In the Flaremap interface, near the color legend, a link will appear (default text is “Click here for color safe version”) that the user can click to toggle between color blind mode and full-color mode. The text of the hyperlink can be changed with the following parameter.
Value: Any string – basic html markup is allowed.
Example: "tm.strings.cb.control.turn_off.label": "Click here for <br>standard version",
Manually defined color blind options (overrides): The smart-auto color blind options can be overridden by manually defining color blind options. To manually create a color option that overrides the smart-auto option use the standard color parameters, but insert “.cb” after the word “color” in each parameter. For example:
//Sample standard color parameters
"tm.color.range.Quota_MetCLR": "9a0000,9a0000:99.9,009100:100,009100",
"color.range.Quota_MetCLR": "9a0000:0,9a0000:5,009100:5,009100:10",
"color.legend.Quota_MetCLR": "Below Quota,,,Above Quota",
//Sample color blind override parameters
"tm.color.cb.range.Quota_MetCLR": "ffff00,ffff00:99.9,0000ff:100,0000ff",
"color.cb.range.Quota_MetCLR": "ffff00:0,ffff00:5,0000ff:5,0000ff:10",
"color.cb.legend.Quota_MetCLR": "Below Quota,,,Above Quota",