View on GitHub

Project 3: Right Here, Right Now

CS 424 Project

Home Youtube Demo Run the App Project Data Team SourceCode How-To Interesting Findings and Patterns
Download this project as a .zip file Clone This Project

How-To

How-To Overview

Project 3 is a data visualization application on real-time feeds of Chicago 3-11 data (potholes, abandoned vehicles, etc.), CTA Bus Tracker data, and Divvy Bike data. On this page, we will describe both how to use the application and what things can be accomplished with the application.

Running the Application

To run the application, simply click on "Run this App" in the Navigation panel above. Here, you will find the map of Chicago (using OpenStreetMap), along with control buttons\configurable settings on the right hand and left hand sides of the screen. The image below displays this initial screen.

Application Controls - Left Tool Bar

There are 5 primary control types in the left tool bar as depicted in the image below. The user can click the current location to get his or her current location on the map. If a user wants to see, for example, potholes in a specific area of Chicago, he\she can click on the "Potholes" toggle button on the toobar on the right hand side of the screen, "Viewable Data" and then draw a shape from the left hand side tool bar, "Draw Shapes Bar". We also provide the user with zoom control using the "+" and "-" buttons in the "Zoom Control Bar". Finally, if a user would like to delete a shape that he\she drew using "Draw Shapes Bar", it is possible to do so by using th e"Edit Shapes Bar". We describe each control type in more detail below. After the user draws a shape, the user can actually analyze generated visualization graphs using the graph icon button on the "Information Bar". This is a very useful feature if the user would like to compare crime for a specifically selected area versus the entire city of Chicago, or even comparing other datasets such as potholes, abandoned vehicles, etc.

Application Controls - Right Tool Bar

There are four primary control types in the right tool bar as depicted in the image below. We enabled some nice features for the user to explore. The user can switch between street view and satellite\aerial view (perhaps the user is interested in transportation and needs to understand the streets whereas another user may like to see how the actual destination area appears). The user has the option of adding the community layer using "Community View" for the pure reason that the user can better identify with various communities rather than just streets. The "Viewable Data" control enables the user to toggle between various datasets to see the conditions in (approximately) real-time for the area that the user selected (that is, using the "Draw Shapes Bar" as described in the previous section on the left toolbar). Finally, the user can filter on information as well, including one week versus the entire month of data on the map, the user can turn on or off the weather, and finally, the user can get all data for specifically just the region between UIC and Museum campus.

Refresh

Suppose the user is watching the application for crime as the user wants to drive to a destination taking a path with less potholes. However, suppose that a user selects a good path but then several newly reported potholes appear on that path! How will the user be able to identify this newly reported data since approximately the past 2 minutes? The refresh feature helps in exactly addressing this problem. Each time new data appears on the map within approximately the past 2 minutes, the application will identify the new data with a popup. We can see the before versus after snapshot for potholes below as an example.