Features of 13 Data Visualization and Chart Libraries

30 11 2009

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.

Comparison of Graph and Chart Libraries in PHP, Java, ActionScript and AJAX

Thumbnail of Comparison Grid for Data Visualization Tools


Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to RedditAdd to StumbleUponAdd to TechnoratiAdd to Twitter

Flickr Kaleidoscope built with Processing

17 11 2009

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.

Flickr Kaleidoscope Examples

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:

$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'];
$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);
text(“.”, 50+(3*i), 20);
String[] pieces = split(lines[i], ‘|’);
loadedImages[i]= loadImage(pieces[1]);
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.

Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to StumbleUponAdd to TechnoratiAdd to Twitter

Parallel Coordinate Visualization with Protovis

12 11 2009

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.

A screenshot of the Parallel Coordinate demo on the Protovis site.

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.

Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to StumbleUponAdd to TechnoratiAdd to Twitter

List of Data Visualization Tools for Designers and Developers

4 11 2009

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 …
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 …
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 …
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 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. …
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
jQuery Google Charts. DEMO
SITE. Basic usage: var api = new jGCharts.Api(); jQuery(‘‘)
.attr(‘src’, api.make({data : [[153, 60, 52], [113, 70, 60], …
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 …
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

Add to DeliciousAdd to DiggAdd to FaceBookAdd to Google BookmarkAdd to RedditAdd to StumbleUponAdd to TechnoratiAdd to Twitter