TrainWiz — Interactive tool for finding trains to your next getaway!
Our mind is a super computer made of several interconnected networks, capable of doing the most complex operations. Yet, we humans always abstract information in our own ways. Such simplifications of information let us comprehend complex concepts. For instance, the most simple example of water as a compound is better understood as 2 parts hydrogen with one part of oxygen rather than getting into the technical specifications.
This behavior can be observed well in pathfinding. Whenever we try to recall routes of travel, we ignore the path but we remember the points connecting to the destination. Such level of abstraction lets us remember even the most difficult routes with ease.
According to Cleveland pattern perception, the key operations for making an effective visualisation are detection, assembly, and estimate. While the first two operation critical for the visual representation of the visualization, the estimation operation deals about how user’s can compare, estimate and rank information from the viz to seek insights and eventually knowledge.
I wanted to build a data viz that works on the same semantics of pathfinding. Representing travel information as nodal graphs. Just like we move from one place to another, we can parse on a node to another to find information. This allows the users to simultaneously compare and find a relation between two routes/trains. The objective of the visualization was to create a tool to find all the trains from stations of Mumbai to the travel destinations in Maharastra.
Using the Data
To go about making the visualization, I used the ISL train wise data from data.gov. It’s a CSV that gives the list of trains with their source, destination along with their intermittent stopping points. Using this list I found the trains going to/passing by the tourist destinations in Maharastra. I applied several filters manually on the data and made a separate file, now it’s time to code them. The data set can be found here.
Using Springy.js
I used an open source library called Springy.js to make the nodal graphs, it’s a really interesting graph layout calculating algorithm, meaning I can draw any type of graph after calculating the layout using this library. I used the default rendered for the scope of this project. After creating the base graph, I defined an on double-click() function on all the nodes that could expand and added further nodes to the graph. Also to have a narrative going in place with the visualization, I labeled the edges with verbs describing the action. I used color schemes to separate the different categories of nodes. Although, on expanding several nodes makes the graph looks cluttered, the force directed nature of the graph lets the user interact with the graph and the graph reacts in accordance to real world physics constraints.
Final thoughts
Although, I’ve fulfilled my objective of the project, there is more scope for adding visual elements to the viz to make it more interesting. Adding Images, sounds and hover animations will improve the experience for the users using the tool. All the code and data set used in the visualization can be found in the js.fiddle link below.
