ABE: process flow explorer

A prototype studying the possibility to construct a process flow diagram dynamically

In her masters thesis "SITUATION AWARENESS IN URBAN PLANNING – Case: Mobility Planning Decision-making in Otaniemi campus and T3 area", Susa Eräranta analyzed how urban planning decision-makers perceive various projects’ position in the overall urban planning and development process of an area and the connections between various projects influencing each other. She created complicated vizualizations depicting the cross-connections between to help understand the complex system.

Although such vizualizatinons are highly informative, they are rarely in used real world scenarios as creating and updating these graphs is a tedious task. This application represents some of the first steps in our attempt to make the generation of such visualizations easier and more dynamic, which is expected to allow for a group of people to come together and create and update such graphs in one sitting.

Process flow explorer diagram is generated dynamically from data stored in an editable Google spreadsheet as value pairs defining the edges of the graph. A short javascript routine fetches the data from google servers and creates a DOT formatted string, which is then parsed using graphlib-dot and visualized using D3 and Cola libraries.

The application tries to optimize the network to be as easy to read as possible, but with complex graphs it's a challenging task. You can help the algorithm by dragging nodes. Use left mouse key to pan and mouse wheel to zoom the graph.