Features of 13 Data Visualization and Chart Libraries

The great news is that there are a large number of terrific libraries and tool kits available for visualizing data on the web.  Some of the best of them are even free.  In my post providing a list of data visualization tools, I briefly covered about 30 of these tools, but there was something more to do here.  Each of these libraries have different charts, graphs and diagrams that they focus on and the implementation and language often differ.  To provide something for myself and the community to keep track I have prepared a cheat sheet (grid).

Included are the broader libraries that cover a lot of visualization types.  I may not have done justice to all of them, as the type of charts are those that there were demos for.  There may be cases where other types of charts are possible with a little work.  Also provided the language the library is designed to work with\built with.  There maybe a few cases where implementation can actually be done in a number of different languages.  For example the Open Flash Charts can be implemented in PHP, Perl, Python, Ruby, .NET, Google Web Toolkit and JAVA.

For a larger clickable image go to Perlita Labs.

Thumbnail of Comparison Grid for Data Visualization Tools

Links:

Axiis: Open Source Data Visualization
Prefuse: Data Visualization for the Web
Google Chart API
Google Visualization Widgets
The JavaScript InfoVis Toolkit
jFreeChart: 100% Java Chart Library
jQuery Visualize: Charts using HTML 5 Canvas
Open Flash Chart 2: Open Flash Chart Project
Prefuse: Information Visualization Toolkit
Protovis: A graphical approach to visualization
SIMILE Widgets
PChart: A PHP Class to build Charts
Style Chart

Flickr Kaleidoscope built with Processing

I remember getting my TRS-80 when I was about 10.  I flipped through the manual that came with it and was entranced at the kaleidoscope program at the end of the book.  I was amazed to see that a computer could reproduce these patterns and colors in beautiful synchronization.  This is my first real memory of programing and computer generated art.

I decided to revisit that memory and create my own kaleidoscope. It allows you to search Flickr titles and tags to return a set of images. You can then flip through the images and adjust the number of mirrored slices.  If you are interested in how I built it please read on.

I have been developing with Processing for a couple of years and wanted to see what could be done to make a Kaleidoscope. The technology stack that I came up with was to using Processing to access a dynamic php page that looked up images on Flickr via a REST call to YQL. So let me explain what that looks like…

Let’s start with the PHP:

<?php
$Limit=10;
$request=”http://query.yahooapis.com/v1/public/yql?q=select%20farm%2C%20server%2C%20id%2C%20secret%2C%20title%20from%20flickr.photos.search(0%2C”.$Limit.”)%20where%20text%3D%22″.$Term.”%22%20&format=xml”;
sleep(1);
$response = file_get_contents($request);
$parsed_xml = simplexml_load_string($response);
foreach($parsed_xml->results->photo as $current){ //stopped here need to start inserting
$farm = $current['farm'];
$id= $current['id'];
$secret=$current['secret'];
$server=$current['server'];
$title=$current['title'];
$imageURL = ”http://farm”.$farm.”.static.flickr.com/”.$server.”/”.$id.”_”.$secret.”.jpg”;
echo $title.”|”.$imageURL.”n”;
}
?>

As you can see it is pretty straight forward.  I use YQL (there may be a # of call per day limit on this) to conduct a search based on a term passed to the php page.  I then parse the results into variable that are then used to build urls.  The generated urls are then output as text.

While the program is running I call this page from processing by:

public void imageLoader(String term){
loading =0;
String[] lines;
lines = loadStrings(“http://www.PerlitaLabs.com/Kaleidoscope/PicturePull.php?term=”+term);
lineCount=lines.length;
for(i=0;i<lineCount;i++){
text(“.”, 50+(3*i), 20);
String[] pieces = split(lines[i], ‘|’);
println(pieces[0]);
println(pieces[1]);
loadedImages[i]= loadImage(pieces[1]);
fileCount++;
a=loadedImages[int(random(0,lineCount))]; }

You can see the code to the entire app at http://www.perlitalabs.com/Kaleidoscope/index.html

And that is pretty much it.  Sounds easy, but it did take some time to get it to work right.  I want to work to add some features around saving images and possibly a gallery, but since I have a working v1 I had better get it out (perfection is the enemy of good enough).

I have posted some of the created images to flickr.  Also worth checking out is the Kaleidoscope Krazy Dad made.

Parallel Coordinate Visualization with Protovis

The Protovis Toolkit includes a very powerful visualization technique call Parallel Coordinates.  This technique is not available in any of the other graphing and charting libraries that I have reviewed (see list of Data Visualization Tools), but it should be.  It is an extremely powerful way to filter through data and see associations of values.

The example in the demo covers 8 dimensions of automobiles.  Let’s say you would like a quick car that is also good on gas.  Using the sliders you select the ranges that are relevant.  You can quickly see that 2 cars meet your criteria.  Additionally, you will notice that both of these selections are late model with relatively few cylinders and low displacement.  Pretty cool insights.

Since this is a toolkit, I imagine there are all sorts of approaches to add some customization. I know in this example I would like to see the actual values of the dimension, a dynamic table of the results, and some details when hovering over the lines.

The Wikipedia page on Parallel Coordinates has links to pre-built apps that you can load different data sets into.  They also have some of the nice features that I mention above.  These seem ideally suited to analysis of data sets, but may not be a great alternative to deploy on the web for an interactive navigation or selection tool.

The Protovis Parallel Coordinate tool seems to be light enough and customizable enough that it could be a great interface for an online data set.  There are also a good number of other techniques included in the toolkit.  It is definitely worth checking out.

List of Data Visualization Tools for Designers and Developers

Below is a long list of tools, website, etc that I have used or found on the web. They can be used to help build data visualizations, charts, graphs, etc. Some require no programing and others can be complex. As with most things the more complex the tool the more possibilities for customization exist.

I originally created this list as a Google Square and it can be found here: Data Visualization Tools . Feel free to go there and make updates or add others (I was hoping to just embed the Square, but it actually took a bit of the massaging). You may notice the descriptions are listed as Google Squared provided them. I may go back at a latter time and add to them if there is interest.

There are a vast number of solutions out there in this area with some really interesting approaches and great technology.

UPDATE: I have created a quick reference for which tools have which Visualization Types.

Name	Image	Google Description
Cartographer.js		Cartographer.js. “Thematic mapping for Google Maps”—which means an easy way of adding heat maps (aka chloropleths), pie charts and point clusters as a layer …
Flare		Flare visualization toolkit. http://flare.prefuse.org. Flare is a collection of ActionScript 3 classes for building a wide variety of interactive …
Flot		Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. …
Google Chart API		The Google Chart API lets you dynamically generate charts. To see the Chart API in action, open up a browser window and copy the following URL into the …
Google Maps API		The Google Maps API lets you embed Google Maps in your own web pages with JavaScript. The API provides a number of utilities for manipulating maps (just …
Google Visualization API		The Google Visualization API lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations. …
GraphViz		Graphviz is open source graph visualization software. It has several main graph layout programs. See the gallery for some sample layouts. …
JFree		JFreeChart is a free 100% Java chart library that makes it easy for developers to display professional quality charts in their applications. …
JGraph		JGraph and mxGraph are leading edge graph visualization component product families. They enable software developers to rapidly add complex and professional …
JSViz		I gave in and finally integrated support into JSViz, and just in time for the Safari 3 Beta (which I’m really digging so far)! …
JUNG		As a library, JUNG can be used both to build network-oriented tools, and to provide network … Analysis and Visualization of Network Data using JUNG …
JavaScript InfoVis Toolkit		The JavaScript InfoVis Toolkit provides tools for creating Interactive … You may use the JIT with your favorite DOM manipulation framework; Extensible …
Many Eyes		quick start · visualization types · about Many Eyes · blog. Throbber_home. visualizations, data sets, people, comments …
MooWheel		MooWheel is a mootools based script to create unique and elegant visualize data using JavaScript and the object. Using MooWheel is very simple and …
Open Flash Chart		Info: Open Flash Chart 2 is out. Version 1.x and these pages will never disappear and the charts will continue working forever, but further development on …
OpenLayers		OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles and markers loaded from any source. …
PlotKit		PlotKit is a Javascript graph plotting library. It is aimed at web applications that require plotting series of data in modern web browsers. …
Prefuse		Prefuse is a set of software tools for creating rich interactive data visualizations. The original prefuse toolkit provides a visualization framework for …
Processing.js		Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java …
Protovis		Now researchers at Stanford are offering a suite of tools called Protovis that streamline the process of building data visualizations. …
Raphaël JS		Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image …
SIMILE Exhibit		The Exhibit project has graduated and moved on with its life. Visit the new home page for more information on how to join the new mailing lists, …
SIMILE Runway		SIMILE Widgets; Runway. Runway. This widget lets you display images in a rich interactive visualization similar to that of Apple iTunes known as Cover Flow. …
SIMILE Timeline		This software was originally sponsored by The Andrew W. Mellon Foundation as part of the SIMILE project. Its original author is David François Huynh. …
SMILE TimePlot		Ingo Muschenetz, Area Charts in Timeplot, 2007-08-13. Andrew Plotkin, Use Smile Timelin in a stand-alone Java application? 2007-08-13 …
TufteGraph		Tags: Design Tactics, edward tufte, graph, information visualization, mint, mint .com, moma, newsmap, tufte, Web 2.0, widget. Much has been made of Mint.com, …
Ubigraph		for visualizing both 1-mode and 2-mode social network data; Ubigraph, in 3D, requires coding skills and runs on Linux and Mac; TouchGraph and TouchGraph …
jQ Chart		J Q Adams Elementary – TAKS Test Scores – 6th Grade – Reading … About the charts. This graph shows two data columns for the “% met standard” of the Texas …
jQuery Google Charts		jQuery Google Charts. DEMO SITE. Basic usage: var api = new jGCharts.Api(); jQuery(‘‘) .attr(‘src’, api.make({data : [[153, 60, 52], [113, 70, 60], …
jQuery Sparklines		I gave a quick 5 minute demo at the Splunk Developers Boot Camp on using the Splunk PHP SDK with jquery.sparkline.js to chart the traffic this page received …
jQuery Visualize		This is an example from the Filament Group Lab Article: jQuery Visualize Plugin: Accessible Charts & Graphs from Table Elements using HTML 5 Canvas …
pChart		pChart | a PHP Charting library. Sunday, September 20, 2009. opensource: del. icio.us tag/opensource · PHP graphics image graph visualization charts …
Style Chart		a free chart engine and API that is available as both a hosted JavaScript service and a downloadable Java library
Visualize Free		a free web-based tool that allows you to build sophisticated interactive dashboards using your own data in a Flex GUI in your browser