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
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
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.
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.
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.
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.
Steep Learning Curve
- 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
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.
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
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.
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.
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.
Projects & Insights
UX Comics: Visually Communicating User Experiences
An interview with Bonny Colville-Hyde, a User Experience Architect, about UX Comics,
Souls Grown Deep Foundation
Translating Brand Strategy Into an Effective Website
In a complex, multi-disciplinary process that spans months, teams need a shared visio