Need to reformat data for use in another application? Plot it on a map? Use it for an interactive Web graphic? These open-source JavaScript libraries can help turn your data into a suitable format for analysis or a compelling online presentation.
What it does: Cascading Tree Sheets (CTS) aims to do for structured data what Cascading Style Sheets (CSS) does for basic HTML display: help define styling for complex presentations. By adding CTS code widgets for things like maps or charts, users can create visualizations with basic HTML -- no JavaScript knowledge necessary.
Cascading Tree Sheets
What's cool: With six available widgets for Google maps, bar charts, bubble charts and more, users just need to code simple HTML tables and lists in order to generate robust online visualizations.
Drawbacks: Visualization options are fairly limited so far -- for example, the choropleth maps widget only handles states in the U.S. And the project is still in an early stage, so things like sample CTS themes aren't fleshed out yet.
Skill level: Beginner.
Examples and learn more: See examples and sample code on the CTS widget page.
What it does: This library gives you functions for binding data to a portion of your HTML document; you can then "apply data-driven transformations to the document." This is not a library like Google Chart Tools, which offers a number of data visualization templates you can customize; this is more of a specialized language that makes it easier to create designs from scratch on an HTML canvas.
Data-Driven Documents (D3)
What's cool: Talented designers can create almost anything they can envision and craft interactive designs exactly as they want. D3 uses jQuery- and CSS-like selectors to choose elements in your HTML document (technically elements within the Document Object Model, or DOM) and then transform them, which many people find easier to use than straight JavaScript. It handles multiple data formats including XML and CSV as well as JSON, and includes functionality that makes it simple to loop through data sets.
Drawbacks: While D3 is powerful, there's also a relatively steep learning curve compared to other libraries listed here. And since you're literally starting off with a blank canvas, you need both coding and design skill to create something worthwhile -- unless you plan on tweaking code "borrowed" from elsewhere.
Skill level: Expert.
Examples: Take a look at The Tech I.P.O.'s and Four Ways to Slice Obama's 2013 Budget Proposal, both from The New York Times.
Learn more: This D3 tutorials page has a lengthy list of resources, including one from Scott Murray that's the basis of the book Interactive Data Visualization for the Web.
What it does: Billed as a "transformation and management library," Dataset helps ease the task of processing data for use in other applications by simplifying things like "handling loading, parsing, sorting, querying & manipulating data from all sorts of sources."
Dataset
What's cool: Dataset can help you perform tasks ranging from pulling in data stored in a Google Spreadsheet to remotely polling a live data feed. You can add calculated columns on the fly as well as group and select data. The API is robust and the library is well-documented.
Dataset is part of the open-source Miso Project, backed by several well-known organizations likely to understand the importance of dependability and need to scale (such as British media outlet The Guardian) with funding from the Bill and Melissa Gates Foundation.
Drawbacks: The multiple capabilities of this library means that there are a number of functions to learn if you want to take full advantage. Note, too, that this is data I/O and manipulation only; you'll likely need other applications for sophisticated analysis and display.
Skill level: Power user to expert.
Examples: Interactive tree map of U.K government spending (also uses D3 and Backbone.js); line chart from remote data (also uses Highcharts).
Learn more:Tutorials on the Dataset website are a good place to start. For a brief case study on using Dataset and Google Spreadsheeets in production applications, see Google Docs + Miso-Powered Aps: a note on collaborative workflow by Daily Beast developer Michael Keller.
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
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.
Searchable Map Template with Google Fusion Tables
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.
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.)
Tabletop
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: The main Tabletop site has a "Getting started" tutorial. And 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.
Read more about web apps in Computerworld's Web Apps Topic Center.