11 Stunning Graphics Libraries

BURKE HOLLAND REVEALS GREAT GRAPHICAL JAVASCRIPT FRAMEWORKS AND SHOWS HOW YOU CAN USE THEM TO PRODUCE PERFECT ANIMATIONS, ILLUSTRATIONS AND DATA VIZ

- Burke Holland

They say that a picture is worth a thousand words. Coincidentally, that’s about how many lines of code it takes to create that picture in a web browser. Fortunately, the browser offers several high powered drawing APIs and surfaces.

Most notably, these are the canvas element and scalable vector graphics (SVG). Both of these features are now available in almost all desktop and mobile browsers but the APIs required to use them are rather a low level and ‘low level’ typically translates into a lot of tedious and redundant code just to do simple things. Since writing tedious and redundant code is not high on the list of things that developers typically enjoy doing, there are thankfully several libraries available to help you with all of your browser drawing requirements.

In this article, I’ll take a look at some of the options available. We’ll explore the most popular libraries and talk about what their strengths and weaknesses are. We’re also going to do a little spelunking into some of the lesser-known projects that fill some very interesting niche needs – the kind that you don’t know you need until you need them.

D3.JS

https://d3js.org/

D3.js is the big boss of JavaScript graphics libraries. With over 875K weekly downloads on npm (https:// www.npmjs.com/package/d3), it is quite possibly the most well known and widely used of all the graphics libraries. It even has its own Wikipedia page (https:// en.wikipedia.org/wiki/D3.js). And, let’s face it, isn’t that when you know you’ve made it to the big time?

D3 enables you to build data visualizations of any kind. You only need to glance through its examples page (https://github.com/d3/d3/wiki/Gallery