Sortable, searchable table of law enforcement agencies, Middlesex County, MA

Tabletop.js is a Javascript library that lets you use Google spreadsheets as the data source for web apps.  It’s pretty neat — especially since we know there are so many simple but useful web and mobile apps we can create where setting up a full-on database is overkill.  What if you want to make a sortable, searchable list of craft breweries?  Or a schedule for a music festival?  Do you really have to bust out MySQL for that?

Well, with Tabletop.js, you don’t.  The other great thing about using Tabletop.js is that a lot more people know how to use a Google spreadsheet than know how to enter records into a database.  You can share responsibility for updating your web app with anyone who knows how to use Google Docs, or use Google Forms to let members of the public add new records to a list.

Chris Keller wired up Tabletop.js to a nifty sortable, searchable, and nicely styled web-based data table, which I use here to create a sortable, searchable table of law enforcement agencies in Middlesex County, Massachusetts, where I live. I decided to do that because I live in Watertown, Massachusetts.  Until recently, very few people outside of eastern Massachusetts knew about Watertown — where it was, what it looked like, what happened there.  That was before the Tsarnaev brothers led police on a car chase through my town, culminating in a gunfight and explosions.

So I thought I’d do my latest plunge into civic data by creating a data table showing all the law enforcement agencies in my county, how many full time police officers per 1,000 residents each police department has, and the population of each city or town.  (College police departments are also represented in this table.  I thought about taking them out, until I remembered that Sean Collier, the 26 year old police officer who died, was a campus police officer at the Massachusetts Institute of Technology (MIT)).  You can see the table here: Sortable, searchable table of law enforcement agencies, Middlesex County, MA.

I’m a noob, and I had a tough time getting my mind around Tabletop.js, but it was worth it.  Also, once I finally got it to work…I happened to be wearing my “Watertown Strong” t-shirt.  Coincidence?  Nah.

Watertown Tshirt-thumb-520x345-101018



Now that I’ve got it working,  I’ll be creating another Absurdly Illustrated Tutorial for those of you who want to try out Tabletop.js.  If you’d like to see my other tutorials, see:

The Absurdly Illustrated Guide To Your First Dynamic, Data-Driven Timeline
The Absurdly Illustrated Guide To Your First Data-Driven TileMill Map

Category : Uncategorized

4 thoughts on “Creating Interactive, Web-based Data Tables With Tabletop.js

  1. Hilary Niles says:

    Hi. I just discovered your absurdly illustrated guides. They rock! I look forward to the one on tabletop.js.

    And in the meantime, I thought you might be interested to know (if you don’t already) about some non-tabular formats tabletop can feed into. I saw Tasneem Raja from Mother Jones give a presentation on it at NICAR this year. She produced the 47% graphics page (http://www.motherjones.com/politics/2012/09/charts-47-percent-romney-tax-data) using tabletop — with just one editor and two researchers, in under five hours. There are more examples, too.

    “Everything is data and everything that’s data can be structured,” she said. It was months ago now and I still can’t get that out of my head. Very helpful paradigm for opening up possibilities.

    I look forward to keeping up with your work. Thanks for providing the great resources!

    1. lisawilliams says:


      I’m so sorry I didn’t get to this comment right away — I’ve been having a very busy time with work! I did hear about Tasneem’s presentation, and I’d met her earlier at a (non-SXSW!) conference in Austin about a year ago.

      If you’d like to talk sometime I’d very much welcome that.


      1. Hilary Niles says:

        Hi Lisa,

        No worries at all! And how cool that you’d heard of Tasneem’s presentation and even met her previously.

        I’m moving to Vermont next week so things are a little hectic here, too. But I’m going to be getting my paws into all sorts of data projects, and will likely make my way to Boston to check out the Hacks Hackers community there, etc. So I’d love to keep in touch and hopefully connect in person sometime, too.


  2. Henry Lau says:

    Thanks for the great tutorial. The thing that stumped me when trying to create my own was you have to name the values for mDataProp as lower case

Leave a Reply

Your email address will not be published. Required fields are marked *