UPDATE: While many of the tools featured in this 2012 article are still effective and have developed to become even more useful, you may be interested in our more recent series on Interactive Data Viz Tools.
Complex Data Visualization Tools
Welcome back for the second part of my series on interactive data visualization (dataviz) tools. In Part 1, we covered three cool tools for visualizing charts and graphs and many other data types on a webpage. In part two, we take a look at three more tools that are a bit more complex but have some incredible data visualization capabilities.
- jQuery Visualize (Part 1)
- Google Charts (Part 1)
- Highcharts (Part 1)
- Simile Exhibit
- JavaScript InfoVis Toolkit
- D3.js
4. Simile Exhibit
Exhibit is a very robust and customizable offering. One of its main strengths is a unique approach to rendering the data. In addition to easy-to-use filtering, sorting and search tools, it allows you to use an HTML template (called a “lens” in Exhibit) to be constructed to get everything on the page looking exactly how you want it. It’s almost like a mini-CMS for dataviz where you can access your data through attribute values directly in the lens. For projects that require a high degree of sensitivity to look and feel, this extreme level of flexibility for building data visualizations is fantastic.
- Visualization Types Supported: Line Graphs, Maps, Scatter Plots, Multi-Filterable Lists, Timelines, Timeplots and more…with widgets!
- Data Input Sources: JSON, Spreadsheet
- Data Output: HTML
- Styling Options: CSS
- Type: Javascript library
PROS
Flexible & Powerful Approach to Design
I really like the approach of Exhibit, where data is presented through a “lens” – an HTML template shell that elements are placed into. This makes the system completely customizable and CSS styleable, which means designers love it, and creating consistency for clients’ brands is a snap.
Strong Filtering/Sorting/Search
Letting users filter your data by any number of criteria is incredibly useful, and turns your information from static content into a real interactive feature. Filtering is built right into Exhibit and it’s easy to implement. Server-side filtering can be a chore (not to mention expensive), so Exhibit really stands out in making user filtering incredibly quick and easy. The same goes for sorting and search. Exhibit makes it very easy to give your site users control over getting exactly the view of your data they want, and therefore a more valuable understanding of why it’s important.
Strong Documentation
Jumping into complex dataviz tools can be an undertaking and requires some trial and error. Exhibit really speeds the process with great documentation on their website and some excellent beginner tutorials.
Widgets!
Want top push Exhibit even further? You can add functionality with widgets. There are widgets available for bibliography and citations collections, a CoverFlow style image viewer, timelines, and timeplots—just to name a few. This kind of product extension makes Exhibit one of the most robust and flexible options out there for data visualization.
CONS
Steep Learning Curve
Like the other more complex libraries, there is more coding involved with Exhibit than most options, and having previous Javascript experience is definitely very helpful. I did, however, find the tutorials to be really well done and fun to do, so once you get started, it’s really easy to get on a roll.
5. Javascript InfoVis Toolkit
Javascript InfoVis Toolkit is a nice suite of tools for creating charts and graphs on a webpage. It features a nice list of supported chart types and introduces some animation features into the mix (e.g. the bars of a bar chart can expand to their size when the chart is loaded – this kind of thing). The animations are nice and can definitely add an extra level of polish to your site. There are also some cool interactive features, like applying a “Filter” to a graph by clicking on it. The graph then just shows the one series you clicked on until you remove the filter. Check out the demos to see more of what this toolkit is capable of.
- Visualization Types Supported: Area Chart, Bar Chart, Pie Chart, Tree Map, Force Directed, Radial Graph, Sunburst, Icicle, Space Tree, Hyper Tree
- Data Input: JSON
- Output: Canvas
- Styling: Javascript parameters
- Type: Javascript Library
PROS
Unique Chart Types
I really like the various non-standard visualization types available in the InfoVis Toolkit. This tool might be overkill for the occasional pie chart but could really shine when you have to approach display options for more complicated data.
Animations / Interactions
The animations are a great addition to these charts and graphs. They lend a nice Flash-like quality to these charts that is really nice. And the ability to interact with these graphs – dragging stuff around and manipulating the graph (like this one) is very cool and could be really useful.
CONS
Learning Curve
With all of these great features comes complexity and, although the documentation on the website appears to be good, this tool requires some good Javascript experience to get the most out of it.
6. D3.js
Wow, D3.js is cool! I just got lost for a few hours poking around the D3 website and the possibilities seem endless. This tool definitely requires a pretty high level of expertise with Javascript and JSON but it generates some gorgeous, sophisticated charts. Check out the examples.
D3 isn’t really like the others. It is not a “ready-to-go” charting tool but rather a framework for drawing data-based elements. The D3 website says it best: “Rather than provide a monolithic system with all the features anyone may ever need, D3 solves only the crux of the problem: efficient manipulation of documents based on data.”
And, since you can create SVG graphics, you could use this output anywhere, including print applications. D3 could be the center of a slick web/print publishing workflow for a graph heavy project.
- Visualization Types Supported: All? The sky’s the limit.
- Data Input: JSON, GeoJSON, CSV
- Output: HTML, SVG
- Styling: CSS, Javascript
- Type: Javascript library
PROS
Unlimited Flexibility
You can pretty much use D3.js to draw anything you want based on data. This is an amazing tool for people who create new data visualizations and visualizations built on really large datasets.
Output
Very cool that you can tell D3 to create HTML items as well as SVG. Definitely opens to the door to styling with CSS, which is ideal.
CONS
Learning Curve
You’ve got to be an accomplished Javascript, JSON, and math person to get D3 to jump through hoops. And some of the examples boggle the mind but go ahead and run through the tutorial. It isn’t that bad and, if you are familiar at all with jQuery or Prototype, a lot of this will look familiar. And a lot will not…
Conclusion
These six products are just the tip of the iceberg for dataviz. There are dozens of other great products out there. But these should give you a good idea of what is happening and a sense of the range of capabilities and complexity of the interactive dataviz world.
It is so exciting to see so many open-source data visualization projects and the list is growing every day. As browsers continue to support more and more robust visual features and computers and mobile devices continue to get more powerful, I’m sure we can expect the world of data visualization to get even more sophisticated and expansive.
