D3 for the Impatient

Chapter 2. Let’s Make Some Graphs, Already!

Let’s work through some examples that will demonstrate some of the capabilities of D3, and enable you to begin solving some real-world problems immediately—if only by adapting the examples. The first two examples in this chapter will show you how to create standard scatter and xy-plots, complete with axes, from data files. The plots won’t be pretty, but will be fully functional, and it should be easy to tidy up their looks and to apply the concepts to other data sets. The third example is less complete. It is mostly a demo to convince you how easy it is to include event handling and animation in your documents.

A First Example: A Single Data Set

To begin our exploration of D3, consider the small, straightforward data set in Example 2-1. Plotting this simple data set using D3 will already bring us in contact with many essential concepts.

Example 2-1. A simple data set (examples-simple.tsv)

x	y
100	50
200	100
300	150
400	200
500	250

As I already pointed out in Chapter 1, D3 is a JavaScript library for manipulating the DOM tree in order to represent information visually. This suggests that any D3 graph has at least two or three moving pieces:

• An HTML file or document, containing a DOM tree

• A JavaScript file or script, defining the commands that manipulate the DOM tree

• Frequently, a file or other resource, containing the data set

Example 2-2 shows the HTML file in its entirety.

Example 2-2. An HTML page defining an SVG element ...