Welcome To Our Project!
It's Nice To Meet You
How to Use the App

The application, that is reachable from here , shows real time data around selected path

The App

At the beginning, the application shows a map of Chicago with layer controls, a weather box and the currently selected path

On the bottom left part of the screen, we have a small controller to select three different map views and the path controls


Map Controls

Path Controls

All the data is shown either in a bounding box or around given path extended up to 2 block radius.

The data shown as different layers on map are :

  • CTA Bus stops
  • Divvy Stations
  • Crimes reported
  • Street lights One out and All out - Currently Open
  • Pot holes - Currently Open
  • Abandoned Cars
  • Failed Food Inspection
  • Foursquare

Layer Toggle

All the shown data is temporally classified into last week and last month data.

This distinction is graphically represented with opacity of the icons on the map. The less visible an icon is the less temporally recent it is

To show particular data layer user has to click on the category he is interested on the layer controller present on left.

This turns on the selected layer and data is plotted on the graph. The user has to click again on the layer controller to turn off that specific layer.

Additional details regarding a particular incident can be obtained by simply clicking on the corresponding icon on the map. This will give us a popup box showing all the other details available for that particular incident

For example on clicking on one of the icons of divvy stations you can get information on number of bikes available, no. of docks available at that station etc.

Selected Layer

Divvy Popup

By default the route from UIC to Museum Campus is shown on the map. User has the freedom to change the source and destination.

He can do this by moving the end points of the route that is drawn. He can also change the route by clicking anywhere on the route and draging it to his desired location on the map.

All the above mentioned data points will be shown around this path extending up to 2 blocks in radius.

UIC To Museum Campus

Dragged Pin

On the right of application we see the graphs. 'Along Your Route' graph shows the number of potholes, abandoned vehicles, crimes reported, street lights out around the selected path. This graph refreshes as you keep on updating the path on the map by dragging the pins.

The same graph shows the data described before but for the entire Chicago City. This gives a nicer way for the user to compare data along his route to the whole city's data.


The weather box on the top left of the screen gives current date and time, weather and temperature in Celsius and Fahrenheit scales. It also gives you information of the weather condition.


Sample animated Weather Icon

CTA BUS Stations

Clicking on this component will plot the CTA bus stations around the given path.

On clicking on particular station we get Station Name on the popup box.

CTA Buses

This layer when activated plots all the CTA bus services that are currently running around the given path.

The position of buses is updated for every minute as per the information proided by the CTA API.

Clicking on particular bus will give you the route of the bus you selected and its destination.

Divvy Stations

Activating this layer will plot all the available divvy stations around the selected path.

Clicking on particular station will give you additional details like number of bikes available and number of docks available in those stations.

Crime Reports

This layer will plot the locations where crimes are reported. Clicking on particular crime marker will give you details on when the crime has been reported.

Street Light Out

This layer when activated plots location where a streetlight is not working. It also plots a marker if none of the street lights are working in given location.


Activating this layer will plot all the potholes that are currently open around given route. Selecting on a particular pothole marker will give you when is that pothole reported.

Abandoned Cars

This layer when activated plots the location of abandoned cars that are reported. As in the previous case it gives you when the car has been reported.

Failed Food Inspection

This layers plots the markers on locations where restaurants have failed in their food inspection reports.

Selecting on particular marker will give you the name of restaurant and when the inspection happened.


Foursquare layer plots the most popular/checked-in places around the center of the given.

Selecting on particular marker will give you the name of the place that most people have checked-in and what type of venue is that like Art Museum, Restaurant etc.

Uber Estimates

For activating this layer we need to give the source and destination points. After providing them we will get the cheapest Uber product available and the estimated price for that Uber product.

Song Kick

This data layer gives us the list locations where some recreational activity like concerts are happening around the city.

On clicking particular marker we can get additional details like name of the event, date of the event and what type of event it is.

The data sets that we used here are coming from few well known API end points

Each API end point has its own API key using which we are legally allowed to retrieve required information from them

The following are the API end points:

  • City of Chicago Data Portal : The Socrata Open Data API allows users to programatically access a wealth of open data resources from governments, non-profits, and NGOs around the world. City of Chicago has made is datasets open and available to developers using SODA API. For our project we are using this API to get Potholes, Abandoned Vehicles, Crimes, Streetlights one out, Streetlights all out and Food Inspection datasets
  • Weather Underground : This API endpoint is used for showing weather related information on the map along with sunrise and sunset times of the day
  • Uber : A well known ride-share service, Uber's API is accessed to get time estimates of nearest available Uber product and the minimum possible price estimate
  • Foursquare : This API endpoint is used to retrive available famous venues in a given bounding rectangle and list of trending venues near a given location
  • CTA : Chicago Transit Authority provides stations, routes, busses and preditictions data to developers
  • Divvy Stations This API end point returns a JSON object which has data of all the divvy stations. Data include number of active bikes in any divvy station and dock information
  • Song Kick This API gives information on events such as concerts, music festivals etc happening around a given location
  • YQL : The Yahoo Query Language platform enables users to query, filter, and combine data across the web through a single interface. It exposes a SQL-like syntax. We used this service in combination with the API endpoints listed above to perform some SQL like operations

As all the endpoints returned JSON objects and in majority of the cases the data retrieved is clean.

Few Challenges we faced with these API endpoints are documented below


CTA API has been the hardest one to deal with. It is, in fact, not possible to directly query for the busses or the stations cointaned in a given bounding box

To get the busses location on the map we first created a static list of all the CTA Bus station around the city.

We then dinamically filtered the stations not contained in the selected area. By doing so we can dinamically generate a list of routes going through our box.

By having those routes we can finally query the CTA Database and get the location of each bus currently active on the queried routes

The retrieved busses are then filtered again by the application

City of Chicago

City Of Chicago end points did not return all the required fieds in certain data sets especially crime dataset.

Few important parameters like latitude and longitude are sometimes missing from the data.

We have ignored those records for which we didn't have location data


Not all API endpoints returned the results in a given bounding rectangle.

We used and hybrid approach to deal with this.

Whenever possible we used YQL's SQL like syntax to filter data before storing it (Preprocessing)

We then filtered again based on the current path and the returned data (Postprocessing)


We have used AJAX calls to deal with asynchronous issues in Javascript

The app was meant to run on the last version of Chrome and has not been tested on any other browser.

To run the application a local web server is needed. Simple python HTTP Server will serve the purpose.

Once you have your web server up and running please download the source code as pointed in Resources section.

Now extract the downloaded folder and copy the extracted folders to the web server's root folder.

Open up your browser and type in "localhost" in the address bar then browse to the folder of the app.

For the project we have used the following libraries

  • D3 for showing graphs and combining new data with refreshed data while updates happen
  • Leaflet.js for interactive map
  • jQuery for DOM manipulation and Ajax Calls
  • Amplify.js for the Publisher Subscriber backbone
  • The Open Source Routing Machine for Leaflet
  • Yahoo Query Language

Most people suggest UIC students to stay near to the university and also to stay away from southern part of Chicago.

We expected that there are more crimes reported on southern part of Chicago. But this is mot the case.

Number of crimes are spread evenly around the city thus making Chicago one of the dangerous places to live.

Crimes in Chicago

More number of abandoned vehicles are reported around Nearwest side and Southloop as shown in the given picture.

The possible reason for this would be that those vehicles are probably towed vehicles which are placed by Department of Transportation

Abandoned Vehicles

We checked how many restaurants around UIC failed food inspection.

In total there are around 15 restaurants that failed around UIC. Taylor street has many restaurants.

Taylor street has many restaurants. But to our surprise only 2 of them failed food inspection, Jimmy John's and Papa John's.

Failed Food Inspection


Role : Icons and UI

  • Contributions
  • MockUps
  • Icons

Role : Front-End, Back-End, Integration

  • Contributions
  • Leaflet
  • Generic Layer
  • Divvy API
  • Multiple API Integrations
  • Website

Role : Front-End, Back-End, Integration

  • Contributions
  • BackEnd Logic
  • Routing Machine Integration
  • Controller to Leaflet Integration
  • Graphs
  • Video

Role : API

  • Contributions
  • Uber API
  • SongKick API
  • FourSquare API