Database Reference
In-Depth Information
The
region
function returns an update function itself so the update
function simply calls each region's update function in turn to produce the
chart shown in
Figure 8.2
:
function update() {
regions.forEach(function(r) { r(); });
}
Cubism.js
As demonstrated, it is not difficult to produce a simple horizon chart using
D3.js. Another option is to look into the
cubism.js
project. This is a D3.js
plug-in written by Mike Bostock, one of the original D3 authors and active
maintainer oftheproject. HewroteitwhileatSquare tovisualize time series
for internal projects, and it has since been open sourced.
In addition to implementing rendering of horizon charts, it also has built-in
dataconnectors.SupportforGraphiteandCubeisavailable“outofthebox,”
and the library has been designed to allow other sources to plug in as well.
Conclusion
This chapter took the infrastructure of the last few chapters and put
lightweight frameworks on top of them. It focused on frameworks for
time-series data because that is generally the application area of real-time
streaming.
Of course, the visualization options for time-series data are not limited to
strip charts and its relatives. With the availability of high-performance web
browsers, any number of different visualizations can be created using color
and animation. Note, however, that for streaming data the “glanceability” of
the chart is a factor. Visualizations that do not directly incorporate a time
component can be hard to decipher at a glance. If the goal is to attract a user
into watching the display for a while, significant animation elements in the
visualization can be desirable.
Most of the time, the goal is to provide as much information as quickly as
possible. In those situations, “boring” visualizations like strip charts and
horizon charts deliver information in an easily digested form.
