State Department Hierarchy Visualization

This the project page for my State Department Organizational Chart Visualization. You can see the visualization here.

One of the biggest challenges for visualizing trees of any size is that they tend to grow wide much more quickly than they grow deep.

The U.S. State Department makes for a great test subject. Each level of offices and administration has a number of sub-offices helping it perform its mission.

Using the Javascript Information Visualization Toolkit I built a spacetree graph structure representing the State Department’s Organization Chart.  I then saved all the administrator pictures by hand and photoshopped them into the circular crops in the final product.

The JIT clearly wasn’t quite designed for this style of hierarchy chart, but it did an admirable job, especially considering that the use of excanvas to compensate for Internet Explorer’s lack of a <canvas> tag isn’t formally supported.

I did a little javascript heavy-lifting to eliminate the background boxes that are pseudo hard-coded into the JIT, and adding minor touches such as the indicators for child-nodes and some intelligent text-padding.

In the future I’m hoping to find a way around the right-click links getting blocked by pop-up blockers.

Overall I’m fairly happy with it for two nights’ work, although if I was more of a masochist with regards to excanvas I’d add zoom and pan controls a lá google maps.

Anyway check it out and feel free to contact me to let me know what you think!