5 JavaScript Frameworks for creating Graphics

In this article, we’ll take a look at some of the options available. We’ll explore the most popular JavaScript libraries and talk about their strengths and weaknesses. The browser does offer several high-powered drawing APIs and surfaces.

Both of these features are now available in almost all desktop and mobile browsers, but the APIs required to use them are rather low level and ‘low level’ typically translates into a lot of tedious and redundant code just to do simple things. Javascript frameworks can fulfill a range of functions. Here, we’re going to look at some libraries that will help you create stunning graphics.

1. D3.js

D3 enables you to build data visualizations of any kind. You only need to glance through its examples page to see the world of possibilities. D3 is an all-encompassing tool. It has its own DOM selection, AJAX capabilities and even a proprietary random number generator.

There are also modules for arrays, shapes, colors, drag-and-drop, time and much more. Each component of D3 is its own Node module that must be imported. For instance, the selection module is called d3-selection.

D3 is capable of rendering to canvas and SVG. However, the real magic of D3 is in its ability to ‘data bind’ to the graphics it generates. Think of a chart that changes as the incoming data changes. This is largely because creating complex data visualizations requires you to have a low-level understanding of the visualization you want to create.

2. Chart.js

The big difference between Chart.js and D3 is that while you can build just about anything with D3, Chart.js limits you to eight pre-built chart types: line, bar, pie, polar, bubble, scatter, area and mixed.

This makes it easier to get started but means your assets can be much larger. This is especially true if you require time axes — Chart.js then requires Moment.js, which is ~51kb minified and zipped. It’s far easier to create a bar chart with Chart.js than with D3.

You initialize a new chart on an existing canvas element, set the chart type and then set the chart options. Chart.js only renders to canvas. This is not a problem since all modern browsers support the HTML canvas element but it might be a hangup for developers who have requirements for SVG support.

3. Britecharts

Britecharts has support for all of the basic chart types: line, bar, donut, bullet, scatter plot, sparkline and step, which is more than those offered by libraries like Chartist. It was made by Eventbrite, who then opensourced the project under the permissive Apache V2 license.

It offers a very minimal, yet aesthetically pleasing set of charts. Britecharts is a charting library that wraps D3. While it can be quite a task to create a bar chart with vanilla D3, Britecharts’ wrapping makes it as simple as creating a new barChart object and then setting its width and height.

4. Taucharts

There is the feeling, though, that the developer also needs to read The Grammar of Graphics in order to fully leverage its power. Taucharts looks quite compelling and the fact that it’s built on D3 makes it an attractive and powerful option. This is because drawing charts is the most common use-case for a graphics library in a browser.

5. Two.js

Two.js only abstracts the tedium of drawing shapes, not the tedium of the overall drawing. Two.js also keeps track of all of the objects that you create, so you can reference and animate them at any time. This means that, just like D3, you need an underlying understanding of the type of drawing you are trying to do and how to achieve that with the constructs two.js provides.

This is particularly important if you are doing game development and you have assets that need to be tracked for things like collision detection. Building out a detailed animation, on the other hand, is a much more complicated endeavour.