Shadows in the Rain
version due 10/12 at 8:59 pm Chicago time
final version due 10/26 at 8:59 pm
Project 2 will be the first group
project and will focus on geographic data, in particular the paths
that hurricanes (tropical cyclones) take in the Atlantic and
Pacific oceans. It will give you experience in plotting data onto
maps, in this case using leaflet. The application should help the
user investigate where are the most likely places for hurricanes
to strike, where the most damaging hurricanes strike, seasonal
variation, and trends over time. As with all the projects your app
will be evaluated running full screen on the classroom wall.
The standard group size will be 3 or 4 people per group. You can
chose who you want to be in a group with. I will create groups on
Saturday October 3rd for people that do not form groups on their
own. Be sure to take a look at the project 1 web pages to get a
better idea of people's abilities as you form your teams. Once you
have a team please send Andy an email CC'd to all the team members
confirming that you are a group.
You should very quickly set up a web page for your group project
and send the URL to andy. The final webpage for the project will
be public; the in-process web pages do not need to be public as
long as the course instructors have access. Each Friday of the
project each team member should post on the project web site an
overview of what he/she did on the project that week. This comes
in handy when assigning ratings to your collaborators and making
sure that everyone is contributing in a timely fashion.
In this project we are going to
investigate the paths that hurricanes take, related to the time of
year and their destructive potential.
The data for the project comes from:
the Atlantic hurricane database (HURDAT2) 1851-2014 and the
Northeast and North Central Pacific hurricane database (HURDAT2)
1949-2013 at http://www.nhc.noaa.gov/data/#hurdat
Information on the file format:
The primary visualization will be the hurricane path information
superimposed over map data with additional information on the
strength of the hurricane at that point. Additional graphs will
We will use leaflet (http://leafletjs.com) as our map rendering
For a C you need to create a useful,
responsive interactive visualization with the following
a B you need to add ...
- provide a list of Atlantic hurricanes since 2005 and let
the user show all of them, all of them for a given year, one
particular one, the top 5 overall , or the top 10 overall
(top here being related to max wind speed). The complete
path information for all of the selected hurricanes should
appear on a static leaflet map. The user should be able to
interactively turn on or off the display of a particular
- the user should be able to order the list of hurricanes
either chronologically, or alphabetically, or by max wind
- allow the user to pick a day (e.g. September 14,
2003) and show where all the hurricanes are on that
day (including those that were or will be hurricanes).
- allow the user to pick a particular hurricane season and
play it back on the map. The user should be able to pause
and resume playback, and and allow the user to change the
rate that time passes.
- provide overview graphs showing the number of hurricanes
per year since 2005.
an A you need to add ...
- add a second linked visualization for the Northeast and
North Central Pacific dataset (the wall has enough space to
show maps of both the Pacific and Atlantic at the same time)
- provide a list of hurricanes since the beginning of the
data files and let the user show all of them, all of them
for a given year, the top 5 overall , or the top 10 overall.
Note that only recent hurricanes have names so you need an
appropriate way of identifying them to the user.
- allow the user to playback all the hurricanes back to the
beginning of the files. Note that data is missing for some
of the parameters before 2004 - so you will need to show
that there is missing data.
- allow the user to filter which hurricanes are displayed
based on whether the hurricane made landfall or not.
- allow the user to filter which hurricanes are
displayed based on max wind speed or minimum pressure.
- provide separate graphs showing the total number of
hurricanes each year in the Atlantic and Pacific.
- allow the user to show the wind speed and/or pressure
overlaid on the hurricane path information (this could be
changing the line color and/or thickness, or showing the
data with a glyph at the different known points, or some
other appropriate visualization of your choice).
- provide a line graph showing the max wind speed of the
hurricanes over a given year (X axis is days of the year, Y
axis is wind speed) for currently visible hurricanes. create
a similar graph for minimum pressure.
- allow the user to change the underlying map
- allow the user to pan / zoom/ and reset the view of each
of the maps to get a closer look at the hurricane paths. All
of your visualizations should scale appropriately to be
visible in the new view.
- show a graph of overall data for each month of the year
(i.e. combining September for all of the years in the
dataset) showing number of hurricanes, allow the user to
filter the data based on max wind speed and/or min pressure
and/or Atlantic / Pacific / both. This should help the user
find when are hurricanes most frequent and when are the most
dangerous ones more frequent.
- use the remaining columns of the data file to show the
extent of the different wind speeds of the hurricanes. You
don't need to show each quadrant separately - come up with a
reasonable way to combine the four pieces of data and defend
it in your documentation. The key thing here is that a
hurricane is not a point, its winds can cover a very large
geographic area show your visualization should show the
extent of its damaging winds.
- create a heat map style visualization showing the relative
badness of places to live related to hurricanes - note that
this is intentionally vague. come up with a reasonable
definition of badness and how to represent it and defend it
in your documentation.
- research some particularly interesting hurricanes and
create a list of your 5 favorites and use your interface to
allow the user to investigate them.
As with all the projects your app will be evaluated running
full screen with touch interaction on the classroom wall.
There are two deadlines for this project. By the first deadline
you should have implemented the initial screen layout of your
application and have the basic functionality allowing the user to
perform an example of the various 'C' functionality. This will
make sure that your group is on track and that you can focus on
making a good interface and set of visualizations, not just
functional ones. Personally, I think you should have the entire C
functionality done at that point if you are going for an A on the
project as a whole. You should make this version of the interface
available on your group project page.
As part of the final turn in you should create a set of web
pages that describe your work on the project. This should
which should have plenty of screenshots with meaningful
captions. Web pages like this can be very
helpful later on in helping you build up a portfolio of your
work when you start looking for a job so please put some effort
- 1 page on how to use your application and the things you can
do with it.
- 1 page on the data you used, including where you got it,
what you did to it.
- 1 page with links to the source code and any instructions
necessary to instal l and run it. These instructions should
start from the assumption that the reader has a web browser on
their computer and tell the user everything else he/she needs
to know to get the code and get it running.
- 1 page on what interesting things you found using your
- 1 page on the roles of the different team members
Be sure to document any external libraries or tools that you make
use of - give credit where credit is due.
should also create a 2-3 minute YouTube video showing the use
of your application including narration with decent audio
quality. That video should be in a very obvious place on your
main project web page. The easiest way to do this is to use a
screen-capture tool while interacting with your application,
though you will most likely find its useful to do some editing
afterwards to tighten the video up. Its also a good idea to
have a video like this available as a backup during your
presentation just in case of gremlins. You may want to shoot this
video on the wall itself.
page including screen snapshots and video need to be done by the
deadline so be sure to leave enough time to get that work done.
I will be
linking your web page to the course notes so please send me a
nice 1920 x 540 jpg image of
your visualization for the web. This should be named
When the project is done, each person in the group should also
send Andy a private email with no one else CC'd ranking your
coworkers on the project on a scale from 1 (low) to 5 (high) in
terms of how good a coworker they were on the project. If you
never want to work with them again, give them a 1. If this person
would be a first choice for a partner on a future project then
give them a 5. If they did what was expected but nothing
particularly good or bad then give them a 3. By default your score
should be 3 unless you have a particular reason to increase or
decrease the number. Please confine your responses to 1, 2, 3, 4,
5 and no 1/3ds or .5s please. We will average out all these scores
for projects 2 through 3 and use them when assigning final grades
to projects 2 through 3.
will show their visualization to the class and describe its
features. This allows everyone to see a variety of solutions to
the problem, and a variety of implementations. Rehearse your presentation
... several times.
All team members are expected to
participate equally in that presentation.