Project 1 will be an individual
project to give people practice with writing an application in
processing and get everyone ready to contribute to the group
projects to come.
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.
I will provide you with several
datafiles. These include a vector map of the area and the
locations of the dead and a set of randomized dates.
datafiles are located at:
More data on the original versions of these files can be
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:
- gives the coordinates of the streets as a series of line
- pumps -
gives the locations of the 13 nearby pumps
gives the number of deaths for each day of the outbreak
the location of each death in the deathdays file, in order,
plus information on the age and sex of the victim.
> 80 5
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:
You will be creating a web page
that embeds a processing window that lets a user investigate
this data. This web page should be viewable under Explorer,
Safari, and Firefox. The application should have obvious and
C you need ...
B you need to add ...
- a well drawn map of the area including the locations of the
- a graph showing the number of deaths per day
- ability to move the mouse over a given area to choose which
day to visualize - this should afect 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 (ie they should not
move when new data is added to it)
- the graph and the map should be well labelled
- the visualization itself should be well labelled (what,
when, where, who made it, where the data came from, etc)
- 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
an A 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 a particular victim
was male or female
- ability to easily see on the map the age of a particular
- a graph showing the distribution of deaths by sex and age
- the 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
- 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 zoom in/out and pan around the map
You should start by getting
processing installed and doing some initial tests to load in the
data and start displaying it. The Visualizing Data texbook has
some nice discussions and sample code.
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. How are you going to make use of the screen real-estate. All
of the different visualizations you use should be visible
What kinds of charts are you going to use for the various data.
One good starting point for that is:
You should create a web page that describes your work on the
project including an embedded processing window (with a max size
of 1280 by 700) and a link to a gzipped file containing the source
code and all other necessary files to make it run locally. This
well organized page should function as a README file and describe
the features that you implemented along with any special features
that you added. It should include screenshots of all the major
I will be linking this web page to the course notes so please send
me a nice 1024 x 768 jpg image of your visualization for the web.
This should be named p1.<your_last_name>.jpg.
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.
We will take one class period to look through these visualizations
so everyone can see a variety of solutions to the problem, and a
variety of implementations. You will be expected to talk about