Tool: Raphaël—JavaScript Library

http://raphaeljs.com

Raphaël is a small JavaScript vector graphics library (20 KB when compressed with GZIP). It uses Scalable Vector Graphics (SVG) and Vector Markup Language (VML) as a base for creating graphcis, but it abstracts that in simple JavaScript instructions.

To use Raphaël, raphael.js has to be included into your HTML. Then a Raphael object has to be created, as easy as (example on website):

// Creates canvas 320 × 200 at 10, 50

var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10

var circle = paper.circle(50, 40, 10);

// Sets the fill attribute of the circle to red (#f00)

circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white

circle.attr("stroke", "#fff");

See more examples of Raphaël on its website, including both an impact and a punch chart, similar to Github’s charts.