{"id":1270,"date":"2022-01-19T15:46:15","date_gmt":"2022-01-19T15:46:15","guid":{"rendered":"https:\/\/csee.bangor.ac.uk\/?p=1270"},"modified":"2022-01-19T15:46:15","modified_gmt":"2022-01-19T15:46:15","slug":"create-colour-blocks-per-value-introduction-to-mapping-data-to-colours","status":"publish","type":"post","link":"https:\/\/csee.bangor.ac.uk\/projectrainbow\/2022\/01\/19\/create-colour-blocks-per-value-introduction-to-mapping-data-to-colours\/","title":{"rendered":"Create colour blocks per value – introduction to mapping data to colours"},"content":{"rendered":"\n\n\n\n code { background-color: rgba(0,0,0,.05); }\n .linenums { color: #aaa; }\n .linenums li {\n list-style-type: decimal !important;\n font-size: 12pt;\n margin-top: 0px;\n }\n .linenums li:nth-child(even) { background: transparent !important; }\n .wp-block-image { text-align: center !important; }\n .wp-block-image img { display: inline; }\n\n\n\n\n\n

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<\/em>. We will use Processing.org and output the images into PDFs that can be printed.<\/p>\n\n\n\n

The activities develop from previous ones. So take a look at the following activities:<\/p>\n\n\n\n

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

    Activity 1. Blocks of colour, representing different values<\/h2>\n\n\n\n

    In this activity we will create a set of coloured blocks representing different values<\/span>.<\/strong><\/p>\n\n\n\n

    Step 1. plan the picture<\/h3>\n\n\n\n

    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. <\/p>\n\n\n\n

    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.<\/p>\n\n\n\n

    \"Sketch
    Sketch of design for the blocks of value activity<\/figcaption><\/figure>\n\n\n\n

    Now complete the other parts of the Critical Thinking Sheet. <\/p>\n\n\n\n

    \"Critical
    Example Critical Thinking Sheet of the value blocks activity<\/figcaption><\/figure><\/div>\n\n\n\n
    1. If you have not done so already: print out the Critical Thinking Sheet<\/a>. Complete the problem, name and add today\u2019s date, and explain the challenge part \u2460 <\/li>
    2. In panel \u2461 make a sketch of the problem output, and annotate the diagram.<\/li>
    3. In panel \u2462 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.<\/li>
    4. In panel \u2463 we can now explain the process (algorithm). <\/li>
    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.<\/li><\/ol>\n\n\n\n

      We can break the code into firther steps. <\/p>\n\n\n\n