View on GitHub

Project 2 : Bicycle Race

CS 424 Project

Index About the Project Project Data Team SourceCode How-To Interesting Findings Patterns Unconvered
Download this project as a .zip file Clone This Project

How To Page

Guide to Bicycle Race!

This WebApp is based on data on Chicago and Divvy Bikes. Divvy Bikes is a convenient way to get around, as they have bicycle stands at convenient locations all over the city. There are two categories of Divvy Bike riders:

These are the People who pay once, by card or cash at any of the Divvy Bike stand location kiosk, for a 24 hour pass. These people pay for a 30 minute ride at a time. They do not have to give any personal or survey data to the company for these services.

Subscribers: These people pay for a period of time, like annually. They have to register to get the subscription and a card to access the bikes. The company, hence, has survey and some personal data for them, like Date of Birth, Gender and so on.

To Navigate the app, the user has to navigate to the webapp URL: Click here to be navigated there.

To Navigate the app, the user has to navigate to the webapp URL: Click here to be navigated there. The first page that opens up has a Controls panel, filled with button as shown in the pic below.

Now, the description and navigation of each mode is given below:

Overall Data Mode:
In this mode, the overall data for Chicago is visualized in various charts, which is divided into sections:

This is the data about the people using the Divvy Bikes. This mode has data categorized by Age, Gender Distribution, Member Types (Subscriber Vs Customer), and composite of these parameters, like Divvy Riders by Age and Gender. Trips Data: This data panel contains visualizations to depict the overall Distribution of Bike Rides by Time and Distance.

Inbound Outbound:

This is the visualization that depicts the maximum overall imbalance between the incoming and outgoing bikes on a station. These are divided onto two visualizations: Top stations with this imbalance and top stations by time of the day with this imbalance.

We were unable to include one other visualization in time for project deadline but you can view that visualization by clicking on the following link. Click here

Bikes Data: This shows the data by bikes (Differentiated with a Bike ID per bike). This data is shown as: Overall Bike Distribution by Distance. Overall Bike Distribution by Day of the Year. Overall Bike Distribution by Day of the Week. Overall Bike Distribution by Hour of the Day.

Compare Mode:
Clicking on this button will bring the user to a screen with two columns. On top, the user can select a station in both the list to compare the popularity, inflow, outflow of the stations. This division is further given by distance, as well as time.

Playback Mode: Clicking on this mode will bring the user to the screen with a Calendar, Time picker (Slider below the Calendar) and Visualizations showing the number of active bikes on the selected date (Shown in calendar). As the user slides the hour slider, the visualizations show a number which is the active number of bikes on the selected date at the selected hour. The second visualization changes as the Demographics Filters are applied and removed:

  1. Gender:
  2. The user can filter the data by the gender: Male or Female, and to turn the filter OFF, click on All.
  3. Member:
  4. This is the filter on membership type of the bike riders: Customers and Subscribers. Click All to turn the filter OFF.
  5. Age:
  6. This will put a filter on the data according to the selected age range (0-19, 20-39, and so on). Click on All to turn this filter OFF.

The user can further filter this Visualization by the station:
Select a subset of stations from below the map, by clicking on a station in Right panel and then clicking on the left arrow button. This way, the user can select any subset of stations that is wanted. After that, the user has to select a date from the Calendar, to update the visualization(according to selected stations, and date-time). MultiMap Mode: Clicking on this link will take the user to a screen with two maps. This mode is descrobed in more details below. Map Controls
    The Map has two type of modes:
  1. Single Map Mode:
  2. This mode has the following options:
  3. Playback Mode:

  4. This button is on the top of the map and it pulls up options below the map. Here the user can select stations or Community(from the drop down list) and add them from the right panel to the left using the helper buttons. There is another input box- clicking on this will bring up a calendar with timer to see trips between the selected stations (or stations in the selected community).
    The map will show the trips, stations, and as the usr slides the slider, the visualization is updated. Also, the user can see the weather details on the bottom right of the map pane.

  5. Flow Control Mode:
  6. Clicking on the Flow Control will bring up a list of stations. The user can select a station and then click on the "Show on Map" button to see the outflow inflow on the map, from/to the selected station.
  7. Pattern Mode:
  8. The Pattern Mode will show the user patterns according to the selected stations/communities, and Time (Time of the Day - like lunch, evening, etc, OR by Day of the Week).
  9. MultiMap Mode:
  10. This has similar Flow and Pattern controls for the maps. The multiple maps on the screen allow the user to select different areas of the city, parameters, and so on.
  11. Stand Alone Map Controls:
  12. The map itself has many controls. The user can click on the "+" and "-" button on the map to zoom in/out form the map.

- The user can hover on the top right corner button for the layer control. There are three map views: Aerial View (Satellite View), Map View, and Color View. - The user can check on the check boxes to get layers for stations and community layers.