zeynepandsoy/dash-traffic-app

comp0034-cw1-i-zeynepandsoy created by GitHub Classroom

COMP0034 Coursework 1: Traffic Monitoring App (Dash)

To set up the project:

1. Clone this repository in your IDE (e.g. PyCharm, Visual Studio Code) from GitHub. Follow the help in your IDE e.g. clone a GitHub repo in PyCharm.
2. Create and then activate a virtual environment (venv). Use the instructions for your IDE or navigate to your project directory and use python.
3. Install the requirements from requirements.txt. Use the instructions for your IDE or the pip documentation.
4. Edit .gitignore to add any config files and folders for your IDE.

Set-up instructions

To run the app, execute 'python multi_page_app/app.py' in your IDE terminal.

Functionality & Context of the Application

The traffic dashboard application is intended for comparison of different elements and revealing relationships/connections between different features that impact traffic volume. The app is designed as multi-page to address the needs of both target audiences -general public living/working proximity to I-94 and environmental policymakers/researchers. Specifically, app1 focuses on comparisons between impacts of different date time features on traffic volume and app2 mainly focuses on revealing relationships (comparing) between categorical features and traffic volumes. Though it does not have to be the case, app 2 is more recommended to researchers as it creates a platform where additional graphs can be easily plotted further manipulating the desired features while app 1 is relatively more straightforward to use.

Dash app is initialized in app.py where I used a Dash Bootstrap theme; Flatly, to achieve a consistent theme on all the pages. To maintain consistent styling, I wrapped the layouts with HTML elements in dbc containers and achieved interactions through the callbacks. The app has 3 pages which are linked through a navigation bar (in ‘app.py’) fixed at the top of each page. Paths of each page are linked to the URLs of the navigation bar items, home page path which displays the initial view of the app is defined as ‘/’.

2nd page (app1) consists of 2 tabs; both tabs visualize traffic volume over different date features. Tab 1 - plots 2 types of distribution plots based on user input, user can either choose box plot which is more intuitive or a violin plot which provides more insight into the distribution, the option of distribution plot is displayed as a Radio Item (only one can be selected). For both plots in tab 1, though y axis is fixed to be traffic volume, date feature provided for x axis is subject to user choice (year, month, day ,hour), and are provided as checklist items (multiple options can be chosen to see relationships of date features). Tab 2 - aggregates traffic volume over different date features and plots a line chart. Options of date features(x-axis) which are displayed as dropdown options are year, month, day, hour and datetime. Dash core components dcc.Markdown and dcc.Graph are initialized as empty as they will be curated based on user selection from dropdown menu.

3rd page (app2) – uses dash dynamical callbacks (a.k.a. Pattern Matching Callbacks) to generate new charts using an html button. Dynamic callbacks allowed me to create callbacks for every set of inputs and outputs that don’t yet (originally) exist on the app (as through the add graph button, users can add as many charts as they want, the inputs of these charts don’t yet exist). Only for use in the 2nd app I created a new column in the data frame called ‘traffic density’. This column was generated by dividing each subsequent traffic volume record by the mean of all traffic volumes recorded. Though plotting the density of each traffic observation doesn’t yield a difference in any ratio compared to traffic volumes, it provides a different scale for traffic observations that may be more preferred by professionals. Users can choose the type of graph they can plot from 3 radio item options: bar, line, and pie chart. 1st dropdown accepts multiple inputs from unique values of the column categorized hour, x-axis options are also presented as a dropdown with options of categorical features; categorized hour, categorized weekday, holiday and weather. Similarly, the selection of y-axis; that is either ‘traffic volume’ or ‘traffic density’ is presented as a dropdown option.

Compared to regular callbacks, dynamical callbacks allow the users much more flexibility and control over the graphs and web components inside the dashboards. For instance, the functionality that allows the generation of new plots is done through dynamical callbacks (initial layout of the page only includes a button). In dynamical callbacks, the input of dropdown options is instead of strings, dictionaries (component ids) consisting of type and index. All dcc components have been defined with an index of n_clicks (number of clicks on ‘add chart’) and in the dynamical callbacks the component ids are MATCHed with the component properties. As each interactive component is matched with the number of clicks to ‘add chart’ button, users can generate and compare multiple figures at the same time by playing around with almost every element of the figures. This encourages especially researchers to take control over the types of relationships they wish to explore in more in depth and easily spot and discover patterns with the functionality to see numerous graphs fitted in the same screen.