CS 424 Project 1

Project 1 will be an individual project to give people practice with writing a web-based application that visualizes the same data in multiple ways using R and Shiny and ggplot2 and Shiny Dashboard, and get everyone ready to contribute to the group projects to come. In this project everyone will learn how to import data, use R to manipulate the data, and create an effective user interface for visualizing and analyzing this data on the classroom wall. This will give everyone a common basis for communication in the later group projects where people will start to specialize in different tasks.

This project will focus on using basic graphs to show information about the 1854 London cholera outbreak based on data created and compiled by Robin Wilson (robin@rtwilson.com, www.rtwilson.com/academic) - Jan 2011

The data files are located in www.evl.uic.edu/aej/424/18p1data.zip

You will be writing your code to run full screen in a web browser and it should run on all current browsers (Chrome, Safari, Firefox, Explorer, Edge, etc) but the main evaluation and demonstration will be done on our classroom wall which runs the latest stable version of Chrome under Windows 10. The screen size is 4080 by 2304 but assume some space will be lost for borders, tool bars etc. The fonts and visualization primitives you create should be work effectively at that scale. The user should not need to scroll the window, so you should experiment with different ways to organize the information and controls to find the most effective combinations. You can (and should) develop your solution on a typical laptop / desktop, just be sure to test on the classroom wall before turning your solution in to make sure it works by default at that scale and resolution.

The demonstration project from week 2 in class should give you a good starting point.

You should use ggplot2 for all of your chart plotting as that is what we will be using on the later projects.

For a C you need to:

read in choleraDeaths.tsv data file
create a Shiny dashboard using R scaled to the classroom wall showing:

table of attacks and deaths by date, showing numbers per day and totals of both on each day
line chart showing time on the x-axis vs number of attacks on this day, deaths on this day, total attacks up to this day, and total deaths up to this day (note that R has a cumulative sum function that might come in handy), making a total of 4 lines on the chart

allow the user to bring up information on the webpage about who wrote the project, what libraries are being used to visualize it, where the data came from, etc.

For a B you need to add:

read in naplesCholeraAgeSexData.tsv showing fatality numbers for men and women in different age groups from cholera in the same time period
show a table of age categories for male fatalities and female fatalities (i.e. one column for male and another for female)
show a bar chart of age categories for male fatalities and another for female fatalities
read in UKcensus1851.csv showing the number of men and women in different age groups in that same time period
show a table of the census age data for men and women (i.e. one column for men and another for women) including the overall totals
show a pie chart of the census age data for men and another for women
show a bar chart of the census age data for men and another for women
show a pie chart for the overall number of men vs women

For an A you need to add:

read in choleraDeathLocations.csv and choleraPumpLocations.csv
show a map of the locations of the deaths and pumps on a leaflet map of the current London neighborhood using an appropriately centered and zoomed leaflet map. It should be obvious which locations have more fatalities than other locations.

Graduate Students need to add:

read in the SnowMapRobinWilson.jpg map (converted by robin@rtwilson.com, www.rtwilson.com/academic to make it match better with the lat lon coordinates)
show a map of deaths and pumps on the original map (note that your plots should match up with Snows, though you will most likely be showing those fatalities in a different way)
allow the user to hover over fatality locations to get data on the number deaths at that location

In all of these case you need to make sure that your visualizations are well constructed with good color and font choices, proper labeling, and that they effectively reveal the truth about the data to the user

Note that as part of the web page part of the grade you will need to use your interface to show your findings, so make sure that the way your interface displays information is clear.

For this project you should host your solution using Shinyapps.io. For later projects we may move to a local server. This kind of deployment is covered in the 'Learn Shiny' tutorials.

It is 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 so you can modify it rather than totally rewriting it later.

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 create the video is to use a screen-capture tool while interacting with your application, or using a camera while interacting with the classroom wall, though you will most likely find its useful to do some editing afterwards to tighten the video up. If you do decide to use your phone or tablet to make the video, then please shoot the video in landscape rather than portrait orientation. Its also a good idea to have a video like this available as a backup during your presentation just in case of gremlins.

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 andy and saumya a nice jpg image of your visualization for the web along with the link to your website before the deadline. The image should be named p1.<your_last_name>.<your_first_name>.jpg.

I would prefer that every student presents their work to the class, but given the class size that will be impractical, so we will spend the Tuesday class after the project is due meeting in groups of 4-5 where each student will show their solution to their local group, and the group will discuss the merits of each solution. At the end of Tuesday's class each group will produce a report on what the group liked about each solution and email that to andy. The group will also choose an overall favorite solution to present on Thursday.

On Thursday each group will have 5 minutes to present their group's favorite solution on the classroom wall.

This week is also a very good time to find people to work with on Project's 2 and 3 based on the work they show in class and all of the solutions posted on the course webpages.

2018 Project 1

Don't Go Near the Water