Shadows In The Rain
Data Visualization and Visual Analytics - Project 2

Our Amazing Team

Filippo Pellolio

Map View

Umberto Di Fabrizio

Filters View

Manuel Tanzi

Statistics View

Giacomo Scolari

Model

The app

Application

How to use

Video Tutorial


Control Panel:

On the left side there is the control panel. Here hurricanes can be filtered on various attributes, we will now see them in detail.

Checkboxes:

The checkboxes on the left side of the hurricanes list are the easiest way to filter the hurricanes: clicking on one of them will toggle the hurricane on its right, displaying it if it was hidden and hiding it if it was displayed. Clicking on the checkbox on the top left corner will work as a select/deselect all.

List:

The list is one of the most important parts of the app: it displays all the hurricanes visible on the map right now, the result of the various filters. You can order this list by one of its attributes just by clicking on one of the arrows near to it.

Year Picker:

Using this calendar you can choose one year and see only the hurricanes in the dataset that happened in that specific year.

Day Picker:

Using this calendar you can choose one particular day and see only the hurricanes in the dataset that happened in that specific day.

Season Picker:

Choosing one of the two seasons the system will filter out all the hurricanes that happened outside of the selected season among the visualized ones.

Favorite / Landed:

Selecting Favorites will bring up a list of hurricanes selected by us for their importance. Selecting Landed will add a new filter to the visualized data, filtering out all the hurricanes that never approached land.

Pacific / Atlantic / Top :

Selecting Pacific or Atlantic will allow you to display or hide respectively the hurricanes of the Pacific or Atlantic ocean. The radio buttons Top allow you to visualize only the top 5/10/15 among the hurricanes visualized, with regard to the attribute they are sorted on.

Minimum pressure / Maximum Speed:

Clicking on one of the values on the axis will filter out all the hurricanes that have, respectively, a minimum pressure lower than the selected value or a maximum speed higher than the selected value.

The Map:

The background of the application, covering all the screen, is a map that spans over the two oceans and displays the data about the hurricanes we have selected in different ways, in this section we will show how to change them.

The Heatmap:

You can choose to visualize a heatmap overlaid on the map, this heatmap shows how dangerous it is to live in a particular US State with respect to the frequency of hurricanes. This is a static representation: it doesn't depend on the hurricane currently visualized.

Visualization chooser :

Using this control you can select which type of visualization of the data you want to see on the map. You can compare the visualized hurricanes basing on their pressure or their speed, you can simply visualize their path, or you can choose to see an heatmap that represents the hurricane risk for every state of the US, based on a scale that we will explain in a following section.

Play controls :

Using this controls you can start and manipulate a live visualization of the currently selected hurricanes. You can play, pause, resume, stop, and change the speed of the simulation.

The simulation :

The simulation view shows the path of the selected hurricanes performing a live simulation of them moving on the map. The color of the hurricane marker represents the type of storm, while the trail behind it represents the winds that surrounds the hurricane, the darker the trail is, faster the winds are. Sometimes a number is overlaid over the hurricane marker, this represents the category of the currently visualized hurricane, based on its speed.

The time indicator :

The time indicator shows the current time on the map, when not in the simulation view it shows the current time, while when simulating it shows the simulation time.

The legend :

The legend shows the scale on which the visualized data are based on.

The Map Controls:

The map controls let you zoom in and out the map and also change its underlying representation.

The Graphs Panel:

In the right part of the screen we can see some graphs representing different statistics. The Visualized panel contains graphs representing statistics relative to the hurricanes actually visualized on the map. The Overall panel instead contains graphs representing statistics relative to the entire dataset of hurricanes. Both panel contains the same statistic graphs represented on the y axis, in order from top to bottom the 'Number of Hurricanes', the 'Maximum Wind Speed' and the 'Minimum Pressure'. The x axis represents instead the time istances, and can be changed between days, months and years.

The Graphs Panel Controls:

As said before, the Graphs Panel contains two subpanels: 'Visualized' and 'Overall'. Through the Graphs Panel Controls, it's possible to close one or both the panels in order to have more space to look at the map behind.
In this control box, we can see also 3 buttons with the different time granularities, where it's possible to change the x axis of the graphs.
Finally, on the right, we can see 2 more buttons: 'ATL' and 'PAC'. These can be used respectively to change the data that generates the graphs between Atlantic and Pacific hurricanes.

Data

The data used is taken from the Atlantic hurricane database (HURDAT2) 1851-2014 and the Northeast and North Central Pacific hurricane database (HURDAT2) 1949-2013
The file format can be found here.
We wrote a script in order to pre-process data and create a json format as shown in the figure on the left. The data format of the points is shown of the left. For each hurricane we decided to add general maxSpeed, minPressure, ocean and landfall to easly filter accordingly to those parameters.

The format for the single points is the one shown on the left. This format has allowed us to manipulate data quite easly with d3.js and filter it accordingly to the user preferences.

This is the data about the danger level for every state, we created it using this simple script. It simply adds a value dependent from the speed of a hurricane every time it crosses one state, so that if an hurricane at 150 Kn crosses a state it increases the danger level in that state more than two hurricanes at 70 Kn.

Source Code

The code is available at this repo. Just in case you want to download it right away there's a zip at the bottom of this section;)

Run it

Oh don't forget to install WAMP, LAMP or anything like that to set up your local server.
Once you're done with it just copy the app folder in the web server folder access the url localhost:8888/index.html on your browser and voila.

In case you want something even faster you can quickly set-up a web server with python. To run the application on your local machine just unpack the archive in a folder. Go in that folder with a terminal and type: python -m SimpleHTTPServer 8888 In order to to so you must have python installed. Python Download
Then just open a web browser (an updated version of Chrome is highly recommended) and visit the url localhost:8888/index.html



Source Code

External libraries

The web application has been written in plain javascript, CSS3 an HTML5. Few external libraries have been employed:


D3.js a nice library for data visualization

Leaflet A great library for dealing with maps in javascript

JQuery Famous library to manipulate the DOM

Findings

All the landfallen atlantic hurricanes follow roughly the same path, a sort of hook from the middle of the atlantic to Greenland.

Thanks to this project we can really appreciate the major flaw of the mercator's projection: things get really enlarged when they are far from the equator, here we can clearly see the trail of winds around the hurricane get enlarged when it reaches Greenland, providing flawed informations. Unfortunately, all the easily accessible world maps, such as google maps, are provided in this projection, so there's not very much we can d about that.

Every once in a while some hurricanes manages to get from the atlantic ocean to the the pacific. Here on the left hurricane Diana is shown, one of the few who did it.

Another hurricane that crossed oceans, this time from the pacific to the atlantic. (Unnamed hurricane from 1923)

These are the 5 topmost hurricanes with regard of top speed in the dataset (As we're writing this standing is being outdated by hurricane Patricia), the interesting fact is that, apart from one loaner in the pacific ocean, four of them reached their maximum speed in the gulf of Mexico, really near to land. Bad news for people who are living there.

Even though we can see from the dataset that a lot of hurricanes are present in the pacific ocean, fewer of them make landfall than the atlantic ones, that's why the most dangerous states to live with regard to hurricanes turned out to be the ones on the south-east coast.