This visualization was my group's second project for CS 424.
The purpose of this project was to take official HURDAT2 data and create a meaningful visualization to help explain what the numbers were showing. The project also needed to support UIC's EVL wall, a 32:9 aspect ratio display made up of 18 capacitive touch monitors.
This data contained thousands of entries for both Atlantic and Pacific hurricanes within the last 100-200 years that needed to be processed into something more efficient and legible for our visualization.
A more detailed write-up containing our findings, roles, and more can be found on my group member's project page.
A major role of mine in this project was to create the layout and user interface to meet the requirements of supporting UIC's EVL wall mentioned above. As a result, I attempted to be as space efficient as possible by removing the need for the user to scroll in our application.
With that in mind, I designed the UI to have the following features:
Inputs
All filtering inputs can be found on the left sidebar of the application
The different filtering options are found within a tab system at the center of the sidebar
The list of hurricanes matching the current filters are also found in a tab system directly below the filters themselves
Graphs
The line charts for maximum speed and minimum pressure occupy the same location in the UI and can be toggled through the tab above them
Maps
Separate maps for Atlantic and Pacific hurricanes to allow for direct comparison and to avoid performance issues on a single map
Map inputs exist solely on the maps themselves to prevent confusion with sidebar inputs for entire application
After UI, my biggest contribution is the functionality of the two maps. Each map is dedicated to an ocean and contains a multitude of features written below:
Reset zoom option if the user gets lost panning or zooming
A toggle switch for enabling or disabling the hurricane heatmap
Three map styles to choose from such as a geographical representation
Dynamic pressure scale based on currently shown hurricanes
Hovering over a hurricane path both highlights the hurricane and identifies it
Hurricane points are colored and sized relative to their wind pressure and speed, respectively
Clicking on a hurricane point reveals some information about that point such as:
name of hurricane it belongs to
category of hurricane
latitude/longitude location
speed in knots
pressure in millibars
date and time of recording
In addition, I also helped with creating the functions for filtering the data in several ways such as ordering the hurricanes chronologically, alphabetically or by wind speed given a range. I've also created a small script to quickly and seamlessly update our server that hosts the project with the most recent code from our repository.
The remainder of the major project functionality such as the charts, data processing, and dynamic reactivity was handled by my group members.
The source code can be viewed on GitHub.
The application itself can be found here on shinyapps.io or the UIC EVL server (if it's still active).
Full view of our visualization as it would appear on the 32:9 EVL wall.