D3.js, SVG, HTML5 Canvas

1. D3.js

According to wiki, D3.js (or just D3 for Data-Driven Documents) is a JavaScript library that uses digital data to drive the creation and control of dynamic and interactive graphical forms which run in web browsers. It is a tool for data visualization in W3C-compliant computing, making use of the widely implemented Scalable Vector Graphics (SVG), JavaScript, HTML5, and Cascading Style Sheets (CSS3) standards. In contrast to many other libraries, D3 allows great control over the final visual result.

Commits from D3 author Mike Bostock:
D3 doesn’t hide the underlying representation; so it’s you who decides whether you are using SVG, HTML, Canvas, etc. For example, if you append an svg:svg element, you’re using SVG! There’s no configuration to magically convert SVG to Canvas under the hood; you’re just manipulating document elements the same way you’d author HTML in a text editor, but with all of D3’s data-driven transformations.

D3 can only manipulate documents, using the W3C DOM API. So you can create and destroy and reorder elements, but it won’t help you draw onto a Canvas since there’s a separate API for that. (You can create the Canvas element using D3, but that’s not particularly helpful.) The HTML5 Canvas does not have a backing document (a.k.a. scenegraph). It uses immediate mode rendering:

http://en.wikipedia.org/wiki/Immediate_mode

Ultimately whether pixel (immediate) or vector (retained) graphics is better depends on the application. I prefer SVG for most things, but Canvas is great if you want a heatmap or some other plot of continuous data that would be overly expensive to represent in vector.

2. SVG

According to wiki, Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.

3. HTML5 Canvas

According to w3school: The HTML5 element is used to draw graphics, on the fly, via scripting (usually JavaScript). The element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

4. 3D Carousel by using Canvas

The following use canvas to implement a 3D Carousel effect, very cool:

http://www.professorcloud.com/supercharged/ui/index.html