Database Reference
In-Depth Information
Although NVD3 can clearly handle streaming data, it is mostly designed for
static interactive visualizations. As such, it includes a number of additional
interactive features, such as tooltips and zooming/focusing features that are
commonly found in interactive visualization environments. Most real-time
environments are not interactive, so these features are not discussed in this
chapter.
Vega.js
The Vega package builds on the idea of having a description of a
visualization that easily can be changed. Rather than using code to describe
the visualization the way NVD3 does, this package opts to use a JSON
description of the visualization. The Vega developers call this format a
“declarative visualization grammar.”
Vega visualizations begin with a specification that provides the abstract
visualization of the chart. Specifications are made up of several different
pieces. The first piece is usually some information about rendering the
chart. Because the chart is often reused the information is usually fairly
minimal, if it exists at all. In this case, some margin information is common
to all the charts:
var spec = {
padding: {top: 10, left: 30, bottom: 20, right:
10},
Next comes the data definition section of the specification. This section
defines the various data series that will be used in the visualization. Because
this data comes from a real-time system and will be added later, the data for
the series is simply left empty:
data:[
{name:"values"}
],
Finally, the visualization is described. Much like the low-level D3 charts, the
specification defines scales as axes using parameters very much like the D3
generators they use internally:
scales:[
{name:"x",range:"width",
Search WWH ::




Custom Search