Delivering Streaming Metrics - Real-Time Analytics - page 329

are used to set the d attribute easily. There are a variety of built-in path
generators:
• d3.svg.path.line generates simple line paths.
• d3.svg.path.area generates areas instead of lines like the chart
example in the “Using the HTML5 Canvas” section.
• d3.svg.line.radial generates a line path with radial coordinates.
• d3.svg.arc generates arc paths. These are often used for pie and
donut charts.
• d3.svg.symbol is used to generate symbols at specific locations, such
as those found in a scatterplot.
• d3.svg.chord is used to generate closed shapes connecting two arcs
with a quadratic Bézier curve.
All of the shape generators return a function that can be customized with
generator-specific parameters. These parameters can be set to either a
constant value or a function that knows how to produce output based on the
input.
For example, to create the gauge from the previous section, the
d3.svg.arc generator can be used to simplify the process. This generator
has four different parameters that can be potentially set from the data: the
inner and outer radii, the starting angle, and the ending angle. In this case,
the first three are all constant values:
var r = 0.5*Math.min(dim.width,dim.height) - 12.5
var arc = d3.svg.arc()
.innerRadius(r-12.5).outerRadius(r+12.5)
.startAngle(1.1*Math.PI);
The final parameter, the ending angle, depends on the data being passed in,
so it is assigned a function rather than a constant value:
var max = 1;
arc.endAngle(function(d,i) {
if(max < d) max = d;
return 1.1*Math.PI + 1.8*Math.PI*(d/max);
});