Mayor's Hotline Explorer

Explore the interaction between Boston and its citizens via the Mayor's Hotline

Not that long ago, I read a great book titled The Responsive City: Engaging Communities Through Data-Smart Governance. The entire first chapter of that book is dedicated to Boston's efforts to engage with its residents, from Mayor Menino's original phone hotline to the Citizens Connect app. It really sets the stage for how a city can use technology to improve communication with its citizens and provide more responsive services.

Inspired by that story, we wanted to try to offer city officials a simple way to examine the data being collected through the hotline in a way that wouldn't require help from a business intelligence guru or a data expert.

We've had previous experience using the dc.js library, which does this great job of supporting visualizations where users can interact with multiple dimensions of a data set in real time. It helps answer questions like: what types of submissions are coming in between midnight and 6am? How long are we taking to resolve issues? What Neighborhoods are reporting the most issues or the least? How much traffic comes in via a phone call versus the Citizens Connect app?

Initially, we wanted to help visualize the entire dataset that goes back to 2011. There are about 600,000 records there. dc.js is actually up to handling that much data, but we also wanted to be able to render the data on a map. Leaflet.js is a great Javascript mapping library that's easy to get started with. We chose it mostly because we really liked the aesthetic available with CartoDB's Positron map tiles. We found that Leaflet would become really sluggish, even with the clustering you see in the final app, when we tried to present too much data. So we settled on looking at only the last 30 days' worth of data as a way of providing a meaty enough dataset without overwhelming the ability to present the data on a map. There's still roughly about 20,000 records in just the last rolling 30-day period.

We think that the animations that dc.js provides are really helpful: it helps users immediately begin to understand how the variables are related to one another. We were really pleased that we could get this level of functionality with only a small investment in code.

The source code is available on GitHub.

Try it out