Project 2 will be the first group
project and will focus on geographic data in the Chicago area.
The standard group size will be 3 or 4 people per group. You can
chose who you want to be in a group with. I will create groups for
people that do not form groups on their own by Friday 9/26. Be
sure to take a look at the project 1 web pages to get a better
idea of people's abilities.
You should very quickly set up a web page for your group project
and send the URL to andy along with the names of the members of
your group. The final webpage for the project will be public; the
in-process web pages do not need to be public as long as the
course instructors have access. Each Friday of the project each
team member should post on the project web site an overview of
what he/she did on the project that week. This comes in handy when
assigning ratings to your collaborators and making sure that
everyone is contributing.
In this project we are going to
investigate divvy bike patterns from last year mapped onto an
interactive map of the Chicago area. Divvy released data from 187
days in 2013 from 6/27 through 12/31 covering 800,000 trips. Other
people have been using their interactive tools to scrape more
recent content, but we will stick with a cleaned up version of the
official release for this assignment.
We will be using leaflet.js as the mapping library to go along
with D3 - http://leafletjs.com
and for some different maps -
You may also find suncalc useful for working out sunrise and
sunset - https://github.com/mourner/suncalc
The data for the project comes from:
which is a cleaned up version of the original data at
weather underground has historical weather data for Chicago at
The application should help the user investigate how the bikes are
being used, and look for general patterns, and see how particular
events (weather related, taste of Chicago, etc) affect those
patterns. As with all the projects your app will be evaluated
running full screen on the classroom wall.
For a C you need to create a useful,
responsive interactive visualization with the following
a B you need to add ...
- pannable and zoomable leaflet map of Chicago (with both
aerial photography and map views) showing all of the divvy
bike stand locations in the city
- show the relative overall popularity of each of the
- simultaneously show graphs showing overall statistics for
the city from 7/1 to 12/31:
- number of bikes out by day of the week
- number of bikes out by hour of the day (and night)
- number of bikes out by day of the year
- rider demographics (male vs female vs unknown, age,
subscriber vs customer)
- distribution of rides by distance
- distribution of rides by time
- distribution of distance traveled for each bike
- pick a day from a calendar and play it back to show all of
the trips taken across the city linked to a graph showing
number of active bikes at that time
- add the community areas from project 1 onto the map as a
layer that can be turned on and off
an A you need to add ...
- pick a station and see the overall outflow from that
station on the map (all of the stations that people biked to
and the number of people that biked to each station - you
could do this with lines or with icons/charts at the end
- pick a station and see the overall inflow to that station
on the map (showing same data as above)
- pick a station and see the overall demographics of the
rides leaving and arriving at that station
- break the 24 day into some small set of categories to show
overall flow at different times of the day - are there
patterns for the morning, lunch time, after work, evenings,
- show stations with the biggest imbalances between inflow
and outflow at different times of the day
- pick a community area to select all of the divvy bike
sites in that area at once
- pick a day from a calendar and play it back to show all of
the trips taken as well as sunrise / sunset and the weather.
the user can chose to see the entire city or a subset of
stations. Graphical data should be shown for the overall
city as well as each selected station. Allow the user to
filter by gender, age, subscriber vs customer
- focus on the 6 divvy locations near UIC document the
patterns you find
- allow the user to pick two stations and see information on
trips between them
- allow the user to bring up multiple related maps to make
comparisons between different areas of the city, different
times of the day, days of the week, days of the year, etc.
- document patterns around particular events in the city
during those months (school starting, events in grant park,
games at soldier field, etc)
- investigate how bike usage compares to the current weather
(temperature, rain, etc)
- investigate how bike usage compares to the current sunrise
and sunset times
There are two deadlines for this project. By the first deadline
you should have implemented the initial screen layout of your
application and have the basic functionality allowing the user to
perform an example of the various 'C' functionality. This will
make sure that your group is on track and that you can focus on
making a good interface and set of visualizations, not just
functional ones. Personally, I think you should have the entire C
functionality done at that point if you are going for an A on the
project as a whole. You should make this version of the interface
available on your group project page.
As part of the final turn in you should create a set of web
pages that describe your work on the project. This should
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
- 1 page on how to use your application and the things you can
do with it.
- 1 page on the data you used including where you got it, what
you did to it.
- 1 page with links to the source code and any instructions
necessary to instal l and run it. These instructions should
start from the assumption that the reader has a web browser on
their computer and tell the user everything else he/she needs
to know to get the code and get it running.
- 1 page on what interesting things you found using your
- 1 page on the roles of the different team members
Be sure to document any external libraries or tools that you make
use of - give credit where credit is due.
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. You may want to shoot this
video on the wall itself.
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 540 jpg image of
your visualization for the web. This should be named
When the project is done, each person in the group should also
send Andy a private email with no one else cc'd ranking your
coworkers on the project on a scale from 1 (low) to 5 (high) in
terms of how good a coworker they were on the project. If you
never want to work with them again, give them a 1. If this person
would be a first choice for a partner on a future project then
give them a 5. If they did what was expected but nothing
particularly good or bad then give them a 3. By default your score
should be 3 unless you have a particular reason to increase or
decrease the number. Please confine your responses to 1, 2, 3, 4,
5 and no 1/3ds or .5s please. We will average out all these scores
for projects 2 through 3 and keep them in mind when assigning
final grades to projects 2 through 3.
will show their visualization to the class 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.
All team members are expected to
participate equally in that presentation.