Project 1

Down with the Sickness

Project due 2/10 at 9:59 pm Chicago time and 5:59pm Honolulu time

Project 1 will be an individual project to give people practice with writing an application in KineticJS and get everyone ready to contribute to the group projects to come. In this project everyone will learn how to get data in, how to write an interactive application, how to create an effective user interface for viewing and analyzing this data. This will give everyone a common basis for communication in the later group projects where people will most likely specialize in different tasks.

The project will focus on a recreation of the John Snow cholera map but this time focusing on an interactive version of the map with additional related dynamic data. In this case the data is already pre-processed to be an appropriate size and in an easily readable form. You also know what 'the answer' is so you can concentrate on the visualization side of things. Those assumptions won't hold true for the later assignments.

The data files available  include a vector map of the area and the locations of the dead and a set of randomized dates.

The datafiles are located at:

More data on the original versions of these files can be found  here:

I modified the format a bit and added in a randomized sex and age of the victims based on data from the Naples cholera outbreak in 1884.

The data files include:
    age 0-10     0
       11-20     1
       21-40     2
       41-60     3
       61-80     4
        > 80     5

    male 0, Female 1

another piece of potentially useful information is the percentage of people in each age group in general during that time as the percentages of people of different ages who died may not be the same as the general population. I haven't found any data for London at that time, but US census data from 1850 at gives the following breakdown, so we will assume the same breakdown for London:

     0-10     28%
     11-20    25%
     21-40    30%
     41-60    13%
     61-80     4%
      > 80     1%

You will be writing your code to run on a modern Chrome browser running under all current major operating systems, and you should test to make sure that your app runs well on current Windows, Mac, and Linux OSes. The screen size will be 1920 x 1080 (assume a full screen web browser; you can decide if you want the menu bar, tabs, etc taking up part of the space or not). The user will be using a single button mouse to interact (so the app is compatible with touch-screens). The application should have obvious and intuitive controls.

The application should show multiple linked visualizations of the data simultaneously. This will allow the user to dynamically filter based on age, sex, date of death, and see that filtering applied to all of the current visualizations at the same time.

For a C you need:

For a B you need to add:

For an A you need to add:

Your application should help someone like John Snow conduct an investigation. It should make it easy to check out various hypotheses.

You should start by getting KineticJS installed, running through the demos, and doing some initial tests to load in the data and start displaying it.

Once you have a basic shell working you should then start to draw some sketches of what the interface might look like and how you want to arrange and display the data. You can use other software to generate statistics about the data if you find that useful but be sure to document that process. Be careful of missing data when you generate statistics.

Your application should start out showing some data - a blank screen is not very inviting. In past terms the students have shown a desire to show an overwhelming amount of the data to the user right away. You should be careful not to overwhelm the user. As Schneiderman said "overview first, zoom and filter, details on demand." Appropriate levels of aggregating data will be very important here.

It is also important to note that 'getting it to work' is just a prerequisite to using the application to find answers to your questions. It is that usage that will give you ideas on how to improve your app to make it easier and more intuitive to find those things. Writing the application at the last minute pretty much guarantees that you will not come up with an intuitive interface.

Many of the routines you write for this project will be used again and expanded upon in the upcoming projects - e.g. all of the projects will need graphs, so it is a good idea to write your code in a way that it is reusable.

You should create a set of web pages that describe your work on the project. This should include:
all of 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 into it.

Be sure to document any external libraries or tools that you make use of - give credit where credit is due.

You 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.
For the future group assignments you may want to shoot this video on the wall itself.

The web 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 1080 jpg image of your visualization for the web. This should be named p1.<your_last_name>.<your_first_name>.jpg. 

Each student will show his / her visualization to the class on the wall 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.

last revision 1/27/2014 - Project due Monday evening, not Tuesday evening