Turning the Chattanooga City Budget Into an Interactive Experience

17 May 2011

One of my favorite projects recently has been Chattarati's new data visualization site. Our latest work has been to turn out a webapp that allows users to compare different areas of the City of Chattanooga's budget both for a single year or across multiple years.

At first we were only going to tackle this year's budget, so all of the data was in static JSON files which had been converted from CSVs; but it became clear pretty quickly that a lot of the value of this app would come from seeing the trends over time. At that point I moved the data into a MySQL database and wrote a simple API that could be queried via AJAX.

With the data source in place I next turned to finding a JavaScript chart library that would fit our requirements. It needed to be cross-brower (including Internet Explorer), relatively lightweight and look great. After researching about half a dozen and implementing 3, I went with HighCharts. This library is fairly simple to use, has lots of customization options and meets our design requirements.

One of our major requirements for this app is that each chart be shareable via a unique URI. Recent controversies aside, I decided to go with a hashbang URI structure driven by AJAX. This gives us full back and forward support in the browser and lets users copy and paste the link to share the exact view they generated. While I would normally shy away from only supporting these types of URIs, our visualization requires JavaScript anyway, so there's no downside.

We also wanted to let people embed a chart on any website (in addition to the image generation options HighCharts provides us). With a bit of tweaking to the CSS and JavaScript, I was able to make a second embedded view that's suitable for use in an iframe. See this example:

All of us involved with the project hope that the citizens of Chattanooga find this app useful; it's also my hope that this article provides a bit of insight into how I tackle a project like this. As always, if you have any questions, feel free to post them in the comments.