Tech Tree layouts for games?

Question

I'm trying to do a tech tree GUI for my game, but i have limited width and the tree has alot of branches, the problem is if I make them small to fit the width, the tech tree is too small to read.

For example the AOE one is very large (in width):

I could allow scroll bar but as its web based, scrolls are quite ugly. So i was wondering how to deal with branches which slowly cause the tech tree to get wider as you go down the tech tree and how you would fit such a design in a limited space.

Are there different known designs for tech trees that any one knows of so i can look at their types. I don't know the names given to the types of tech tree layouts. But am hoping to find one that is not overly complex for the user aswell.

Answer 1

You could use an indented tech tree, assuming you don't have too many layers. It is probably easier to show what I mean than it is to explain it. An excerpt from an example AoE2 tech tree below:

• Barracks (I)

  • Militia (I)
    • Man-at-Arms (II)
      • Long Swordsman (III)
        • Two-Handed Swordsman (IV)
          • Champion (IV)
  • Spearman (II)
    • Pikeman (III)
      • Halberdier (IV)
  • Eagle Warrior (III)
    • Elite Eagle Warrior (IV)
  • Tracking (II)
  • Squires (III)

  • Archery Range (II)

    • Archer (II)
      • Crossbowman (III)
        • Arbalest (IV)
    • Skirmisher (II)
      • Elite Skirmisher (III)
    • Cavalry Archer (III)
      • Heavy Cav Archer (IV)
    • Hand Cannoneer (IV)
    • Thumb Ring (III)
    • Parthian Tactics (IV)

  • Stable (II)

    • Scout Cavalry (II)
      • Light Cavalry (III)
        • Hussar (IV)
    • Knight (III)
      • Cavalier (IV)
        • Paladin (IV)
    • Camel (III)
      • Heavy Camel (IV)
    • Bloodlines (II)
    • Husbandry (III)

• Mining Camp (I)

  • Gold Mining (II)
    • Gold Shaft Mining (III)
  • Stone Mining (II)
    • Stone Shaft Mining (III)

• Lumber Camp (I)

  • Double-Bit Axe (II)
    • Bow Saw (III)
      • Two-Man Saw (IV)

Of course, if you can code the tree so that it is possible to expand the list (eg have the technologies within the Mining Camp hidden unless expanded), and display detailed information (such as cost, time, etc. on mouse hover), you would be able to put even more information into a small space. The only problem with this design is that it still needs a scroll bar, but I have seen some working scroll bars online. Be aware that my knowledge of web coding is rather limited though, so I am afraid I can't help much on implementation.
I hope that helps.
Mmarss

Answer 2

You can use more then one picture ie. your agro advancements can be on one graph wile your writing advancements can be on another and when it gets to confusing to put on 1 graph split them up again