A peek under the hood of a bikeshare web app

In a previous post, we looked at how data powers bike share systems. The operators of these systems have done a fantastic job coming up with a standard that allows data scientists and software developers to grab data and quickly begin working with it.

Last week, I put together my own, simplified version of a bike-app:

The live version is available here and works by regularly asking the worldwide bikeshare API for updated information on bike availability. Each system in turn sends data over the Internet in JavaScript Object Notation or JSON form. Think of each set of sub-brackets as a packet of information that describes a different station:

[
  {
    "bikes": 6, 
    "name": "31000 - 20th & Bell St", 
    "idx": 0, 
    "lat": 38856100, 
    "timestamp": "2014-06-23T10:51:07.302Z", 
    "lng": -77051200, 
    "id": 0, 
    "free": 5, 
    "number": 1
  },  
  {
    "bikes": 8, 
    "name": "31002 - 20th & Crystal Dr", 
    "idx": 2, 
    "lat": 38856400, 
    "timestamp": "2014-06-23T10:51:07.316Z", 
    "lng": -77049200, 
    "id": 2, 
    "free": 7, 
    "number": 3
  },....

]

The equivalent data table in Excel would have 9 columns, as many rows as there are stations and look something like the following:

While less intuitive than data stored as an Excel table, JSON's key advantage is its workability in the browser. Capital Bikeshare's API pipes data to this website where it is available for developers.

My front-end code - developer speak for the part of the program the user actually sees - in JavaScript pulls in data and loops through each sub-bracket to grab information needed for the map such as station name (name), the current number of bikes (bikes), the current number of free slots (free), and the station's latitude and longitude (lat and lng).

The mapping magic happens thanks to a JavaScript library called Mapbox.js. Lightweight, open-source, and robust, Mapbox greatly simplifies the process of plotting data on a map, making it possible for less-seasoned programmers (such as yours truly) to quickly set something up.

What I love about Mapbox and the rest of the open-source mapping community is the stock they put into great design. I think of DC as one big park with a bunch of buildings in the middle of it and chose this base map because it really highlights this quality of the city.

Now that I have my own personal bikeshare app, I have absolutely no excuse for missing out on a bike this morning. Time for me to wrap this up and get out there!