Time series change rate calculations for displaying trend line chart

I'm struggling to find a solution to produce a line chart which shows a trend from a Time Series metric.

I try to make my line chart look similar to the following:

Basically, I want to make use of relative change rates, but I struggle to find a calculation which makes a visualization as seen above possible. The graph should always be relative to a specific time window, meaning that I can query my data dynamically with a start and end timestamp.

My (incomplete) sample data set is the following:

timestamp,value,change_rate,change_rate_absolute_sum,change_rate_delta,change_rate_sum
1426587900000,778;0.00129,0.00129;0.00129,0.00129
1426588200000,778;0,0.00129;-0.00129,0
1426588500000,1189;0.52828,0.52957;0.52828,0.52828
1426588800000,1195;0.00505,0.53462;-0.52323,0.00505
1426589100000,1195;0,0.53462;-0.00505,0
1426589400000,1196;0.00084,0.53546;0.00084,0.00084
1426589700000,1286;0.07525,0.61071;0.07441,0.07525
1426590000000,1290;0.00311,0.61382;-0.07214,0.00311
1426590300000,1294;0.0031,0.61692;-0.00001,0.0031
1426590600000,1296;0.00155,0.61847;-0.00155,0.00155
1426590900000,1356;0.0463,0.66477;0.04475,0.0463
1426591200000,1358;0.00147,0.66624;-0.04483,0.00147
1426591500000,1358;0,0.66624;-0.00147,0
1426591800000,1360;0.00147,0.66771;0.00147,0.00147
1426592100000,1408;0.03529,0.703;0.03382,0.03529
1426592400000,1390;-0.01278,0.69022;-0.04807,-0.01278
1426592700000,1391;0.00072,0.69094;0.0135,0.00072
1426593000000,1410;0.01366,0.7046;0.01294,0.01366
1426593300000,1414;0.00284,0.70744;-0.01082,0.00284
1426593600000,1410;-0.00283,0.70461;-0.00567,-0.00283
1426593900000,1414;0.00284,0.70745;0.00567,0.00284
1426594200000,1420;0.00424,0.71169;0.0014,0.00424
1426594500000,1417;-0.00211,0.70958;-0.00635,-0.00211

Any ideas warmly appreciated. Thanks a lot in advance!

Topic infographics time-series dataset

Category Data Science

1
answered at

While it is not very clear to me what specific relationships between your data you want to display, I can give some general advice. I think that this time series visualization calls for so-called diverging color scheme (as opposed to sequential, categorical and other ones). ColorBrewer is nice online tool for selecting an appropriate color scheme and other parameters (note that ColorBrewer's color schemes have built-in support in major data analysis and visualization software, such as R, Python, d3.js, plot.ly and others).

If you would use R environment, it would be quite easy to produce the time series trend line chart that you want by using ggplot2 package and its scale_color_gradient2() function:

... + scale_color_gradient2(midpoint=midValue, low="blue", mid="white", high="orange" )

A quick glance at your profile suggested me that you would prefer a JavaScript solution. In that case, I would advise to use d3.js library or one of multiple other JavaScript visualization libraries or packages. For more details, check this relevant answer of mine.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.