D3 for the Impatient

Chapter 5. Generators, Components, Layouts: Drawing Curves and Shapes

In this chapter, we will explore some basic graphical building blocks provided by D3. In the previous chapters (Chapters 3 and 4), we learned how D3 manipulates the DOM tree in order to represent information visually, but we did not really concentrate on graphical objects. They will be the topic for the present chapter. This will also give us the opportunity to understand how different D3 facilities are structured and how they work together. We will also learn mechanisms to organize our own code for convenience and reuse.

Generators, Components, and Layouts

SVG provides only a small set of built-in geometric shapes (like circles, rectangles, and lines; see Appendix B). Anything else has to be built up painstakingly (and rather painfully) either from those basic shapes or by using the <path> element and its turtle graphics command language. How does D3 assist with this?

It is worth remembering that D3 is a JavaScript library for manipulating the DOM tree, not a graphics package. It doesn’t paint pixels, it operates on DOM elements. It should therefore come as no surprise that the way D3 facilitates graphics operations is by organizing and streamlining the way DOM elements are handled.

To produce complex figures, D3 employs three different styles of helper functions. These can be distinguished by the scale they act on: generators generate individual attributes, components create entire DOM elements, and