Graphing Calculator, Part 2

Paths To Success

The SVG path element is different from the other elements like circle and line we've seen so far. Instead of adding a discrete circle or line to the graph for each datapoint, you add a single element which comprises all the datapoints, and whose components are described in a graphical language similar to Logo. For example:

<svg width="100" height="100">
    <path d=" M 25 25
         L 25 75
         L 75 75
         L 75 25
         L 25 25"
         stroke="red" fill="none" />
</svg>

produces:

Don't worry about what M and L mean for now - these SVG path mini-language commands are abstracted away by d3. [1] Remember what I said above about not having to enter a distinct element for each datapoint in your set? For a path, d3 asks for a line() function which provides each of the points, plus an interpolation style which tells d3 how to draw lines between the explicitly plotted points.

We will change our previous code:

svg.selectAll('#line_not_in_axis_tick')
        .data(plotdata.slice(0, plotdata.length :html_entity:`mdash` 1))
    .enter()
        .append('svg:line')
        .attr("x1", function(d, i) { return xScale(d[0]); })
        .attr("y1", function(d, i) { return yScale(d[1]); })
        .attr("x2", function(d, i) { return xScale(plotdata[i+1][0]); })
        .attr("y2", function(d, i) { return yScale(plotdata[i+1][1]); })

to the following:

// Line function which returns an X,Y pair for each point in our set, plus an interpolation method
// (more on the latter later).
var lineFunction = d3.svg.line()
        .x(function(d) { return xScale(d[0]); })
        .y(function(d) { return yScale(d[1]); })
        .interpolate('linear');

// This is all we need to do to set up our path!
svg.append('svg:path')
        .attr('d', lineFunction(plotdata))

Ah, one more thing — the fill attribute on a path element isn't just for show as it is with the line element! With a path it works the way you'd expect — it closes the path by drawing a line back to the starting point, and fills in the polygon created thereby. All we need to do is change

.style('fill', "rgb(6, 120, 155)");

from our previous code to:

.style('fill', "none");

There it is! Now we have a path which exactly matches what our previous line-based graph did, and in fewer lines of code.

Smoothing Things Out

Look closely at the bottom left of the function graph — there's a "kink" at (1, 1) where the path segment from (0, 0) to (1, 1) meets the segment from (1, 1) to (2, 1.414). This is an artifact of the 'linear' interpolation method I chose above. It's more obvious if we change the function and the viewing window:

var plotfunc = function(x) { return 1 + Math.sin(x); },
        plotdata = [];
var lowX = 0, highX = 10, dX = 1;

Now that's ugly. Fortunately, changing the interpolation method used by d3 is simple: [2]

var lineFunction = d3.svg.line()
        .x(function(d) { return xScale(d[0]); })
        .y(function(d) { return yScale(d[1]); })
        .interpolate('basis');  // only this line was changed

Wrapping Up

The full code for this exercise can be found here. We still need to change the x and y domains to be dynamic rather than hardcoded, and allow the user to graph arbitrary functions, so tune in next week for part 3!