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:
deaths.age.mf
deathdays
streets
pumps
More data on the original versions of these files can be
found here:
http://www.ncgia.ucsb.edu/pubs/snow/snow.html
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:
- streets
- gives the coordinates of the streets as a series of line
segments
- pumps
- gives the locations of the 13 nearby pumps
- deathdays
-
gives the number of deaths for each day of the outbreak
- deaths.age.mf
-
gives
the location of each death in the deathdays file, in order,
plus information on the age and sex of the victim.
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
http://www2.census.gov/prod2/decennial/documents/1850a-02.pdf
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:
- a well drawn map of the area (streets and pumps) including
the locations of the deaths
- a timeline graph showing the number of deaths per day
- ability to move the mouse over the timeline graph to
choose which day to visualize - this should affect the
deaths visible on the map and in the graph - at minimum all
cholera deaths prior to that date should be shown on the map
and the graph
- the graph and the map should be stable (i.e. they should
not move when new data is added or removed)
- the graph and the map should be well labelled
- you should check your visualization with a colour
blindness checking web page to see that its OK
- the map and graph should update quickly when the user
interacts
- an about screen with details on who wrote the project,
where the data came from, etc.
- instructions to help the user use the application
For
a B you need to add:
- more data to the map - major street names and the
location of the brewery and the work house
- ability to easily see on the map whether each victim was
male or female
- ability to easily see on the map the age of each
victim
- additional graphs showing the distribution of deaths by
sex and age overall and while brushing
- the timeline graph should mark the day the pump handle was
removed
- the map should be able to show either deaths on this day
or up to this day
For
an A you need to add:
- ability to cluster the data on the map into a grid that
shows the number of dead in each grid cell (even with this
small amount of data the points are starting to overwhelm)
and the user should be able to vary the size of the
clusters.
- ability to show data from a window of days on the timeline
graph
- ability to zoom in/out and pan around the map
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.