Categories

# Create colour blocks per value – introduction to mapping data to colours

Create blocks of data that represent values. Then map these blocks from a simple array.

These set of exercises help you to think about colour as value. When creating a data-visualisation, values from the data need to be mapped to different visual artefacts. One way is to map the values to colour. In these activities we will create some coloured value blocks, and investigate colour intervals. We will use Processing.org and output the images into PDFs that can be printed.

The activities develop from previous ones. So take a look at the following activities:

1. Rainbows and Colours (which gives an introduction to colours).
2. The activity to make a quick sketch before you code, introduces the Critical Thinking Sheet. You can find a copy of the CTS sheet here.
3. Hue Saturation Brightness activity goes through the HSB colour space.
4. And finally, the activity titled “Learn about the relative nature of colour” goes over the ideas that we’ll cover in this post.

## Activity 1. Blocks of colour, representing different values

In this activity we will create a set of coloured blocks representing different values.

### Step 1. plan the picture

As with previous activities, we suggest you plan the picture. It is much easier to create code when you have sketched a picture of what you are heading towards.

The idea is to create a set of rectangles that show coloured blocks. These will range from 100% to 0. In other words, we have 10 coloured blocks, plus the 0 valued block. Your sketch (with functional labels) could look like the below image.

Now complete the other parts of the Critical Thinking Sheet.

1. If you have not done so already: print out the Critical Thinking Sheet. Complete the problem, name and add today’s date, and explain the challenge part ①
2. In panel ② make a sketch of the problem output, and annotate the diagram.
3. In panel ③ you can explain the main components of the system. In this challenge there are three main aspects: (i) the shape that we will plot, (ii) the colour that it will be, and (iii) the position we will place it in.
4. In panel ④ we can now explain the process (algorithm).
5. Finally, consider what to do next. Definitely we need to think more about the colour model (HSB), how to print in PDF and move down the page.

We can break the code into firther steps.

• We need to setup the page, colour model used, and size of workspace.
• We need to place one set of coloured rectangles; to make sure
• We can then place each of the other sets of coloured rectangles.
• Finally define the PDF output.

### Step 2. Setup the page and colour model

By now we should be able to do this easily. We need to define the `size(..) `of the page, and the `colourMode(..)`. Because we have 11 blocks of colour, and will be doing it six times down the page, we can work out the size. Let us assume that each block is 40 by 40, we can calculate the size to be `size(440,240;)`. Also, for convenience of coding, let us choose the HSB colour model, and set each part of the model (hue, saturation and value) to 100. This will mean we can use the loop-variable *10 to give us the colour value, and loop-variable * 40 for the position.

In addition, let us turn off the stroke and set the background white.

``````size(440, 240);
noStroke();
background(255);
colorMode(HSB, 100, 100, 100);``````

### Step 3. Place one set of rectangles.

Let’s add the rectangles to the code. Remember from before (e.g., the coloured grid exercise), and how we thought about the grid and coordinate system. In this case, it is easy, as we only want to control the x positions along the page, because the y values are fixed width). Let’s start with the grey rectangles.

``````//grey colour values, change hue (grey)
for(int i=0; i<11; i++){
fill(i*10);
rect(i*40,0,40,40);
}``````

## Step 4. Place 5 more sets of rectangles

The next stage is to place each of the rectangles. First, though, we need to move down the page. We know that the rectangles were 40 by 40, so we need to move down the page by a value of 40. We can use translate to do this step.

``translate(0,40); // move down the page by 40``

So we have a group of coloured blocks, followed by the translate command.

For the first block, change the hue. For the next three blocks change the saturation (of red, orange and yellow). For the sixth set of blocks, change the value.

``````//grey colour values, change hue (grey)
for(int i=0; i<11; i++){
fill(i*10);
rect(i*40,0,40,40);
}

// Rainbow colour blocks, change hue
translate(0,40);
for(int i=0; i<11; i++){
fill(i*10,100,100);
rect(i*40,0,40,40);
}

// Red to white colour blocks, change saturation
translate(0,40);
for(int i=0; i<11; i++){
fill(0,100-i*10,100);
rect(i*40,0,40,40);
}

// and so on``````

Now try to make them appear as the picture. You will need to have some start from 100% and others from 0%.

### Step 6. Add in the PDF print

The final stage is to add in the commands to output the screen to PDF. There are some nice instructions on the Processing.org website, have a look at PRINT by Casey Reas. Following the exercise “Example 2: Render to screen, export to PDF” the instructions are simple. We need three things:

1. Import the PDF libraries:
`import processing.pdf.*;`
2. Start the PDF print, and choose a file name: `beginRecord(PDF, "line.pdf");`
3. Finally, end the recording:
`endRecord();`
``````import processing.pdf.*;

size(440, 240);
beginRecord(PDF, "line.pdf");   // Start writing to PDF

noStroke();
background(255);
colorMode(HSB, 100, 100, 100);

//grey colour values, change hue (grey)
for(int i=0; i<11; i++){
fill(i*10);
rect(i*40,0,40,40);
}

// and the rest of the coloured blocks go here
// ...

endRecord();``````

The screen will be recorded in the “`line.pdf`” file that is located in the Sketch folder of Processing.org.

## Activity 2. Mapping these colours against an array of values

Now we have the basic code, we can extend it. What we want is to plot the same data in each of the sets of colours; in hue, grey, red, orange, yellow and blue-value.

In order to achieve this, we need to create a data store. We will use an array. Let’s use a fixed array and set the values in three parts, as follows:

``int myDataArray[] = {0,1,2,3,7,6,5,4,8,9,10};``

Now wherever we defined the colour, we can do the same, but from `myDataArray[]`. Therefore the colour hue, red and yellow will be:

``````// Rainbow colour blocks, change hue
fill(myDataArray[i]*10,100,100);

// Red to white colour blocks, change saturation
fill(0,100-myDataArray[i]*10,100);

// Yellow to white colour blocks
fill(20,100-myDataArray[i]*10,100);``````

Let us first think about the mapping of the data.

In these exercises we have mapped data (stored in our `myDataArray`) to colours. We have allocated low values to a low saturation, and high values to a high saturation. We have mapped this in a linear way. The values are proportionally allocated to colour attributes. This is the same as considering percentages. Indeed, we made our lives easier by setting the attributes of the HSB colour model to 0..100, and the data values to proportions of 100.

Obviously if we have different colour ranges we need to map the colours into these ranges (e.g., if we use 360 degrees for colour hue, we need to map into 360). Or if we have different ranges in our data, we need to map them appropriately.

Let us now look at the results a little deeper.

From these screen shots, it is clear that there are three parts to the data. Some of these transitions are easier to observe in some colour attribute mappings. For instance, it is easier to see the ranges in red and orange, and possibly also grey. But the data is more challenging to perceive in yellow, and in a black-value change (the last blue line). They are also difficult to observe in the sets of rainbow colour blocks.

Different colours appear in brilliance. For instance, a pure saturated yellow is very light. It is not possible to get a dark yellow. Whereas saturated blue is very dark (as can be seen from the pictures).When red is dark we can see a vivid colour, while when it is lightened it loses its radiance. In addition, the rainbow colour map shows that the high value  and low value  have the same colour, which can be problematic when trying to understand maximum and minimum values from a dataset.

## Go further

1. Try to change the data.
2. Perhaps create a 2D dataset, and plot the following values.
``````0,1,2,3,7,6,5,4,8,9,10
1,2,3,7,6,5,4,8,9,10,0
2,3,7,6,5,4,8,9,10,0,1
2,3,7,6,5,4,8,9,10,0,1
1,2,3,7,6,5,4,8,9,10,0
0,1,2,3,7,6,5,4,8,9,10``````
1. Investigate different hue mappings.
2. Make the data grid much smaller, and plot many more points of data.

Also, take a look at the problems with the rainbow colour map. There are some interesting articles, such as the following ## By Jonathan

Jonathan is constantly designing things, educating people, and always learning. He is professor of visualisation at the School of Computer Science and Electronic Engineering, Bangor University, U.K. He leads the Visualization, Data, Modelling and Graphics Group (VDMG), leads project rainbow and is an author of the Springer book "Five Design-Sheets" sketching design method.

This site uses Akismet to reduce spam. Learn how your comment data is processed.