Up to this point, we have used D3 to create new DIV elements in the DOM. While many great visualizations can be created using D3 and DIVs, the true expressive power of D3 lies in using it to create and manipulate SVG elements.

SVG is an XML markup language that has been designed to express very rich 2D visualizations. SVG can take advantage of the computer's graphics processor to accelerate rendering, and is also optimized for user interaction and animation.

Instead of directly manipulating the pixels on the screen, SVG uses vectors for building a model of the presentation, and then transforms this representation into pixels on your behalf. This makes coding of visualizations much simpler as compared to other web technologies such as HTML5 Canvas.

Since the image is stored as a vector-based representation, the visualization of the model can be scalable. This is because all the visual elements can be easily scaled (both larger and smaller) without resulting in visual artifacts...