Delivering Streaming Metrics - Real-Time Analytics - page 336

Layouts
Many times, when data is to be visualized, it requires some level of
manipulation tomake itsuitable forrendering. Even something assimple as
a pie chart requires that the starting and ending angles of each category be
calculated.
To help with these more complicated visualizations, D3 offers a number of
layout generators. Rather than generating document elements directly, like
the path and axis generators, these are usually applied to the data and then
used to construct the visualization.
There are numerous plug-ins for D3 that implement various layouts, but
there are also several built-in layouts. Many of them are concerned with
the layout of hierarchical or graph structures. These are useful when data is
static, but they are not used very often for real-time data visualization, so
they will not be discussed in this section.
The layouts most often relevant to real-time data visualization are the pie
and stack layouts. These two layouts help build pie or donut charts and
stackedareacharts,respectively. Forexample, tobuildsomething thatlooks
like Figure 7.9 , start out by constructing some sample data:
var values = d3.range(10).map(function() {
return bumpLayer(100);
});
Figure 7.9
The bumpLayer function is used in various locations in the D3
documentation to generate test data. It is used here to quickly provide data