chicago-311 incidentsStudying the 311 landscape is part of our smart city research

After discovering a handful of Open311 API feeds, we wanted to develop some prototypes that demonstrate how you can quickly make 311 incidents data streaming using Server-Sent Events (SSE) in any browser, or mobile device. Not every city supports Open311, making non-emergency incidents available in an easy-to-use API, using a common format, but Chicago is one major city that does—providing an example of one city that is ahead of the curve with the smart city journey.

To get started,  we signed up for an API key within the Chicago 311 developer portal, and we took the API path for Chicago 311 requests

And created a simple streaming web page using the Streamdata.io JavaScript SDK. All you have to do is take the HTML page below, plug in your own Streamdata.io API key, and you have a real-time streaming version of the Chicago 311 incidents feed.

<!DOCTYPE html>
<html>
<head>
<!-- include streamdataio library -->
<script src="https://cdn.rawgit.com/streamdataio/streamdataio-js-sdk/master/dist/bundles/streamdataio.min.js"></script>
<!-- use json-patch-duplex library for applying patches -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fast-json-patch/0.5.1/json-patch-duplex.min.js"></script>
</head>
<body>
<h1>Streamdata.io - Real Time 311 Chicago Data Prototype</h1>
<p>This is a listing of incidents from the <a href="http://dev.cityofchicago.org/docs/open311/">Chicago Open311 API</a>, showing real time reports from the Chicago, IL. The Chicago 311 API is proxied using <a href="https://streadata.io">Streamdata.io</a> which employs <a href="https://en.wikipedia.org/wiki/Server-sent_events">Server-Sent Events (SSE)</a> to push updates to the browser, which then polls the API every minute looking for updates--if any updates are received, they are delivered to the browser using <a href="https://tools.ietf.org/html/rfc6902">JSON Patch</a>, and rendered to the screen.</p>
<div id="checked" style="text-align:center;"></div>
<hr>
<div id="alerts"></div>
<hr>
<script>
function sortByKey(array, key) {
return array.sort(function(a, b) {
var x = a[key];
var y = b[key];
return ((x > y) ? -1 : ((x < y) ? 1 : 0));
});
}
function processResults(results)
{
var table = document.createElement("table");
results.forEach(function(entry) {
thisdate = entry.requested_datetime;
thisdate = new Date(thisdate);
thisdate = (thisdate.getMonth() + 1) + "/" + thisdate.getDate() + "/" + thisdate.getFullYear() + ' ' + thisdate.getHours() + ":" + thisdate.getMinutes() + ' ';
var tr = document.createElement("tr");
var td = document.createElement("td");
var text = document.createTextNode(thisdate);
td.appendChild(text);
tr.appendChild(td);
var td = document.createElement("td");
var text = document.createTextNode(entry.service_name);
td.appendChild(text);
tr.appendChild(td);
var td = document.createElement("td");
var text = document.createTextNode(entry.address);
td.appendChild(text);
tr.appendChild(td);
table.appendChild(tr);
});
document.getElementById('alerts').innerHTML = '';
document.getElementById("alerts").appendChild(table);
}
(function() {
var eventSource = null;
var stocks = [];
var checked = 1;
function connect() {
// REPLACE WITH YOUR OWN TOKEN HERE
var appToken = "[your Streamdata API key]";
var apiurl = "http://311api.cityofchicago.org/open311/v2/requests.json";
// create the StreamdataEventSource Object
eventSource = streamdataio.createEventSource(apiurl, appToken);
eventSource
.onOpen(function() {
console.log("streamdata Event Source connected.")
})
.onData(function(data) {
results = sortByKey(data, 'requested_datetime');
processResults(results);
document.getElementById('checked').innerHTML = "Updated " + checked + ' time!';
})
.onPatch(function(patch) {
// use json patch library to apply the patch (patch)
// to the original snapshot (stocks)
console.log("udate!");
results = patch.events;
if(results)
{
results = sortByKey(results, 'requested_datetime');
processResults(results);
}
checked++;
document.getElementById('checked').innerHTML = "Updated " + checked + ' times!';
})
.onError(function(error) {
// displays the error message
console.log(error.getMessage());
});
// open the data stream to the REST service through streamdata.io proxy
eventSource.open();
};
function disconnect() {
if (eventSource) {
eventSource.close();
eventSource = null;
}
};
connect();
})();
</script>
</body>
</html>
view raw chicago-open311-real-time-streaming-api.html hosted with ❤ by GitHub

In addition to having a Streamdata.io account and API key. You are going to need to sign up for your own Chicago API key, which you can then add as a parameter to your Streamdata.io settings. We recommend putting it in your application settings and keeping out of the script code to minimize the secrets you are publishing on any web page. You can head over to the Chicago 311 API page to sign up for your own API key, and get more information about their API, including documentation, FAQs, and other resources.

This same setup will work for any of the cities that support Open311 including San Francisco, Washington DC, Boston, and others. We just wanted to show what is possible with Chicago. Eventually, we’ll create real-time streaming versions of all the available 311 APIs and add them to a real-time streaming API gallery we are building. If you would like to see a real-time streaming version of 311 in your city but aren’t sure where to start, reach out and we’ll see what we can do to help.

You can find the demo for this project over at Github or get at the scripts behind it with the Github repository. It is a pretty basic example of a listing page, but it gets the point across what you can do when streaming 511 traffic data.

**Original source: streamdata.io blog

Share this article