Delivering Streaming Metrics - Real-Time Analytics - page 340

packages. Although none of them cover every situation, they can help you
get a jump start on building dashboard visualizations. Most people will find
the first package, NVD3, more accessible out of the gate, but the second
package, Vega, represents an interesting approach to separating rendering,
business logic, and data.
NVD3
NVD3 has been around for a long time and is still under active development,
with version 1.1.10 in beta at the time of writing. It is the back-end library
of the “dashing” dashboard library, which is a simple streaming dashboard
framework from Shopify written in Ruby using the Sinatra framework
(rather than Node).
Figure 7.10 shows the bar chart example from the previous section using
NVD3 instead of D3 directly. It also shows a similar visualization using a
line chart instead of a bar chart. To build the bar chart, the NVD3 chart is
first defined and then attached to the SVG element, found in dashboard/
public/javascripts/nv.js :
$('*[data-counter-bar4]').each(function(i,elt) {
var dim = fixup(elt)
var name = $(elt).attr("data-counter-bar4");
var chart = nv.models.historicalBarChart()
.margin({left:50,bottom:20,right:20,top:20})
.x(function(d,i) { return i; })
.y(function(d,i) { return d; })
.transitionDuration(250);
chart.showXAxis(true);
chart.yAxis
.axisLabel("Value");
var values = [];
var dataLen = 30;
d3.select(elt)
.append("svg")
.datum([{values:values,key:"Data",color:"#ccc"}])
.transition().duration(0)
.call(chart);