At first glance, the data was overwhelming, and in its current state, somewhat uninterpretable. We wanted first and foremost to create an application that distilled the information into a form that was both easy to read and simple to navigate. When analyzing the data we noticed that each of the networks could be conceived as a directed, acyclic graph. This insight made it simple for us to model the interactions of the supply chain as a series of javascript objects that passed items between each other. We used graph traversal algorithms in order to identify the sources of monetary and temporal cost required by each of the processes used in the creation and delivery of a given product.
We used a force directed graph to represent stages. Different colors were given to the different types of stages, and different sizes were given to each node based on the number of items flowing through the node per day, as determined by the demand in sink nodes. When a user touches a node, the connections to it are highlighted and more info including the number of items flowing through it is displayed.
In order to create modular apps and ease deployment we chose to write the majority of the code using ES6 and transpiling with Webpack. This allowed us to be confident that the code that we were writing and testing on our laptops would be behaviorally identical when running on the iPad. In order to handle touch events we used d3, a data visualization framework that easily generalizes to touch-based interfaces. This choice of library allowed us to develop for visual clarity first, and not have to think too much about the nuances between a touch-based and mouse-based interface.
Built With
- d3.js
- es6
- webpack
Log in or sign up for Devpost to join the conversation.