HURDAT2 Visualization [2020]

Concept

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.

Contribution

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.

Release

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).

Specifications

  • R (programming language) for preparing, cleaning, and plotting the data

  • Shiny for visualization functionality

  • Leaflet for map interactivity

Full view of our visualization as it would appear on the 32:9 EVL wall.