1

I have to visualize software project dependencies and provide a way to navigate through the dependencies. I want to combine showing the dependencies of the currently selected project as well as projects that depend on it. So there are basically two directed trees connected to a graph to show.

After some searching on the web, I developed my idea of a solution, which I post as an answer. I am looking forward for you alternative solutions and / or comments.

Improve this question
1
  • This would be a great question for infographics.stackexchange.com (or dataviz.stackexchange.com) Too bad it doesn't exist :(
    – Rahul
    Apr 6, 2011 at 23:34

3 Answers 3

Reset to default
1

I can think of at least two approaches from classic project management that could help here. I used to do UX design for Microsoft Project (a long time ago), so that's why I'm biased into looking at some of those long-established styles.

Before I get into specifics of layout and drawing, though, I will implore you to limit chart junk--extraneous lines and edges that don't communicate any information. I know that your ASCII art is just illustrative, so I'm not trying to critique it. However, it's easy to fall into drawing lots and lots of boxes so that the edges of the boxes (which are usually information light) end up taking up lots more mental space than the contents (which are usually information dense). Whatever approach you take, make sure that anything that's a line or edge is really a useful bit of information, and consider how shading, whitespace, and other techniques can communicate information, too.

One is to use a PERT-style chart (really a graph). This shows each project or task as a box and lays them out so that predecessor tasks are to the left, successor tasks are to the right, and links them with arrows. You can change the style of the box to show different properties of tasks--like using color, shape, icons, or other decorations to show project, complexity, duration, number of resources, and so on.

I would draw you an example, but a Google/Bing for "pert chart" will show you lots of different variations, and it sounds like you're trying to cast your net wide, rather than see specific applications at this point.

Another idea, which is a bit more focused on task duration, is to draw a Gantt chart and show arrows between the bars, reflecting the dependencies. Again, there are lots of great examples with a web search for "gantt chart," so I won't try to draw anything here.

You can also try a hybrid approach, where the width of your boxes is determined by something like duration or hours of work, or the left edge of the boxes is determined by a rough start date or milestone.

You mentioned tooltips, and these are a great way to show more information, too. There is likely some deeper data which can help inform understanding of the project, but would pollute the overall display. Being able to hover and see more, or to click and get a popup of properties, might help you balancing depth of information against simplicity of display.

Improve this answer
0

My concept is to combine two Icicle tree visualizations ( example: http://thejit.org/static/v20/Jit/Examples/Icicle/example2.html ), one growing upwards and the other one downwards. Below you can see a small illustraion of the concept. Imagine if you clicked on TikiWiki, it would become the current project and all of its dependencies will be shown.

                                +-------------------+-----------------+
                                |  TikiPlugin A     |    TikiPlugin B |
+-------------------------------+-------------------+-----------------+
|     MediaWiki 1.0             |         TikiWiki    2.1             |
+-------------------------------+-------------------------------------+
| ########################## php 5.0 ################################ |
+--------------+------------------+-----------------+-----------------+
|  sqlite 2.8  |  libdmcrypt 2.5  |  c-client-2007  |  apache 2.2     |
+--------------+------------------+-----------------+--------+--------|
|     ...      |                                    |  ...   |   ...  |
+--------------+                                    +--------+--------+
|     ...      |                                    |  ...   |
+--------------+                                    +--------+

Pro: Good overview of total number and depth of dependencies.
Con: Too less for deeply nested project labels. Can be addressed with tooltips.

Improve this answer
0
  1. to paztulio - looks great!
  2. i think an overview would help for the orientation (to see where you are) http://designinginterfaces.com/firstedition/Overview_Plus_Detail
  3. i would add an "active" style, to distinguish it from other items.
Improve this answer
2
  • I like your idea of an overview. But wouldn't that be confusing, too? Semantically, an overview would be the full dependency graph, not just two trees for the current project. I assume you want to address the label-space-problem with the overview? So I might allow to zoom into the tree at a given pivot. Nevertheless, I think the value of the small overview would not be very high. All you see are tiny boxes. If it was a map, you would see useful things like country oulines, but it isn't.
    – paztulio
    Mar 26, 2011 at 12:18
  • You inspired me for another idea: I could add a listbox with the navigation history. So you can jump around fastly. It would solve (at least make it better) same problem like zoom would. But I am not sure if users figure out to use it in this way.
    – paztulio
    Mar 26, 2011 at 12:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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