CS 251: Assignment #4

Interactive Visualization III

This assignment covers the details of the interface. This week you'll create axes for the data, enable the user to select a color palette to show a third dimension, and make labels showing the user where they are in data space.


You should start this week by making a copy of your python program from week 3. Alternatively, you can download the skeleton file for project 4. You can also get the ViewRef class on request.

  1. We want to add a border area around our data window to ensure we have space to draw axes, labels, and a legend. We can do this by making a small modification to our view transformation process.

    Add the field viewoffset to your ViewRef object, and make it a list with two values (x and y). Initialize the values to something like 50. In the last step of your view transformation process, add the viewoffset values to the final translation step so you are translating by the view plus the viewoffset. Note, from now on you will need to make the view parameters smaller than the window size. A good size is the window size minus two times the view offset. Test this out and see if your system plots with a border.

    Note, this may affect your rotation code if you were using view/2 to calculate the central rotation point. The point about which you want to rotate the data is [view[0]/2 + viewoffset[0], view[1]/2 + viewoffset[1]].

  2. One of the things users like to do is enlarge or change the shape of the window. We can ask Tk to alert us when the shape of the window changes and update the view.

    Bind the tag <Configure> to a method handleConfigure. You can access the window size by using the Tk methods winfo_width() and winfo_height() on the root Tk object (which is also the main window in our program).

    The parameter that changes with the window size is the screen size (view) in the view pipeline. Update the view pipeline and then update the data whenever the view changes. Note, you may want to further restrict the minimum and maximum window sizes.

  3. Add axes or a box around your view space. Have the axes adjust when the window size changes. The axes should not move when the data moves. You may want to make a GUI object that holds all the information required to draw the GUI and stores the visible objects in a list. In any case, think a little about how you want to organize non-data visual elements in your window. They need to be able to update whenever the view coordinates change.
  4. Add text to at least two corners of your visualization that specify the location of those points in the data space. For example, consider the lower left corner of the view window. That corresponds to a point in the data space that is in the view plane and offset from the VRP by extent[0] in the U direction and -extent[1] in the VUP direction. Likewise, the lower right corner of the view window is offset from the VRP by -extent[0] in the U direction and -extent[1] in the VUP direction.

    To generate the text for those two points, you can use the expression

    "(%.2f, %.2f)" % (x, y)

    where x and y are the coordinates of the point. To make text, use the Canvas method create_text.

    self.canvas.create_text( x, y, text="my text" )

  5. Below the horizontal axis in your view window, put the current direction of the -U axis (which is the vector pointing horizontally right in the view plane.
  6. Implement a method updateGUILabels() that uses the current view parameters to recalculate the labels you made in the prior two steps. Add a call to updateGUILabels() to each of your button motion functions. Now the coordinates should update properly as you scale, rotate, or translate the data. You can use the canvas method itemconfig to update the text of a text object.
  7. Implement red-green and yellow-blue coloring of a third dimension of the data set. The default setting should be to only show two axes. Let the user somehow select they want to view three axes and pick the color scheme. You will then need to pick a method of selecting a range for mapping the data onto the color space. You can start by using the min and max values in the dimension to set the range. As an extension, you can implement other methods.

    Think about how you want to organize the color mapping aspect. You probably want to create a method colorData that takes the current view parameters, the current data, and any other information and sets the color of the data points. You can use the canvas method itemconfig function to update the color of a data point.

    Given RGB values between 0 and 255, you can build the string required by Tk to set the color using the following expression.

    rgb = "#%02x%02x%02x" % ( r, g, b )
  8. Finally, create a legend for the color scheme, which should be a vertical bar on the right side of the view window that goes from one base color to the other and has labels for the data values at the two ends and at the midpoint. If you have cutoffs (e.g. all values below a certain value are full green) indicate that in your legend. The only time these labels change is when the dimension being displayed using color changes.
  9. Test out your system on the following data file. Plotting indices 0 and 1 spatially and index 3 in color should produce a nice plot with structure.


Some of these are holdovers from last week. If you've already implemented them, try something else. You're free to come up with your own if you have ideas about how to make your system better.


The writeup for each weekly project should be a brief summary of what you did along with some screen shots, graphs, or tables of results, depending upon the assignment. Please organize the writeup as follows.

  1. Title of the project and your name
  2. An abstract describing what you did in 200 words or less.
  3. A brief description of code you wrote or analysis you undertook for the project.
  4. Figures, screen shots, graphs, tables, or other results.
  5. A brief description of what you learned.


Make your writeup for the project a wiki page in your personal space. If you have questions about making a page, stop by during office hours 1-3pm on Mondays or Tuesdays.

Once you have written up your assignment, give the page the label:


Do not put code on your writeup page or anywhere it can be publicly accessed. To hand in code, attach it to an email and send it to the prof. Please do not copy the file into your email, but keep it as a separate attachment.