Simple Line example

In this simple example, I show you how to draw a line chart. Most of the code is the same as the bar chart code that we developed in class. The only real difference is that I created some synthetic data (so there isn't a call to csv()), and instead of making bars, we make a line.

Lines in SVG are created using paths. Conceptually, we think of multi-segment lines as being a list of points, but paths are more involved than that. They actually contain a list of commands that can be as simple as "draw a line from A to B", but can also jump to other locations without leaving a mark, or draw complex curves. All of these commands get stuffed into the d attribute of the path object.

Fortunately, D3 doesn't leave us swinging in the breeze, having to manage all of this ourselves. There is a line() function that generates lines for us. We supply the function for determining where our points of interest are, and it handles the creation of the path commands. There are even different interpolation functions to create smoother lines, making use of various spline functions (however, I urge you to stick with linear interpolation for our small scale visualizations so you don't imply knowing more data points than you really do).