Essential JavaScript: the top five graphical libraries

Only recently have we been able to consider JavaScript for graphical work, such as drawing charts or perhaps even HTML5 games. Better JavaScript engines and ever-improving browser support (in particular the work being done in Chrome's V8 engine) make JavaScript a viable option for a lot of graphical work. Today, I'll look at five libraries out there designed to help you in this area, as well as those that make working with the HTML5 canvas element easier, too.

If you're new to the canvas element, I highly recommend you become familiar with it before using a library to make it easier. Knowing how to do something the hard way will make you write better code, even when using a library. Remy Sharp wrote a good introduction on HTML5 Doctor that should get you started, and links to more resources once you've worked through the introduction.

D3.js

The first is D3.js, which describes itself as a "JavaScript library for manipulating documents based on data". Some of the examples are very impressive; from a map of the United States to detailed bullet charts. D3 is designed to allow you to apply data-driven transformations to a document. It's commonly used for data visualisations, and plenty of tutorials have been written about it. D3 isn't specifically a graphing library, but simply provides you with the tools to create graphs, among other things. The example below shows a stacked bar chart. Unsurprisingly, libraries have sprung up around D3 to make creating graphs easier, the most popular of which is NVD3, a library that depends on D3 that makes it very easy to create complex graphs. I would encourage you to first try graphing with D3 before trying a library such as NVD3. NVD3 is great, but doing graphs with pure D3 does allow for a greater degree of customisation and, of course, more control.

BonsaiJS

Next is BonsaiJS, a JS graphics library that has impressive demos such as a working Pong game and an interactive pie chart. Bonsai is different to D3 in that it doesn't work by interacting with HTML, it's all done through JavaScript. What's also great about Bonsai is the online editor, which allows you to easily play around with Bonsai and immediately see the results. While D3's syntax will often resemble something more similar to jQuery in terms of interacting with elements, with Bonsai you create elements through JavaScript, and Bonsai automatically adds them to the page for you. Both Bonsai and D3 are very powerful but approach things in slightly different ways.

Raphael

Raphael is a small library designed to simplify working with vector graphics on the web. It also allows for complex charts and visualisations and works by drawing SVG elements. One plus to Raphael is that it has better browser support, supporting IE6 and above, whereas Bonsai and D3 don't support older versions of Internet Explorer. However, one negative to Raphael is that the source code was last updated 11 months ago, so it's a little outdated. Raphael remains a very capable library and is certainly worth looking over. One of my favourite demos is Ben Barnett's Tube Map, which recreates the famous London Underground tube map with Raphael, with really demonstrates the power of the library (screenshot below).

Three.js

Three.js is something very different to the three libraries I've discussed so far. Three.js is used to create 3D graphics, often through WebGL. It's capable of incredible things, such as this sports car (pictured below) but as it is resource intensive and uses WebGL, browser support is obviously limited right now. You'll need a good knowledge of 3D graphics to work efficiently with Three.js. However, there are good tutorials out there, including a good introduction to the library. Three.js implements shaders, cameras, animations and loads more.

EaselJS

If you're after a library that acts more as a wrapper around working with the canvas element, EaselJS may be more up your street, particularly if you'd like to build some games. It's capable of recreating the classic Asteroids game or allowing users to draw onto a canvas. Easel comes with comprehensive API documentation. EaselJS took a lot of inspiration for its class names from Flash, so if you're familiar with Flash, you'll find Easel even easier to pick up.

As for introductory tutorials, this video on YouTube gives a good introduction and there's also links on the Easel wiki to more. Easel isn't like D3 or Bonsai - it's clearly designed with more interaction in mind - games, drag and drop interfaces, and so on, rather than data visualisation. It's also worth checking out the entire CreateJS suite, which Easel belongs to. This includes TweenJS, a library for tweening (or animating) HTML5 and JavaScript properties, SoundJS for working with audio in JavaScript and PreloadJS, a library for managing the preloading of assets. The screenshot above shows the EaselJS version of Asteroids.

Picking the right tool

With the new functionality available to us as JavaScript developers, the use cases for JavaScript are expanding all the time and developers are taking advantage of this by creating these libraries, such as the five mentioned previously, to make it even easier. Some of the demos of these libraries, in particular ThreeJS, are absolutely mind blowing; it's not that long ago that none of this was possible.

As with the other articles in this "Top JavaScript" series, I encourage you to try a few libraries out before settling on one to use for your application. Every library has some things it does well and perhaps a couple of weak spots, and picking the right one for the job is something you should spend time over.