Techniques for Visualizing Data

Question

I'm looking into providing several methods of visualizing a large volume of data. This may include, but will not be limited to, simple graphing. The techniques I'm exploring will involve shapes, text and lines. It will also involve interaction with elements (hiding, focusing, etc.) and animation (shifting, dragging, systematic reorganizing, etc.) of those elements.

SVG or Canvas seem like the obvious choices (in conjunction with a JS library--probably jQuery), but the lack of cross-browser availability is a concern. I'd prefer to avoid Flash/Flex, but right now it's the only rock solid, cross-browser technology I've found if support for IE7/8 is a requirement.

Does anyone have any other suggestions or any additional information that would make a technology I've listed seem even more appealing?

Thanks.

Answer 1

SVG and Canvas works for relatively simple data (i.e. where a few lines are enough). For complex data (say, frequency distributions, or something where you emit one sample per pixel), you should render a normal image on the server.

Answer 2

HighCharts is a Javascript, good, free and cross-browser charting tool.

Take a look at the Highcharts demo

Answer 3

If you are using jquery for the graphing, I would definiately check out Flot which is as cross browser graphing/charting library.

Answer 4

SVG is available on everything except IE, and VML is available on IE (since 5.5, IIRC). If you can serve both SVG and VML, you'll have vector graphics that virtually everyone can see. RaphaelJS is a Javascript library that can generate both formats from the same Javascript code, but of course that's just one way to do it.

Canvas is also available pretty much on everything except IE, but some crazy people wrote something called excanvas that emulates Canvas in, again, VML. From my friends and coworkers who have used it, I've heard the performance is worse than pretty much any other browser graphics solution, but if you want to do bitmap graphics portably, it's pretty much the only non-plugin game in town.

Which route you take -- vector or raster -- really depends on your application.

Answer 5

You might want to take a look at Raphael and GRaphael. Raphael allows you to create vector graphics and will use SVG on SVG-capable browsers while automatically switching to VML on IE.

You could also take a look at the canvas-based processing.js.

Answer 6

You might also try Protovis. (http://vis.stanford.edu/protovis/)

Answer 7

Check out the original Processing.org.

It may seem strange/anachronistic that they are using Java applets, but they were able to get better performance with Java than JavaScript. The applets seem to work everywhere, and you'll have access to lots of great Java libraries.

Answer 8

Don't think I saw this one mentioned: JavaScript InfoViz Toolkit

An interesting visualization I personally like is the treemap view. Nice for summarizing a lot of data in a single view.