| Values (A-Z) | |
| computer |  |
| freezer |  |
| incubator |  |
| microscope |  |
| oven |  |
| Colors | |
 |
green |
 |
yellow |
 |
blue |
|
green |
|
yellow |
|
blue |
Most Hopara layers support color configuration. You can set it to a fixed color (e.g. black) or bind it to a field (e.g. asset type).
The fixed color scenario is simple, all objects will be painted with the same color.
When binding it to a field colors will be assigned dynamically to each object based on the field value and the configured scale. Hopara assumes reasonable defaults for scales, but you might want to change that depending on your specific scenario.
Categorical scales are usually applicable to text fields. They come in two types: sorted and hashed. Sorted is the default categorical scale.
When using sorted scales Hopara will sort all fetched values alphabetically, then assign each value to a color in sequence. When there are no more colors to assign it will reset to the first color.
| Values (A-Z) | |
| computer | |
| freezer | |
| incubator | |
| microscope | |
| oven | |
| Colors | |
|
green |
|
yellow |
|
blue |
|
green |
|
yellow |
|
blue |
Sorted scales are simple but have the downside of generating inconsistent colors depending on the use case. To demonstrate this issue let’s assume a visualization displaying assets and coloring them according to its type using a sorted scale. The user can then filter the assets due for maintenance.
There’s a total of 3 types: Freezers, Incubators and Refrigerators. However, only two types are due for maintenance: Incubators and Refrigerators. In the unfiltered scenario we’ll have the following color distribution:
| Values (A-Z) | |
| computer | |
| freezer | |
| microscope |  |
| Colors | |
|
green |
|
yellow |
|
blue |
In the filtered scenario the following one:
| Values (A-Z) | |
| freezer |  |
| microscope |  |
| Colors | |
|
green |
|
yellow |
|
blue |
You can notice that the color of the same asset changed when filtering making it inconsistent during the navigation. The hashed scale solves this problem.
When using hashed scales Hopara will calculate a hash of the type and based on that assign a color keeping the color consistent even when the type list changes. The downside of this approach is the collision risk. Two different types can be assigned the same color even with multiple colors available in the scheme.
| Values (A-Z) | |
| freezer | |
| microscope | |
| Colors | |
|
green |
|
yellow |
|
blue |
Continuous scales apply to numeric and date fields. They come in two types: grouped and linear. grouped is the default continuous scale.
In grouped scales Hopara will sort the values and group them in a way that:
1-The number of groups is equivalent to the number of colors, 2-Each group is assigned (roughly) the same number of values.
To illustrate how grouped scales work let’s assume we’re coloring rooms based on the number of assets inside them.
We have three colors (light blue, blue, dark blue) and the following rooms:
| Rooms | Asset count |
| Room A | 1 asset |
| Room B | 2 assets |
| Room C | 3 assets |
| Room D | 4 assets |
| Room E | 5 assets |
| Room F | 18 assets |
Because we have 3 colors, Hopara will create 3 groups and each group will be assigned to a color.
| Rooms | Asset count |
| Room A | 1 asset |
| Room B | 2 assets |
| Room C | 3 assets |
| Room D | 4 assets |
| Room E | 5 assets |
| Room F | 18 assets |
| Colors | |
 |
light-blue |
 |
blue |
 |
dark-blue |
In linear scales the value range is split into equal intervals based on the number of colors, then values falling within each interval are assigned accordingly.
To illustrate let’s use the same example of the previous section. In this example, our asset count range is from 1 (room A) to 18 (room F). Because we have three colors we’ll have three intervals 1-6, 6-12, 12-18.
| Rooms | Asset count |
| Room A | 1 asset |
| Room B | 2 assets |
| Room C | 3 assets |
| Room D | 4 assets |
| Room E | 5 assets |
| Room F | 18 assets |
| Colors | |
|
light-blue |
|
blue |
|
dark-blue |
The color scale type can be changed in the advanced mode of a layer under encoding -> color -> scale -> type.
{
"name": "Asset",
"type": "icon",
"encoding": {
"color": {
"field": "status",
"scale": {
"type": "sorted",
"scheme": "greenyellowred"
}
}
}
}
You can create your own color scheme by defining a list of hex color codes in the advanced mode of a layer under encoding -> color -> scale -> colors.
{
"name": "Asset",
"type": "icon",
"encoding": {
"color": {
"field": "status",
"scale": {
"type": "sorted",
"colors": [
"#2d9cf0",
"#545454",
"#ffffff"
]
}
}
}
}
You can define colors for individual values by setting a combination of values and colors in the advanced mode of a layer under encoding -> color -> scale. The first value will be assigned to the first color and so forth.
{
"name": "Asset",
"type": "icon",
"encoding": {
"color": {
"field": "status",
"scale": {
"type": "sorted",
"values": [
"ok",
"warning",
"risk"
],
"colors": [
"#2d9cf0",
"#545454",
"#ffffff"
]
}
}
}
}
You can define colors based on a condition (i.e. if another field is true or false). This can be accomplished by creating a condition element in the advanced mode of a layer under encoding -> color -> conditions. In the example below we set the color to gray if the field offline is true.
{
"name": "Asset",
"type": "icon",
"encoding": {
"color": {
"value": "#2d9cf0",
"conditions": [
{
"test": {
"field": "offline"
},
"value": "#cccccc"
}
]
}
}
}
You can add multiple conditions, the first tested true will be applied. You can reverse the condition (i.e. test for false) by setting reverse true in the test block.
{
"name": "Asset",
"type": "icon",
"encoding": {
"color": {
"value": "#2d9cf0",
"conditions": [
{
"test": {
"field": "offline",
"reverse": true
},
"value": "#cccccc"
}
]
}
}
}