6 Great Interactive Data Visualization Tools (Part 1)

Submitted on Wed, 8/15/2012 - 4:27pm
While it's tempting to just jump in and add the latest cool feature to your site, you have to first make sure it's a good fit for your users and your brand.

Websites are loaded with eye candy these days — from slick user interfaces to interactive maps to cool photo slideshows — all achieved without Flash, just HTML, CSS and Javascript. And these technologies are free, open and can be utilized in essentially every current web-browsing device. While it's tempting to just jump in and add the latest cool feature to your site, you have to first make sure it's a good fit for your users and your brand.

In this 2-part series, I'm going to focus on the rapidly changing world of interactive tools for data visualization, or dataviz. These tools are especially useful for nonprofits and financial organizations whose brands rely on sharing metrics to deliver impact and value. Recently, many exciting HTML/CSS/Javascript-based data visualization tools have emerged. Some focus their attention on traditional charting and graphing, but others delve into the world of geocharting, heatmaps, timelines, and more.

In working with clients, we've researched and used numerous technologies for interactive charting. To help you better understand what's out there, I've selected six of our favorites, roughly ordered from simplest to most complex. In this article, we'll be diving into the first three; check back soon for part 2.

  1. jQuery Visualize
  2. Google Charts
  3. Highcharts
  4. Simile Exhibit (Part 2)
  5. JavaScript InfoVis Toolkit (Part 2)
  6. D3.js (Part 2)

1. jQuery Visualize

Developed by the Filament Group (the fine folks who helped bring us the awesome jQuery UI), jQuery Visualize is a great entry point into the world of dataviz online. jQuery Visualize is by far the simplest and easiest dataviz tool I know of. It simply converts an HTML table into a variety of charts – no need for a data file or anything. If you've used jQuery at all, you can get this up and running in minutes.

  • Visualization Types Supported: Pie Charts, Bar Charts, Line Charts, Area Charts
  • Data Input Sources: HTML table
  • Data Output: HTML, Canvas
  • Styling Options: Parameters, CSS
  • Type: Javascript library (uses jQuery)

PROS

Uses HTML Tabular Data
For me, the most useful feature in Visualize is that it will draw charts directly from an HTML table - no need to put the data into a special format or file. So, for example if you already have tables of data on your site, financial or impact metrics, for example, all you need to create a great-looking pie or bar chart is a single jQuery call.

Flexible Styling
The default styling of the charts created by Visualize is nice - usable in many situations. What makes Visualize really great is the level of ability to style with CSS. Almost every element in Visualize's charts can be CSS styled, except the elements in the actual chart area, which are mostly dealt with via Javascript parameters. What this means is that every bit of data you share on your site integrates perfectly with your site—and when you make global design changes down the road, there's no need to remake chart graphics to stay on-brand.

CONS

Limited Functionality
jQuery Visualize does what it does very well and not much else. There's no hovering over a data point to see the value, no animation options. If you want a more robust experience you'll need to look elsewhere. But if you're looking for easy, CSS-styleable charts from existing data on your site, look no further.

2. Google Charts

It seems Google is doing everything these days and one of the things it is doing very well is dataviz. Google Charts is one of two major Google dataviz products, concentrating on more traditional chart types and ease-of-implementation. The other, Google Fusion Tables, is primarily geared toward mapping, but also does other chart types.

  • Visualization Types Supported: Area Charts, Bar Charts, Candlestick Charts, Column Charts, Combo Charts, Gauge Charts, Geo Charts, Line Charts, Pie Charts, Scatter Charts, Stepped Area Charts, Table Charts, Tree Map Charts
  • Data Input Sources: Javascript, JSON
  • Data Output: iFrame
  • Styling Options: Parameters
  • Type: Service

PROS

Ease of Use
Google Charts are very easy to set up; they render quickly and have some nice interactive touches (e.g. hover over a pie chart wedge and you automatically get a nicely styled popup displaying the name and value for the wedge).

Good Preset Parameters
Google Charts is ready to go with a good set of useful styling and layout parameters (colors, position of legend, type sizes, etc.) that will cover most scenarios. You can get a pretty strong on-brand look that integrates with your site's look & feel pretty easily, though fine-tuning details can be a bit limiting.

CONS

Limited Styling
Although Google does a good job providing a useful set of styling parameters, nothing quite beats the flexibility of CSS for controlling the look and feel of your charts. Since each chart is an iFrame, there's no access to styling elements via CSS, only through script parameters. It is usable and, in most cases, flexible enough, but in our experience, Google Charts requires a bit of trial and error to get just right. Also worth noting, cross-browser testing is a bit difficult.

Unexpected Default Settings
We recently noticed that Google has added features to the charting tools (they are very, very busy over there at Google…) and that some features are enabled by default. This is great and all but, if you've used Google Charts in the past, the new default features will be enabled on your existing charts. This is a pretty major drawback that requires you to keep an eye on your projects that use Google Charts, then go back and disable features to keep charts looking as originally designed.

3. Highcharts

Highcharts is the only pay-for product in my roundup (free for non-commercial use, $80 for a single website license, other pricing options here). However, in my opinion, you get what you pay for with Highcharts. In addition to a very robust set of default chart styles, Highcharts is also very customizable and has some really nice animation features. It can pull in data from a wide range of sources and can also export a wide variety of graphic types directly from the webpage. Very handy!

Highcharts also has a fantastic zooming feature – just draw a box around what you want to see closer and voilá! Check it out! Really great.

If you are looking for the sweet spot between usability, flexibility, styleability, and out-of-the box features, Highchart is an excellent all-around tool for robust charting and graphing.

  • Visualization Types Supported: Area Charts, Bar Charts, Line Charts, Pie Charts, Scatter Charts, Dynamic Charts, Combinations
  • Data Input Sources: Javascript, CSV, XML, JSON, HTML table, dynamic
  • Data Output: SVG
  • Styling Options: Parameters, CSS
  • Type: Javascript library (needs jQuery, Prototype, or MooTools)

PROS

Themable
You can create a master theme file for all of your charts and call it from the chart method. Nice touch to make styling easier and more consistent across projects.

Filtering
You can set Highcharts up to allow the user to show and hide series of data. See this in action here by clicking in the legend area on the person's name. Pretty nifty.

HTML Table Input
Highcharts can also read data from an HTML table that is on your page, like jQuery Visualize. This is really handy if you prefer to not deal with external data sources.

Animations
Highcharts can "draw" the chart on the page with some really nice animation effects, like this. It's a very nice touch that makes your charts and your site look super pro.

SVG Output
Highcharts outputs a very nice SVG graphic that, when opened in Illustrator, retains type boxes and everything. It's potentially a very handy feature for web/print workflow solutions.

CONS

Cost
Not that it is that much money but the expense of Highcharts might turn some clients off. In my opinion, the level of polish and capability of this product easily justifies the cost.

Read part 2 to learn more about Simile Exhibit, JavaScript InfoVis Toolkit and D3.js.

Paul provides 15 years of experience in digital production and workflow development. As Senior Producer, Paul is responsible for overseeing and executing development of interactive work for MSDS's clients, working as the team lead for back-end and front-end development. Paul plays a hands-on role in planning and developing MSDS's interactive engagements, from user experience design and prototyping through to execution, overseeing quality assurance testing, and providing client training and support.

This article was originally published at http://www.ms-ds.com/our-thinking/insights/6-great-interactive-data-visualization-tools-part-1 and is reprinted with permission.