Project due 2/11/18 at 8:59 pm Chicago time
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 visualize annual air
quality data, to see how air quality around the US has changed since the
early 1980s. We will expand upon this topic in Projects2 and 3.
The data files can be downloaded from
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 11520 by 3240 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, ever, 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 regularly before
turning your solution in to make sure it works by default at that scale
The demonstration project from week 2 in class should give you a good
You should use ggplot2 for all of your chart plotting.
For a C you
Students need to add:
For a B you
need to add:
- download and read in all of the annual_aqi_by_county files.
- create a Shiny dashboard using R scaled to the classroom wall
allowing the user to:
- pick any year 1980-2018 (and 2019 if the data becomes available)
from a menu and see for Cook County Illinois:
- pie chart showing the percentage of days, and a bar chart, and
table showing the number of days where the AQI was good /
moderate / unhealthy for sensitive / unhealthy / very unhealthy
- pie chart for each individual pollutant (CO, NO2, Ozone, SO2,
PM2.5, PM10 ) showing the percentage of days in the year with
that pollutant as the main
- bar chart and table showing the number of CO, NO2, Ozone, SO2,
PM2.5, PM10 days as the main
- note that the percentages should only include days where there
is data (Days.with.AQI), so the percentages are not necessarily
out of 365 or 366 days, and the charts and tables need to be
obvious about the missing data
up information on the dashboard about who wrote the project,
what libraries are being used to visualize it, where the
data came from, etc.
For an A
you need to add:
- The user can now choose from a list of 12 US counties including
Cook, Illinois; Hawaii, Hawaii; New York, New York; Los Angeles,
California; King, Washington; Harris, Texas; Miami-Dade, Florida;
San Juan, New Mexico; Hennepin, Minnesota; Wake, North Carolina and
two others that you choose
- for the given year and county show the ‘C’ range visualizations
for that county and year
- show a line graph using the annual data from 1980-2018 showing
lines for the median, 90th percentile, and max AQI over those
years (i.e. the graph should have 3 lines)
- show a line graph and table showing the percentages over the
years for days CO / days NO2 / days Ozone, days SO2 / days PM2.5 /
days pm10 (i.e. the graph should have 6 lines)
- show location of the chosen county on a pannable and zoomable
world map with an appropriate background (that is reasonably
centered and scaled on the US). You need to get the latitude and
longitude values from the aqs_sites.csv file (under the Site
Listing link), and not hard code them. Note that there are NAs and
0s in that file that could affect your results, so be careful.
- The user can choose any state from a list, and see all the
counties in that state and then choose any of those counties, and be
able to see an alphabetical list of all the counties in the US
(including state names), and be able to search by typing in the
county name, and see the ‘B’ data visualizations on that county,
including its location on the map. Note that there are counties with
the same name in different states.
- The ability for the user to easily compare data from 3 selected
counties on the screen at the same time.
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 will 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
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.
Developer Tools allow you to emulate screens of different sizes (view /
developer / developer tools / settings / devices) and while the current
max size is 9999 pixels wide, it may help you to do more of your
You should create a set of public web pages that describe your
work on the project. This should include:
- 1 page/tab with a link to your visualization solution optimized for
the classroom wall, and a description of how to use your application and
the things you can do with it.
- 1 page/tab on the data you used, including where you got it, what you
did to it.
- 1 page/tab with links to a zip file containing your well commented
source code, any necessary data files, and any instructions necessary to
run it. These instructions should start from the assumption that the
reader has a web browser on their computer and tells the user everything
else he/she needs to know and do to get it running using R studio,
including installing all the required software.
- 1 page/tab on what interesting things you found about the data using
your application. Are we doing better reducing pollutants in the
atmosphere? Are there places that are more or less polluted than you
expected? What trends do you see in terms of where the most or least
polluted areas are?
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, tools, etc. that you make
use of - give credit where credit is due for everything that you didn't
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 the TA 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 and be roughly
1920 x 540
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. By the end of Tuesday's class each group will produce a report
(including names of all the group members) on what the group liked about
each solution and make that available on one of the group member's
public web pages and email the location of that page 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 and discuss what they liked about it on the classroom
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.
revision 1/29/19 - added note re chrome's emulation features