User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a directed weighted graph such as:

edge(A, B, 1)
edge(A, C, 3)
edge(B, A, -1)
edge(B, C, -1)
edge(C, A, -2)
edge(C, B, -4)

So I created an html table matrix where I use rgb(normalized_weight* 255/ min_max_diff, 0, 255- normalized_weight* 255/ min_max_diff) as color. That gives me a bright red when weight is high and bright blue when it is low. Shades of purple for in-between values.

The problem is when I have a 500x500 matrix and the boxes 1.5 cm wide on the screen (because column headers are so wide), people get lost in the matrix looking for the bright colors.

So I need some sort of user interface for them to easily nagivate inside the map and find interesting regions.

I was thinking of a minimap, but 500x500 already covers half the screen. What can I do to ease navigation and provide guidance in this huge table of colors?

Here's what the matrix currently looks like:

enter image description here

share|improve this question
Does your matrix is the incidence matrix? What do you mean under interesting regions? Can you provide some screenshots? – Alexey Kolchenko Jun 22 '13 at 2:33
@AlexeyKolchenko yes, it is the incidence matrix with weights, but it shows colors instead of numbers. Adding screenshot now. – pwned Jun 22 '13 at 5:47
Interesting boxes are the ones which have brighter colors (red or blue, not purple) – pwned Jun 22 '13 at 5:53
up vote 0 down vote accepted

Possible solution is:

  • Display the whole matrix on a screen
  • Use interactive visualization controls, see image

enter image description here

share|improve this answer
OK this gave me an idea. I add your positive/negative filters to the page and a minimap to navigate to their exact location – pwned Jun 22 '13 at 6:51

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.