Colors plays an important role in a visualization. It may indicate particular situations without requiring a long visual processing time. This mechanism is called pre-attentive perception and is key to efficiently and quickly conveying information.
Roassal offers several mechanisms to easily associate colors to elements. This chapter gives an overview of coloring in Roassal.
Roassal contains a number of color schemas, available in the class
RTPalette. Consider the example (Figure 1.1):
This simple example creates a view referenced by the variable
A shape is created by instantiating the class
RTBox and setting a block as a color. This block is evaluated for each element. Elements are created with
elementsOn: (1 to: 5): five elements are created, each having a number as the element model. The shape evaluates the block provided as a color by using the model as the
index variable. The palette given by
RTPalette c3 has 5 different colors, represented as an
Array of the same size.
RTPalette has several palettes. You can replace the
c3 from any value ranging from
In the Roassal jargon, a normalizer is a facility to map a set of objects over a range of values or colors. Several color normalizers are provided to color an element according to some particular requirements.
RTMultiLinearColor class is a simple and useful color normalizer. It associates a color to each element depending on a numerical value, ranging from 0.0 to 1.0. Consider the following example (Figure 2.1):
The code given above first creates a view. It then creates an instance of
RTMultiLinearColor. This normalizer is polymorph to the class
Color, which means you can provide a color normalizer where a color or a block is usually expected. The example simply uses the normalizer as a color by being provided to
The default configuration of
RTMultiLinearColor is to map a value ranging from 0.0 to 1.0 to the default color palette, composed of red, blue, and green. The elements created with
shape elementsOn: (0.0 to: 1.0 by: 0.05) have a numerical value as model. This value is directly mapped to a color.
A particular palette may be set using
color:. The following example maps the value from red to gray (Figure 2.2):
The example above uses a palette made of two colors, red and gray. These two colors are then interpolated to give a value ranging from 0.0 and 1.0. The value 0.0 is mapped to red, and 1.0 to gray.
In the examples given above each element has a numerical value as object model. It does not have to be so. Consider the following example (Figure 2.3):
classes contains a collection of classes to be represented. The largest number of lines of code is obtained from the collection
classes. The message
max returns the maximum value of a set of numerical values (e.g.,
#(1 2 42 3 4) max returns
n uses a palette as the colors to be used. The message
command: takes a block or a symbol as argument to compute the color index. The block value has to return a numerical value ranging from 0.0 to 1.0.
The visualization can be enriched with edges and a dedicated legend (Figure 2.4):
It is common to have to normalize colors according to a particular metric. In the previous example, we did it manually as we needed to compute the maximum number of lines of code. Computing maximum and minimum values is often cumbersome.
Roassal offers a dedicated infrastructure, called
RTMetricNormalizer, to ease the color normalization using a metric.
Use of this normalizer makes unnecessary to compute the largest size in the set. Consider this new version (without legend to keep the code short):
RTMultiLinearColorForIdentity colors a Roassal element based on the object model. A color is given to each object model. Elements representing the same object will have the same color. Consider the following example (Figure 3.1):
The example above represents a set of words and highlights some of them. The variable
wordsToHighlight contains the words that have to be highlighted. The normalizer is configured with the words using
objects:. The elements to display are created by having to cut the string
'you and you and me make us all' into single words using
Consider the following example using the famous French poem by Jean de La Fontaine (Figure 3.2)