Chapter 8. Traditional DOM manipulation with D3
This chapter covers
- Making spreadsheets with data
- Drawing graphics with HTML5 canvas
- Building image galleries with data
- Populating drop-down lists with data-binding
Many introductions to D3 start with sizing <div> elements to create a bar chart. They figure you’re a web developer and that you won’t be as intimidated by a div as you’d be by an SVG rectangle. This book even begins by creating a set of <p> elements in chapter 1, the first time you saw data-binding in action. But then these tutorials (and this book) quickly transition into the creation of SVG elements, with an emphasis on the graphical display of information. This is at odds with traditional web development, which focuses on the presentation of blocks of text, images, buttons, lists, and so on. As a result, it seems like D3 is for data visualization, but somehow not for manipulating traditional DOM elements like paragraphs, divs, and lists (like those seen in figure 8.1). The benefit of using D3 to create these kinds of elements is that you can use D3 transitions, data-binding, and other functionality to make a more interactive and dynamic website.
Figure 8.1. The traditional DOM-based pieces that are created in this chapter are a spreadsheet (section 8.2) and an image gallery (section 8.4), with interactivity based on a data-driven drop-down list (section 8.4.2) and images drawn using HTML5 canvas (8.3).
