square / cubism

Cubism.js: A JavaScript library for time series visualization.
https://square.github.com/cubism/
Other
4.94k stars 527 forks source link

Smooth interpolation between values? #47

Open victorhooi opened 11 years ago

victorhooi commented 11 years ago

Hi,

Is it possible to add an argument to Cubism.js that will allow it to do smooth interpolation between values, or over missing values?

Somebody asked about it on SO here:

http://stackoverflow.com/questions/13732309/interpolation-on-cubism-graphs

and the answer mentioned using custom interpolators in D3:

http://bl.ocks.org/mbostock/3310323

Is something like that possible to add into Cubism.js?

Cheers, Victor

RandomEtc commented 11 years ago

I would look at modifying graphite.js to apply interpolation before passing to cubism for rendering. Essentially what you're asking is for cubism to make up data for you when it doesn't know a value. Better to do that yourself I think, and keep cubism's rendering code as "just the facts" :)

RandomEtc commented 11 years ago

Also, the horizon rendering code draws one rectangle per pixel. In other words you need the same number of data points as you have pixels in your graph. Hope that makes sense!

mbostock commented 11 years ago

I see value in doing this on the Cubism side, although it might also be nice to have Graphite do it; smoothing is a pretty useful feature to mitigate noise in metrics.

If you were to do this on the Cubism side, I expect you could compose a smoothing algorithm with another metric implementation, similar to how time-shifting and metric arithmetic are implemented. A simple method of smoothing is interpolating the previous value with the new value. So, if the underlying metric reports a new value of v1, the smoothed metric blends this with the previous value v0 and reports v0 + (v1 - v0) * α, where α is a parameter in the range [0, 1] depending on how much smoothing you want.

victorhooi commented 11 years ago

Hi,

In our case, we're looking at using it with a Cube backend - not Graphite.

It would be nice to be able to just switch this on in Cubism, regardless of the backend - Cube, Graphite, CSVs, your own custom one etc.

Just so I understand what @mbostock is saying - we add another another OperatorPrototype to metric-operator.js so that when given a metric, it doesn't report the real metric, but rather something in-between the last known value and the real metric?

Cheers, Victor

mbostock commented 11 years ago

The metric operators derive a new metric, which in this case would compose the original metric with a smoothing function. So metric.subtract(50) doesn’t modify the metric, it returns a new metric whose values are the original values minus 50.

victorhooi commented 11 years ago

Hi,

@RandomEtc How hard do you reckon this would be to implement? Is this something that's on the horizon? (See what I did there...lol).

Cheers, Victor

RandomEtc commented 11 years ago

@victorhooi I have no idea, sorry. I'm not planning to work on this myself.