Editable Graph Visualization for CSIS

Asterisq recently completed a Drupal-backed graph visualization project for the Center for Strategic and International Studies (CSIS). They came to us looking for an interface which encouraged users to explore their dataset of people, organizations, and political events related to Lebanon. Besides the intriguing data, the project was also interesting because of some special requirements.

Content Managed Graph Data

The CSIS needed a content editor which made it easy to add and remove nodes and connections in the visualization. Further, each node was associated with a hierarchical category, images, and descriptive text which could contain links to other nodes. In the interest of rapid development and keeping the budget down, the powerful open source CMS, Drupal, was used.

An autocomplete form makes it easy to create edges or links between nodes in the graph visualization.

Drupal had to be customized with a "bilateral node reference" module that turned one-way node links into two-way connections. That way, when a user adds a reference from node A to node B, it's visible on both nodes. This means less work for the user and no duplicate connections in the dataset.

The result was a friendly UI for entering and maintaining the data used in the visualization.

Presenting from a CD

CSIS also decided they needed to be able to present the visualization offline using a CD. We used Server2Go to start a web server which would run off the disc and load up either the Drupal content editor or the visualization itself, depending on the configuration. It's a great piece of donation ware which works with MySQL, Apache, and PHP. This feature would have been a lot of work without it!

The Graph Navigation Interface

The interface itself was quite powerful and had a lot of features:

• Full text searching built on Drupal's search module. Clicking the search result takes you to the node.
• Textual description that displays basic HTML and has links that jump to other nodes in the graph.
• A list of thumbnails and a full-size image in the sidebar.
• History functionality, including a shifting animation which makes navigation less disorienting.

The graph visualization was only required to show the selected node and its neighbors. However, often there would be too many of them to put in a simple ring so instead, a sunflower-inspired packing algorithm was used. The resulting layout makes good use of the space and gives the visualization an organic appearance.

Happy Clients

This was a big project with a few twists but Asterisq was able to keep up with the feedback and requirements. We're proud to say that the folks at CSIS were very pleased with the result and were excited to have an interface which was "better than we had imagined."