Lab #9
Building a GUI Visualizer in SmallTalk (part II)

Description

This lab is following Lab 8. In this lab, you will learn how to use color in information visualization.

The Basic Principles of Color

There are three basic colors: red, green, and blue. Every color can be represented by their red, green, and blue components. We call the triplet of those three values the RGB value of this color. For example, RGB (1,1,1) means white. (0,0,0) means black. (1,0,0) is red. (1,1,0) is yellow. (1/2, 1/2, 1/2) is grey. What are (1/2, 0, 0) and (1, 1/2, 1/2)? Right, they are dark-red and light-red respectively.

Using Colors in SmallTalk

First, you file in the code you generated last week.

Now, in the showAt: withSize: highest: method of Bar class, change the line 

	gc displayPolygon: aBarShape at: index * x @ 0
to: 
      	color := ColorValue red:1 green:(index/5) blue:(index/5).
	gc setPaintToColor: color.
	gc displayPolygon: aBarShape at: index * x @ 0.
	gc setPaintToColor: ColorValue black.
and run Visualize demo. You will find the color of each bar changes from red, to pink, to white. (for the reason of the screen, you might see some colors which do not like a kind of red very much.) We can use the color to visualize another information besides the information visualized by the height of bars.

We want it to work in this way: if the the demo is changed to: 

	v := Visualizer new data: cities.
	v setName: #names.
	v forHeight: #meanness.
	v forColor: #avetemp.
	v show.
and we do the demo, the average temperature is mapped to color. What the visualizer does is
  • figure out that there are five entries in avetemp,
  • map those to five vertical bars in the visualization window,
  • map the entry with highest avetemp to red, the entry with lowest avetemp to white, and the entries' "redness" is proportional to their avetemp,
  • display the corresponding vertical bar to the color mapped. This allows us to look at two different measures at once on the same visualization to see how they might correlate (e.g., do "mean" cities have similar average temperatures?)

    Hints:

  • another instance variable for Bar class is needed to store its color information;
  • not only the maximum but also the minimum of the values binded to colors are needed for the color mapping;
  • remember, only change the colors of bars, and keep the text and "zero" line in black.

    After your program works, try to use "yellowness" instead of "redness" to represent avetemp. You need only change a little.

    Turning in the Code

    OK, that's all. Go to the system Browser and select the category holding the Visualizer classes. Choose the middle-button menu item File Out and type a file name (or the default category name) when prompted. Mail this file to TA.

    cat Visualizer.st | mail -s "lab 9 - YOUR NAME" cs2390@prism.gatech.edu

    Please quit from VisualWorks before you logout.