Abstract
The College Affordability Model system began as an idea exploration system, and evolved over the past three years into an actual product for legislators and policymakers. It helps users to explore how much the students and their families can use from the most common sources of funds to pay for college, and the potential debt they would assume.
Over years of development, the current system went through a phase of lack of modularization and encapsulation where developers must parse through sparsely documented and redundant code when maintaining and developing the system. This problem was recognized in the backend, and the system went through an architectural revival in previous projects. However, the frontend continues to be challenging for developers where both architecture and user interface (UI) need to be replaced. This project aims to design and develop a web framework for interactive data visualization system, and use the framework to revamp the front-end architecture of the College Affordability Model project. In these ways, the software development efficiency and front-end user experience of the website can both be increased.
By adopting concepts from existing Business Intelligence (BI) system, the framework uses Page, Visualization, Data Source and Parameters in the Object-Oriented Design (OOD). Additionally, the framework supports friendly user-interface extensions to provide more advanced features including: draggable chart, URL parameter binder, and a spreadsheet-like table editor. The underlying architecture of the framework is based on the Model-View-ViewModel (MVVM) design pattern that modularizes UI elements into components and provides Single-Page Application (SPA) user experience. The publisher/subscriber messaging and action/reducer patterns are adopted to simplify the inter-communication between loosely coupled components and to formalize the message and state transition of the application.
The project implementation was based on an agile model in managing the development lifecycle, and went through two iterations of development, testing, release, and feedback. The data visualization framework is delivered as an Angular module with unit tests, documentation and is ESLint compliant. The framework is applied and verified in the College Affordability Model website where the front-end system architecture is refactored and new features deployed. In general, the framework simplifies and accelerates the process of building any web-based interactive data visualization system especially for researchers who do not have web programming experience.