Tracking Bike Share Usage in Philadelphia

What if I tell you that you can create attractive interactive charts with virtually no knowledge of JavaScript? In my job as a system administrator, I deal with data of some kind on a daily basis, but didn’t think I could do this kind of front-end work with such ease. In this article, I will show you how I succeeded.

The reason I found myself needing to create a chart was my fascination with something rather analog (well, sort of): The Indego bike share program in Philadelphia. Indego lets anyone rent a bike by the hour and has approximately 100 stations for picking up and dropping off bikes all across the city.

When one of the stations was installed across the street from my apartment, I became very interested in the data behind the sharing program. Fortunately, Indego offered an API, and I signed up for access as soon as it launched.

Of particular interest was their GeoJSON API. This data includes the current number of bikes and docks available at each station. For example, this is the University City Station data on a random Saturday afternoon:

{
   "geometry": {
       "coordinates": [
           -75.18986,
           39.94887
       ],
       "type": "Point"
   },
   "properties": {
       "addressStreet": "3051 South St.",
       "addressCity": "Philadelphia",
       "addressState": "PA",
       "addressZipCode": "19147",
       "bikesAvailable": 11,
       "closeTime": "23:58:00",
       "docksAvailable": 24,
       "eventEnd": null,
       "eventStart": null,
       "isEventBased": false,
       "isVirtual": false,
       "kioskId": 3020,
       "kioskPublicStatus": "Active",
       "name": "University City Station",
       "openTime": "00:02:00",
       "publicText": "",
       "timeZone": "Eastern Standard Time",
       "totalDocks": 35,
       "trikesAvailable": 0
}

Then I came across a great blog post called Visualizing Indego bike share usage patterns in Philadelphia. Randal showed the ebb and flow of stations. On weekdays, stations in neighborhoods lose bikes while stations in business districts fill up as people commute to work. Even though it felt like a big challenge at first, this inspired me to make my own charts.

Since the Indego API does not have any way of looking at historical data, I had to do my own thing. Although I consider myself more of a systems administrator, I am very familiar with HTML and PHP. At first, I just printed the current number of bikes and docks at each station using different colored characters (█) since that is the extent of my web design skills. This can still be seen on https://indego.ericoc.com/. However, I wanted historical graphs to see past bicycle usage for each station.

Anyways, I started storing data in MySQL from the API so that I could graph usage over time. Researching different graphing libraries, I came across Highcharts because it seemed simple enough and had lots of examples available. The USD to EUR exchange rate demo looked like what I wanted – a graph of data over time. I started to tweak the demo for my own needs with lots of trial-and-error. I created a PHP script that returns JSON from my MySQL database to Highcharts. I was not very familiar with JavaScript, but it totally worked out:

Now I can display awesome graphs of the number of bikes from each station over time. In the future, I would love to be able to integrate a map of the city of Philadelphia with the historical data somehow. Additionally, the bike trip information offered by Indego could be interesting to visualize in a future project!

 

Consent for marketing cookies needs to be given to post comments