Delivering Streaming Metrics - Real-Time Analytics - page 339

.attr("class","d3front")
.attr("d",arc);
This is done because the interpolation process needs to be able to modify
the endAngle variable. The interpolation itself is handled by repeatedly
applying an interpolation using attrTween . This is implemented in the
arcTween function, found in dashboard/ public/javascripts/
d3.js :
function arcTween(transition,newAngle) {
transition.attrTween("d",function(d) {
var interpolate =
d3.interpolate(d.endAngle,newAngle);
return function(t) {
d.endAngle = interpolate(t);
return arc(d);
}
});
}
This function repeatedly computes the interpolated angle and then calls
the arc generator on that interpolated angle to produce a new function.
Without the datum call, the d variable would be undefined and there would
be no place to store the outcome for the next interpolation. The update step
then only needs to call the arcTween function with the new angle when it
arrives:
$(document).on('data:'+name,function(event,data) {
if(data > max) max = data;
front.transition().call(arcTween,data);
});
High-Level Tools
Although D3 is extremely powerful, it is also extremely granular. Even with
some of the abstractions available, it can be time consuming to construct
basic visualizations. Others have also run into this problem and built
high-level packages that build on D3 to allow for the rapid development
of simple visualizations. This section covers two of the more interesting