Six useful JavaScript libraries for dealing with data

Leaflet

What it does: Leaflet is a lightweight yet robust library for interactive maps, specifically aimed at being mobile-friendly. "It has all the features most developers ever need for online maps" yet is "designed with simplicity, performance and usability in mind," the project website says.

Leaflet code can create map markers, polygons and interactivity (including mobile touch screens and mouse clicks) on a map, but it doesn't have its own mapping data; a base map layer is needed as well. While a project tutorial suggests CloudMade -- not surprising, since CloudMade initially created and open-sourced Leaflet -- it works with other mapping platforms too, such as MapBox and OpenStreetMap.

What's cool: Leaflet has support for tile layers, markers, popups, polygons and more, as well as user interactions such as mouse scroll-wheel zoom on the desktop and multi-touch zoom for iOS, Android 4.0 and later, and Windows Phone 8. And the entire library is just 28K.

Drawbacks: Its creators caution that the lightweight Leaflet "doesn't try to do everything for everyone," meaning that numerous options or complex map interactions may not be included. For example, on the Leaflet forum, several users urge the library to include a set of standard colored markers instead of simply blue, so that a simple command like "marker-icon-red" can change marker colors.

Skill level: Expert.

Examples: Look at this election result map from The Texas Tribune; the 2012 U.S. Senate Election Results from The Washington Post and a post-hurricane subway restoration map by public radio station WNYC.

Learn more: The Leaflet site has a number of tutorials. There's also an OpenStreetMap Leaflet guide.

Searchable Map Template with Google Fusion Tables

What it does: This library is designed to work with Google's Fusion Tables to add search and filtering capabilities to Fusion Table maps.

What's cool: Fusion Tables is an excellent, easy-to-use data visualization tool, but its default mapping does not include searching or sorting. This template makes it easy to add that functionality without having to do the JavaScript coding from scratch.

There is also a guide to adding a text results list when a user conducts a map search.

Drawbacks: Reliance on the Google Maps API means that an application can break if Google changes, limits or deprecates its service.

Skill level: Advanced beginner.

Examples: Try the Chicago Public School Locator or Free Bay Area Tax Preparation Locations from the Urban Strategies Council.

Learn more: Step-by-step instructions are available on the project's Github page.

Note that Google's FusionTablesLayer Wizard also helps generate code for searching a Fusion Tables map.

Tabletop

What it does: If you want to extract data from an online spreadsheet for use on your own website, and Dataset is more than you need, Tabletop "takes a Google Spreadsheet and makes it easily accessible through JavaScript," touts the project's website. "With zero dependencies!" (Note: Tabletop was built for WNYC by Balance Media.)

What's cool: Google spreadsheets are easy for several people to keep updated, and a single click will refresh data on your site. Google takes care of the hosting, access and security issues, while you can concentrate on how you wish to present the data.

While not as robust as a full-fledged back-end database, using Tabletop also means that there's no need for server and database administration -- which not all public-facing projects necessarily merit. It can be used to power Web applications that do more than present spreadsheet data online, such as a "choose your own adventure" slideshow that allows users to answer questions and then see new results based on those answers.

Drawbacks: This is obviously not designed for massive data sets or Twitter-level traffic spikes. Some developers worry that Google will rate-limit high-use applications or change its API so the app might break. In order to deal with these potential drawbacks, it might be worth pulling data into a static CSV file on a server instead of directly into a Web page that will be accessed by your users, although that does add another level of complexity.

Skill level: Advanced beginner.

Examples: WNYC's mayoral candidate tracker is powered by Tabletop and a Google Spreadsheet. Click through and you'll see it's displaying a lot more than text. There's also Mother Jones' open-source Choose Your Own Adventure plug-in for storytelling.

Learn more: Chicago Tribune developer Andy Boyle posted a 90-minute video presentation on Tabletop for beginners.

More libraries

There are a lot more helpful JavaScript libraries for dealing with data, some of which we've already covered. Don't miss Computerworld's earlier write-ups of Google Chart Tools, Highcharts, JavaScript InfoVis Toolkit and MIT Simile Project spinoff Exhibit.

And for even more data tools beyond JavaScript libraries, head to Computerworld's chart of 30+ free tools for data visualization and analysis.

Sharon Machlis is online managing editor at Computerworld. Her e-mail address is smachlis@computerworld.com. You can follow her on Twitter  @sharon000, on Facebook, on Google+ or by subscribing to her RSS feeds:
articles  | blogs .

See more by Sharon Machlis on Computerworld.com.