Shadows in the Rain
An application that visualizes hurricanes.

Overview

Shadows in the Rain is a web application that plots and plays back hurricanes from 1800s to 2010 in Atlantic and Pacific oceans on a map. It also plots graphs for hurricanes in Atlantic vs Pacific oceans based on wind speed, pressure, etc. You can use the controls to filter the hurricanes based on time, wind speed, pressure, etc. The hurricane playback can be paused, and the playback speed can be increased or decreased.

An overview of the application showing the plotted hurricanes and their corresponding graphs.

Softwares/libraries used:

  • 1. HTML, CSS and Javascript - The regular stuff we use to build awesome web applications.
  • 2. D3.js - A Javascript library to visualize data.
  • 3. Leaflet.js - A Javascript library for building interactive maps.
  • 4. Mapbox.js - A Javascript library that provides layers that can be used on the map.
  • 5. LESS CSS - A Javascript library to write efficient CSS.
  • 6. The Noun Project - For a few icons in SVG format that we customized.
  • 7. XAMPP - A free, easy to install Apache distribution containing MariaDB, PHP, and Perl.
  • 8. PHP, MySQL, PHPMyAdmin
  • 9. NYTimes Top Stories API - The world's most popular open source database.
  • 10. Sketch - The #1 tool for UI and Wireframing.
  • 11. Brackets - Code editor.

How to Use

Controls:

  • The controls menu is where the app lets user choose various option on which a list of hurricanes is plotted on the map.
  • 1. The side bar lets user select hurricanes from central pacific, north east pacific ocean, atlantic ocean or all of them.
  • 2. After selecting the oceans the app also lets user select top 5, top 10 overall hurricanes.
  • 3. Then comes the list of hurricanes populated according to the users choice, Order By option allows the user to order the list alphabetically, chronological order, maximum wind speed and minimum pressure.
  • 4. The "Filter By" option lets user refine the list of hurricanes based on conditions like maximum wind speed, minimum pressure, time as of particular year, season, date, day and date range.
  • 5. The side bar has an order by option which allows the user to order the list (like alphabetically) of hurricanes fetched.

Parameters:

  • Once a selection is made and the update button is clicked, the app displays all hurricanes on the map. The following are the parameters represented:
  • 1. The color depicts the wind speed categorized based on Saffir Simpson scale.
  • 2. The circles depict quadrophonic wind radii.
  • 3. Pressure is depicted using line type - dashed or straight.
  • 4. All these layers can be individually selected or unselected.
  • 5. To see a different set of hurricanes, make a selection in the left panel and hit update.
  • 6. The list box will get updated according to the most recent selection made.

Playing back entire hurricane Seasons:

  • 1. The app allows user to playback an entire season on the map.
  • 2. The hurricanes start showing up on the map the day they were formed and trace the path until it cease to exist.
  • 3. Play,pause, fast forward controls have been overlayed on the map and also a progress bar shows the progress of the playback.
  • 4. Apart from allowing the user to playback the hurricane, the user can also pause at a particular point.
  • 5. Changing underlaying map representation: At any point of time user can choose to change the underlying map representation. On the top right corner of the map is a small icon , which on clicking allows the user to change the underlying map representation. This is useful while viewing different kinds of data.
  • Graphs: Apart from plotting the hurricanes on the map, the app also let's user view data as graphs. There as several graphs that show various types of data.

Source Code, Installation and Data

1. Setting up the server:

  • 1. Download the source code which contains the .php, .js, html and the sql data for the hurricanes.
  • 2. Install wamp to use as the local server for running the application in the local system.
  • 3. Copy the source code folder into C:\wamp\www folder which makes the application accessible from the local server setup by wamp.
  • 4. The source code folder pasted can be tested by opening localhost in your browser.
  • 5. Setup the connection strings in the php files as per your local server which can be found at C:\wamp\apps\phpmyadmin4.1.14\config.inc.php.

2. Setting up the database:

  • 1. Open localhost/phpmyadmin to upload the sql database.
  • 2. Click on export and upload the hurricanes.sql file provided in the folder.
  • 3. Note down the database name to be added in the php files.
  • 4. Open a browser and type http://localhost/<your-folder-name>/ to view the application.

3. Data used:

  • The initial raw data had no standard format. No column names and consistent data was missing for each hurricane.
  • Initial formatting: All values were given a column header to be able to locate and access them with those column names.
  • Extra columns for the name and Id were added to each coordinate of the hurricanes.
  • Blank rows were removed to make the data uniform.

4. Data cleaning:

  • 1. The latitude and longitude values were made integers to enable plotting coordinates on the map.
  • 2. Extra 'N','S','W' and 'E' values were removed from these two columns.
  • 3. The unknown values in pressure columns were changed to a constant value greater than the maximum value to be able to identify the actual minimum value of pressure among all the hurricanes.
  • 4. A total of 1258 hurricanes(1102-Atlantic and 156-Pacific) were unnamed. These hurricanes were named with their respective hid. This makes it simple to identify these hurricanes.
  • 5. All the hurricane names were also appended with the year to make the names consistent with the unnamed hurricanes.

5. Tables:

  • The entire data was setup in 3 tables:
  • 1. Pacific
  • 2. Atlantic
  • 3. Summary (Each column in the Summary table is used as index for the actual data in Atlantic and Pacific tables).
The Summary table consists of the following columns to provide ease of access to obtain the actual coordinates of the hurricanes.
Structure of the Atlantic Table.
Structure of the Summary Table.

Key Findings and Scope of the Application

Findings

  • 1. The radii of damage caused by the hurricanes at each position is as large as a city.
  • 2. Most of the hurricanes donot make land fall.
  • 3. Many hurricanes start and end as a tropical depression.
  • 4. The extent of 34knot wind speed radii is more than the extent of 64 knots wind speed radii. This was observed when the quadrophinic data was plotted onto the map.

Scope

  • After viewing the projects that were presented by the other teams in class, the following points impressed us, which made us think that they would be good to have in our project and would enrich the features that we already have.
  • 1. Show the current wind speed and compare it with the max wind speed of a particular hurricane at each point.
  • 2. Represent the wind speed (currently in knots) in other units that are user friendly (like kms and miles per hour).
  • 3. Show if the hurricane was in Atlantic or Pacific (in the info box below).
  • 4. Allow the user to jump to a particular hurricane in the hurricane list box by providing a search box on the top. This search box should accept hurricane names, years and so on.
  • 5. The hurricane seasons (currently mentioned as only Atlantic or Pacific seasons) must also show the months when they are active.

Team

Gautam Krishnan
Srivatsan Murali
Sumanth Reddy Pandugula
Vivek Krishnakumar

Demo: