Visualizing a TempoDB Data Series with Cubism.js
Cubism.js is a D3.js plugin for time series visualization which seems like a perfect match for displaying the time series data that we are storing in TempoDB. The result of the visualization looks as follows:
Cubism pulls the initial data set to render the graph and then fetches time series data incrementally as it scrolls to the left as time passes.
While TempoDB offers a ReST API to read and write data, every request - even read requests - requires authentication with the user's API key and API secret.
If authentication for read requests were not required, Cubism could pull the data directly from the TempoDB data API and take advantage of all its built-in features (e.g. rollups, dataset statistics, timezones, intervals). So TempoDB, please add optional non-authenticated public read-requests to your feature set!
As the read requests are made from D3/Cubism in the browser, we can't handle the API key/secret in the client-side JavaScript code either. So we need build our own lightweight data API/proxy that fetches the result set from TempoDB and provides it to D3/Cubism. The Ruby/Sinatra code can be found here on GitHub. A more detailed description which I used largely as the basis and only slightly adopted for this project can be found over here at iwantmyreal.name (Thanks!)
Cubism expects one data point per pixel when it renders the chart. Note that it renders the data points from left to right, not honoring any timestamps. In case of discontinuous data, the chart will end early and a gap shows up on the right. This can be observed in above graph where a total of ~2 hours worth of data is missing in the 24-hour data set. Cubism starts painting one data point per pixel, from left to right, until it runs out of values.
There are three options to prevent this:
Fill in missing values at the time the data values are read from the sensor, or written into TempoDB. Not really a good idea...
Interpolate and fill in missing values at the time the result set is retrieved from TempoDB, made available through the API/proxy, or received at the client-side. This approach is discussed here server-side and here client-side.
Make the visualization component timestamp-aware and render the data points according to their timestamps, and keep blanks whenever there is no data value available.
The latter would be my preferred approach, especially since TempoDB stores timestamp/value pairs already. Something to look into sometimes later.
The demo is deployed to Heroku and its full client-side and server-side code can be found on GitHub.
References:
https://github.com/square/cubism
https://tempo-db.com/
http://iwantmyreal.name/blog/2012/09/16/visualising-conair-data-with-cubism-dot-js/
http://xaranke.github.io/blog/cubism-intro/
