Visualizing data on the web

Visual representation of data is becoming extremely popular as we deal with more and more information. Given that web browser is the most dominant application on users’ computers, the set of people who use web development tools for programming graphics, animation and interactions is growing quickly.

Plug-ins

The old school approach of visualizing data on web is by using browser plug-ins, which add specific capabilities to a larger software application, in our case browser. Let’s take a quick look at some of them.

Java applets were introduced in the first version of the Java language back in mid-1990s. They are slow, because the JVM will need to restart each time the browser starts. When Microsoft shipped its own modified JVM with Internet Explorer, applets that relied on these changes worked only within Microsoft’s Java system, causing compatibility related headaches. And oh – 99% of them look ridiculously ugly.

Much more common pick today is Adobe Flash, which allows developers to create fascinating visualizations. But on the other hand, it is proprietary software, uses a lot of system resources and is responsible for a huge stake of browser crashes. Silverlight is Microsoft’s response to Flash, with similar advantages and disadvantages, but with much smaller usage share.

Native support

All these plug-ins are binary components with closed source. That means they cannot be hacked and used in a new innovative fashion, which is one of the principles of ensuring that the Internet is developed in a way that benefits everyone. So let’s take a look at what standardized technologies can offer us when visualizing data on web.

There are two standards: SVG specifications for describing two-dimensional vector graphics and the canvas element for rendering of 2D shapes and bitmap images. All major modern web browsers support and render SVG, except Internet Explorer. The good news is however, Internet Explorer 9 will support SVG. The canvas element is part of HTML5 and is only supported by the latest versions of Firefox, Chrome, Safari, and Opera. It is not clear yet if Internet Explorer 9 will support it.

In SVG, each shape is remembered as objects in DOM, so if attributes of the object are changed, the SVG can automatically re-render the scene. But in canvas, if position was to be changed, the entire scene would need to be redrawn. SVG also enables events to be associated with objects. In canvas we must manually match the coordinates of the mouse click with the coordinates of the drawn rectangle to determine whether it was clicked.

SVG

First let’s take a look at three JavaScript libraries that simplify the use of SVG graphics: jQuery SVG, SVG Web and Raphaël.

As the name says, jQuery SVG is a jQuery plug-in that lets you manipulate SVG from JavaScript. Since SVG is XML-based, it can easily use jQuery syntax to work with SVG. It also offers graphing extension to make it easier to create SVG graphs. Due to lack of SVG implementation, jQuery SVG doesn’t work with Internet Explorer, which makes this library pretty useless. Oh, and if you’re looking for some pretty examples, don’t even go to their home page. They are fugly.

SVG Web is being developed by Google. It’s a JavaScript library which provides SVG support on many browsers, including Internet Explorer, so it should target ~95% of the existing installed web base (at least that’s what the home page says). Flash is used for the actual rendering, so it’s very easy to use and incorporate into an existing web site.

The last and the most promising of the three libraries is Raphaël. It uses SVG and VML as a base for creating graphics. VML is a standards-based XML language used to produce vector graphics, but development of the format ceased in 1998. However Microsoft continues to document VML. It’s supported in all Internet Explorer versions since 5.0, which means Raphaël can target huge user base. The development momentum of the library seems to be going strong and another big plus is API documentation with beautiful examples and demos. There’s also charting plug-in available, called gRaphaël, which looks pretty slick, but lacks API documentation.

Canvas

After covering SVG, let’s take a look at canvas libraries. First of the two is Flot, a plotting library for jQuery, which focuses on “simple usage, attractive looks and interactive features”. It’s supported in all browsers that support canvas element and the excanvas JavaScript emulation helper is used for Internet Explorer 6.0+. It’s not as sweet as gRaphaël, but it’s easy to use, supports interaction and… oh, why don’t you take a look at some examples.

Processing.js is a Processing programing language implementation, written in JavaScript by John Resig. Processing is written in Java and used by people who want to program images, animation, and interactions. Processing.js draws shapes and manipulates images on the HTML5 Canvas element, but sadly it doesn’t work with excanvas emulator mentioned above. Since it won’t work in Internet Explorer at all, its use is pretty much limited to show off cutting edge technologies. Of course, it will also come in handy in environments like WebOS.