Shadows in the Rain

An application that visualizes hurricanes from 1800 to 2010.

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

Project Brief

Shadows in the Rain was our course project for CS-424 Visualization and Visual Analytics at the University of Illinois at Chicago. This course was offered by the Electronic Visualization Laboratory (EVL). EVL also offers other cross courses between the School of Computer Science and the School of Design at UIC.

Type and Timeline

Product Design, UX, and Data Visualization.
September-October 2015.


Gautam Krishnan, Srivatsan Muralidharan, Sumanth Pandugula, and Vivek Krishnakumar, under the guidance of Prof. Andrew E Johnson.

Type and Timeline

Product Design, UX, and Data Visualization
September-October 2015.

My Role

Ideation, User Research, Prototyping, Visual Design, User Testing, and Front-end UI Code.



Shadows in the Rain is a web application to analyze the regions in the US most likely to be affected by hurricanes. It plots and plays back hurricanes from the 1800s to 2010 in the Atlantic and Pacific oceans on a map, showing the intensity, damage, and their real-time progress.

Introduction to the Platform

The EVL boasts a state-of-the-art multitouch display known as the SAGE2. It has an astounding resolution of 8160 x 2304 pixels and comprises 18 individual displays (in a 6x3 layout). This large screen is built to facilitate collaboration and group-oriented problem-solving. The teams for this course project were expected to present their application on this screen in a full-screen mode, scaled appropriately.



We had eight weeks to complete and present our project, so we decided that the best way to achieve our goal was to plan each activity with a deadline. There were some unknown unknowns, like the data quality and what/how to clean up 200K+ rows of data.

Task Allocation

We had to plan tasks according to our backgrounds and strengths. Srivatsan and Sumanth were the most experienced with handling data and databases, while Vivek was into writing front-end JavaScript. My expertise is in conducting UX activities and building UI, so we all had our parts cut out from the beginning as we built the team.

Bang/buck exercise to identify the value and cost of tasks.

Research Phase: Understanding the Target Audience

We started by conducting interviews with the faculty and research students at EVL. We interviewed them for two different things: Their expertise with SAGE2 and familiarity with hurricane-related terminologies.

SAGE2 Expertise

We tried to understand how well our audience knew about SAGE2 and its capabilities, as it would be used by our audience to interact with our application. We found that three different types of audiences exist:

  1. EVL Researchers and Faculty: These users know the capabilities of SAGE2 and are aware of all the interactions that it supports. They also consisted of people involved in the inception and creation of SAGE2.
  2. EVL Students: These users had either taken a course offered by the EVL or know about SAGE2's multitouch capabilities and use it like any other touch device.
  3. Novice Users: These users may use the typical keyboard and mouse input methods that the SAGE2 supports, like a general desktop computer.

Our goal was to consider all these user groups and build an interface that would offer a complete and uncompromised experience for all.

Familiarity with hurricane-related terminologies

UIC offers a BS, MS, and Ph.D. in Earth and Environmental Sciences (EES) under the College of Liberal Arts and Sciences. The courses are designed to train the students in interdisciplinary earth science, laboratory investigations, and computational modeling and simulation of big data. Since we were working on a project that was closely related to EES, we had the opportunity to interview a few students from that discipline.

While our team was getting familiar with all the hurricane-related terminologies in our project, we found that the students from an EES background had no problem understanding them. We saw them as our power users who could understand the application at a conceptual level. They could answer a lot of our questions on the factors and parameters that affected the hurricanes, and how the factors themselves were interdependent.

Research Phase: User Discovery Insights

About 90% (19/21) of the users had not used the multitouch feature on SAGE2. Some described as being aware of the capability but did not have the opportunity to use it.

I remember reading about it on the EVL website but haven't come across any app that supports it. In fact, you can't tell which app supports multitouch and which doesn't.
Have seen a demo in the course I took but never used it.
I generally avoid the touch feature because it involves being too close to the giant screen almost my height, which makes content hard to read.

About 75% (16/21) of the users reported that they were unfamiliar with any tool to analyze weather-related data. Although some EES students had used the forecasting tool by National Hurricane Center (NHC). they could not recollect if the NHC tool offered any means to analyze past hurricane data. We were introduced to this tool by the EES students and some aspects of it were useful to us in understanding hurricane representations.

Research Phase: Understanding the Problem

"Confusion and clutter are failures of design, not attributes of information. And so the point is to find design strategies that reveal detail and complexity - rather than to fault the data for an excess of complication. Or, worse, to fault viewers for a lack of understanding."

- Edward Tufte

The Data

The datasets provided to us were a list of hurricanes and their related parameters from both the Atlantic and Pacific oceans (about 100,000 rows of data). As a team, we were tasked with creating a web application to help users analyze historical data.

The Opportunity

Due to climate change and increasing global sea levels, we are witnessing an increase in hurricanes every year and the damage caused. In this project, we analyzed and built a model to show how geographical locations have been increasingly affected in the past years. We can use this data to predict the areas most vulnerable to hurricanes in the future.

How this is currently done:

  1. Using commercial software in weather stations and the media.
  2. Weather apps like, Accuweather, etc., provide some historical data on hurricanes, but they lack the controls to slice and dice data.
  3. Static maps available on the web sometimes paint an incomplete picture or even show exaggerated data.

After collecting feedback and gaining a better understanding of the problem, we developed a value proposition about the necessity and direction for our app.

Shadows in the Rain is a tool that lets users study the effects of past hurricanes to make better predictions about the extent and areas of damage they could cause in the future.

Our product helps

  • Researchers and students who are studying hurricanes.

Who need a better way to

  • Analyze past hurricane data to make future predictions.


  • Letting them slice and dice the data and visualize hurricanes on a map.
  • Playing hurricanes on the map according to their original course and the areas they affected.

And is better than

  • Using static images issued by the National Weather Service.
  • Historical data by weather applications.


  • Users can select and compare hurricanes and the extent of damage they caused.
  • Use map controls to pan, zoom, and change map layers to analyze affected areas meticulously.
  • Filter and classify hurricanes by factors like wind speed and pressure, time of the year, whether they made landfall or not, etc.

Specific Requirements

There were a few course-specific requirements that our application had to fulfill:

  1. View and sort hurricanes chronologically, alphabetically, and by maximum wind speed.
  2. Ability to pick a particular hurricane, or a hurricane season and play it on the map with controls to pause and resume playback as if in real-time, and allow the user to change the rate at which time passes.
  3. While playing the hurricane, it should show the wind speed, pressure, and the damage caused overlaid on the hurricane itself. The timeline of the hurricane through its various stages should be shown to the user (tropical depression, cyclone categories, and hurricane). The user should be able to pan, zoom, and reset the view of the map.
  4. To emphasize the effects of climate change, the app must provide overview graphs showing the number of hurricanes per year from 2005 to the present.
  5. Provide a heatmap of which areas are most likely to be affected by hurricanes based on the overall data.

Ideation Phase: Design Challenge


How can we make the app intuitive for all audiences, particularly the
EVL and EES students?

Product, not project

Although this was a part of our course, how can we make our solution more
like a finished, polished product and less like a school project?


Since the SAGE2 platform supports both touch and keyboard/mouse interfaces,
how do we make our interface accessible for both these modes?

Ideation Phase: User Journey

Prototyping Phase: Wireframes and Mockups

Our initial lo-fi wireframe.

We simulated this wireframe on the SAGE2 display and found that certain areas of the application were not accessible for the touch-screen users.

Finalized wireframe after addressing the issues we found.

Final Deliverable


Key Findings

  1. The radii of damage caused by the hurricanes at each position is as large as an enitre city.
  2. Most hurricanes never make landfall.
  3. Many hurricanes start as a tropical depression and continue to gain intensity. Towards the end, the lose their intensity and end again 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.
  5. It is generally possible to predict the route a hurricane might take, but the outliers often cause catastrophic damage to life and property.

Future Scope

After testing our application with the users and upon viewing the projects that were presented by other teams in class, we had a lot of take aways. Here are some items that would be our priority in the future 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.