Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/code.R

Last active December 19, 2015 16:59
Show Gist options
  • Save timelyportfolio/5987883 to your computer and use it in GitHub Desktop.
Save timelyportfolio/5987883 to your computer and use it in GitHub Desktop.
Download ZIP
d3 horizon with axis from rCharts
Raw
code.R
require(rCharts)
rChart <- rCharts$new()
rChart$setLib('libraries/widgets/d3_horizon')
rChart$setTemplate(script = "libraries/widgets/d3_horizon/layouts/d3_horizon_axes.html")
rChart$set(
bands = 3,
mode = "mirror",
interpolate = "basis",
width = 700,
height = 300
)
require(quantmod)
#get sp500 prices and convert them to monthly
SP500 <- to.monthly(
getSymbols("^GSPC", from = "1990-01-01", auto.assign = FALSE)
)
#get 12 month rolling return
SP500.ret <- na.omit(ROC(SP500[,4], type = "discrete", n = 12))
SP500.df <- cbind(
as.numeric(as.POSIXct(as.Date(index(SP500.ret)))),
coredata(SP500.ret)
)
colnames(SP500.df) <- c("date","SP500")
#supply the data to our dataless but no longer naked rChart
rChart$set(data = SP500.df)
rChart$set(x = "date", y = "SP500")
rChart
Raw
index.html
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootswatch/2.3.1/cosmo/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" >
<link rel='stylesheet' href="http://twitter.github.io/bootstrap/assets/js/google-code-prettify/prettify.css">
<link rel='stylesheet' href="http://aozora.github.io/bootplus/assets/css/docs.css">
<script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script>
<script src='http://timelyportfolio.github.io/rCharts_d3_horizon/libraries/widgets/d3_horizon/js/horizon.js' type='text/javascript'></script>
<style>
.rChart {
display: block
margin: auto auto;
width: 100%;
height: 400px;
}
/*
body {
margin-top: 60px;
}
*/
</style>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='span8'>
<div class="bs-docs-example">
<div id='chart8682cb0b4b' class='rChart nvd3Plot d3_horizon'></div>
<br/>
<pre><code class='r'>require(rCharts)
rChart &lt;- rCharts$new()
rChart$setLib('libraries/widgets/d3_horizon')
rChart$setTemplate(script = &quot;libraries/widgets/d3_horizon/layouts/d3_horizon_axes.html&quot;)
rChart$set(
bands = 3,
mode = &quot;mirror&quot;,
interpolate = &quot;basis&quot;,
width = 700,
height = 300
)
require(quantmod)
#get sp500 prices and convert them to monthly
SP500 &lt;- to.monthly(
getSymbols(&quot;^GSPC&quot;, from = &quot;1990-01-01&quot;, auto.assign = FALSE)
)
#get 12 month rolling return
SP500.ret &lt;- na.omit(ROC(SP500[,4], type = &quot;discrete&quot;, n = 12))
SP500.df &lt;- cbind(
as.numeric(as.POSIXct(as.Date(index(SP500.ret)))),
coredata(SP500.ret)
)
colnames(SP500.df) &lt;- c(&quot;date&quot;,&quot;SP500&quot;)
#supply the data to our dataless but no longer naked rChart
rChart$set(data = SP500.df)
rChart$set(x = &quot;date&quot;, y = &quot;SP500&quot;)
rChart
</code></pre>
</div>
</div>
</div>
</div>
<!--Attribution:
Jason Davies https://github.com/d3/d3-plugins/tree/master/horizon
Mike Bostock http://bl.ocks.org/mbostock/1483226
-->
<style>
.axis .tick line {
stroke: lightgrey;
stroke-opacity: 0.7;
}
.y path, .x path {
stroke-width: 0;
fill-opacity: 0;
}
</style>
<script>
var params = {
"dom": "chart8682cb0b4b",
"width": 700,
"height": 300,
"bands": 3,
"mode": "mirror",
"interpolate": "basis",
"data": [ {
"date": 6.6269e+08,
"SP500": 0.045126
},
{
"date": 6.6537e+08,
"SP500": 0.106
},
{
"date": 6.6779e+08,
"SP500": 0.10378
},
{
"date": 6.7046e+08,
"SP500": 0.13464
},
{
"date": 6.7306e+08,
"SP500": 0.079174
},
{
"date": 6.7573e+08,
"SP500": 0.036702
},
{
"date": 6.7833e+08,
"SP500": 0.088895
},
{
"date": 6.81e+08,
"SP500": 0.22591
},
{
"date": 6.8368e+08,
"SP500": 0.26731
},
{
"date": 6.8628e+08,
"SP500": 0.29095
},
{
"date": 6.8895e+08,
"SP500": 0.16448
},
{
"date": 6.9155e+08,
"SP500": 0.26307
},
{
"date": 6.9422e+08,
"SP500": 0.18856
},
{
"date": 6.969e+08,
"SP500": 0.12431
},
{
"date": 6.9941e+08,
"SP500": 0.075875
},
{
"date": 7.0209e+08,
"SP500": 0.10553
},
{
"date": 7.0468e+08,
"SP500": 0.065464
},
{
"date": 7.0736e+08,
"SP500": 0.099634
},
{
"date": 7.0995e+08,
"SP500": 0.09386
},
{
"date": 7.1263e+08,
"SP500": 0.047037
},
{
"date": 7.1531e+08,
"SP500": 0.077193
},
{
"date": 7.179e+08,
"SP500": 0.066837
},
{
"date": 7.2058e+08,
"SP500": 0.14959
},
{
"date": 7.2317e+08,
"SP500": 0.044643
},
{
"date": 7.2585e+08,
"SP500": 0.073389
},
{
"date": 7.2852e+08,
"SP500": 0.07434
},
{
"date": 7.3094e+08,
"SP500": 0.11885
},
{
"date": 7.3362e+08,
"SP500": 0.060827
},
{
"date": 7.3621e+08,
"SP500": 0.083881
},
{
"date": 7.3889e+08,
"SP500": 0.10386
},
{
"date": 7.4148e+08,
"SP500": 0.056387
},
{
"date": 7.4416e+08,
"SP500": 0.11963
},
{
"date": 7.4684e+08,
"SP500": 0.098444
},
{
"date": 7.4943e+08,
"SP500": 0.11739
},
{
"date": 7.5211e+08,
"SP500": 0.070569
},
{
"date": 7.547e+08,
"SP500": 0.070552
},
{
"date": 7.5738e+08,
"SP500": 0.097612
},
{
"date": 7.6006e+08,
"SP500": 0.053588
},
{
"date": 7.6248e+08,
"SP500": -0.013063
},
{
"date": 7.6516e+08,
"SP500": 0.024353
},
{
"date": 7.6775e+08,
"SP500": 0.014016
},
{
"date": 7.7043e+08,
"SP500": -0.013895
},
{
"date": 7.7302e+08,
"SP500": 0.022605
},
{
"date": 7.757e+08,
"SP500": 0.025736
},
{
"date": 7.7838e+08,
"SP500": 0.0082366
},
{
"date": 7.8097e+08,
"SP500": 0.0096616
},
{
"date": 7.8365e+08,
"SP500": -0.01754
},
{
"date": 7.8624e+08,
"SP500": -0.015393
},
{
"date": 7.8892e+08,
"SP500": -0.023235
},
{
"date": 7.916e+08,
"SP500": 0.043349
},
{
"date": 7.9402e+08,
"SP500": 0.12325
},
{
"date": 7.9669e+08,
"SP500": 0.14149
},
{
"date": 7.9929e+08,
"SP500": 0.16846
},
{
"date": 8.0196e+08,
"SP500": 0.22617
},
{
"date": 8.0456e+08,
"SP500": 0.22651
},
{
"date": 8.0724e+08,
"SP500": 0.18169
},
{
"date": 8.0991e+08,
"SP500": 0.26302
},
{
"date": 8.1251e+08,
"SP500": 0.23108
},
{
"date": 8.1518e+08,
"SP500": 0.33433
},
{
"date": 8.1778e+08,
"SP500": 0.34111
},
{
"date": 8.2045e+08,
"SP500": 0.35203
},
{
"date": 8.2313e+08,
"SP500": 0.314
},
{
"date": 8.2564e+08,
"SP500": 0.28917
},
{
"date": 8.2832e+08,
"SP500": 0.27095
},
{
"date": 8.3091e+08,
"SP500": 0.25444
},
{
"date": 8.3359e+08,
"SP500": 0.23108
},
{
"date": 8.3618e+08,
"SP500": 0.13858
},
{
"date": 8.3886e+08,
"SP500": 0.16037
},
{
"date": 8.4154e+08,
"SP500": 0.17611
},
{
"date": 8.4413e+08,
"SP500": 0.21285
},
{
"date": 8.4681e+08,
"SP500": 0.25051
},
{
"date": 8.494e+08,
"SP500": 0.20264
},
{
"date": 8.5208e+08,
"SP500": 0.23606
},
{
"date": 8.5476e+08,
"SP500": 0.23483
},
{
"date": 8.5717e+08,
"SP500": 0.17292
},
{
"date": 8.5985e+08,
"SP500": 0.22497
},
{
"date": 8.6244e+08,
"SP500": 0.26775
},
{
"date": 8.6512e+08,
"SP500": 0.31986
},
{
"date": 8.6772e+08,
"SP500": 0.49123
},
{
"date": 8.7039e+08,
"SP500": 0.37958
},
{
"date": 8.7307e+08,
"SP500": 0.3782
},
{
"date": 8.7566e+08,
"SP500": 0.29684
},
{
"date": 8.7834e+08,
"SP500": 0.26205
},
{
"date": 8.8093e+08,
"SP500": 0.31008
},
{
"date": 8.8361e+08,
"SP500": 0.24692
},
{
"date": 8.8629e+08,
"SP500": 0.3269
},
{
"date": 8.8871e+08,
"SP500": 0.45519
},
{
"date": 8.9139e+08,
"SP500": 0.38736
},
{
"date": 8.9398e+08,
"SP500": 0.28592
},
{
"date": 8.9666e+08,
"SP500": 0.28097
},
{
"date": 8.9925e+08,
"SP500": 0.17432
},
{
"date": 9.0193e+08,
"SP500": 0.064271
},
{
"date": 9.0461e+08,
"SP500": 0.073611
},
{
"date": 9.072e+08,
"SP500": 0.20123
},
{
"date": 9.0988e+08,
"SP500": 0.21795
},
{
"date": 9.1247e+08,
"SP500": 0.26669
},
{
"date": 9.1515e+08,
"SP500": 0.30538
},
{
"date": 9.1783e+08,
"SP500": 0.1801
},
{
"date": 9.2025e+08,
"SP500": 0.16757
},
{
"date": 9.2292e+08,
"SP500": 0.20097
},
{
"date": 9.2552e+08,
"SP500": 0.19345
},
{
"date": 9.282e+08,
"SP500": 0.21067
},
{
"date": 9.3079e+08,
"SP500": 0.18565
},
{
"date": 9.3347e+08,
"SP500": 0.37934
},
{
"date": 9.3614e+08,
"SP500": 0.26126
},
{
"date": 9.3874e+08,
"SP500": 0.24053
},
{
"date": 9.4141e+08,
"SP500": 0.1936
},
{
"date": 9.4401e+08,
"SP500": 0.19526
},
{
"date": 9.4668e+08,
"SP500": 0.089728
},
{
"date": 9.4936e+08,
"SP500": 0.10344
},
{
"date": 9.5187e+08,
"SP500": 0.16497
},
{
"date": 9.5455e+08,
"SP500": 0.087816
},
{
"date": 9.5714e+08,
"SP500": 0.091225
},
{
"date": 9.5982e+08,
"SP500": 0.059656
},
{
"date": 9.6241e+08,
"SP500": 0.076848
},
{
"date": 9.6509e+08,
"SP500": 0.1494
},
{
"date": 9.6777e+08,
"SP500": 0.1199
},
{
"date": 9.7036e+08,
"SP500": 0.04877
},
{
"date": 9.7304e+08,
"SP500": -0.05325
},
{
"date": 9.7563e+08,
"SP500": -0.10139
},
{
"date": 9.7831e+08,
"SP500": -0.020402
},
{
"date": 9.8099e+08,
"SP500": -0.092563
},
{
"date": 9.834e+08,
"SP500": -0.22571
},
{
"date": 9.8608e+08,
"SP500": -0.13975
},
{
"date": 9.8868e+08,
"SP500": -0.11599
},
{
"date": 9.9135e+08,
"SP500": -0.15827
},
{
"date": 9.9395e+08,
"SP500": -0.15348
},
{
"date": 9.9662e+08,
"SP500": -0.25308
},
{
"date": 9.993e+08,
"SP500": -0.27537
},
{
"date": 1.0019e+09,
"SP500": -0.25858
},
{
"date": 1.0046e+09,
"SP500": -0.13347
},
{
"date": 1.0072e+09,
"SP500": -0.13043
},
{
"date": 1.0098e+09,
"SP500": -0.17263
},
{
"date": 1.0125e+09,
"SP500": -0.10743
},
{
"date": 1.0149e+09,
"SP500": -0.011152
},
{
"date": 1.0176e+09,
"SP500": -0.13809
},
{
"date": 1.0202e+09,
"SP500": -0.15024
},
{
"date": 1.0229e+09,
"SP500": -0.19157
},
{
"date": 1.0255e+09,
"SP500": -0.24736
},
{
"date": 1.0282e+09,
"SP500": -0.19188
},
{
"date": 1.0308e+09,
"SP500": -0.21678
},
{
"date": 1.0334e+09,
"SP500": -0.1642
},
{
"date": 1.0361e+09,
"SP500": -0.17828
},
{
"date": 1.0387e+09,
"SP500": -0.23366
},
{
"date": 1.0414e+09,
"SP500": -0.24288
},
{
"date": 1.0441e+09,
"SP500": -0.23997
},
{
"date": 1.0465e+09,
"SP500": -0.26077
},
{
"date": 1.0492e+09,
"SP500": -0.14857
},
{
"date": 1.0517e+09,
"SP500": -0.097035
},
{
"date": 1.0544e+09,
"SP500": -0.015478
},
{
"date": 1.057e+09,
"SP500": 0.086319
},
{
"date": 1.0597e+09,
"SP500": 0.10036
},
{
"date": 1.0624e+09,
"SP500": 0.22163
},
{
"date": 1.065e+09,
"SP500": 0.18622
},
{
"date": 1.0676e+09,
"SP500": 0.13018
},
{
"date": 1.0702e+09,
"SP500": 0.2638
},
{
"date": 1.0729e+09,
"SP500": 0.32188
},
{
"date": 1.0756e+09,
"SP500": 0.36116
},
{
"date": 1.0781e+09,
"SP500": 0.3278
},
{
"date": 1.0808e+09,
"SP500": 0.20763
},
{
"date": 1.0834e+09,
"SP500": 0.16303
},
{
"date": 1.086e+09,
"SP500": 0.17069
},
{
"date": 1.0886e+09,
"SP500": 0.1125
},
{
"date": 1.0913e+09,
"SP500": 0.095465
},
{
"date": 1.094e+09,
"SP500": 0.11909
},
{
"date": 1.0966e+09,
"SP500": 0.075654
},
{
"date": 1.0993e+09,
"SP500": 0.10926
},
{
"date": 1.1019e+09,
"SP500": 0.089935
},
{
"date": 1.1045e+09,
"SP500": 0.044327
},
{
"date": 1.1072e+09,
"SP500": 0.051234
},
{
"date": 1.1096e+09,
"SP500": 0.048286
},
{
"date": 1.1123e+09,
"SP500": 0.044748
},
{
"date": 1.1149e+09,
"SP500": 0.063194
},
{
"date": 1.1176e+09,
"SP500": 0.044257
},
{
"date": 1.1202e+09,
"SP500": 0.12023
},
{
"date": 1.1229e+09,
"SP500": 0.10513
},
{
"date": 1.1255e+09,
"SP500": 0.10249
},
{
"date": 1.1281e+09,
"SP500": 0.067961
},
{
"date": 1.1308e+09,
"SP500": 0.064456
},
{
"date": 1.1334e+09,
"SP500": 0.03001
},
{
"date": 1.1361e+09,
"SP500": 0.083647
},
{
"date": 1.1388e+09,
"SP500": 0.064025
},
{
"date": 1.1412e+09,
"SP500": 0.096799
},
{
"date": 1.1438e+09,
"SP500": 0.13291
},
{
"date": 1.1464e+09,
"SP500": 0.065959
},
{
"date": 1.1491e+09,
"SP500": 0.066203
},
{
"date": 1.1517e+09,
"SP500": 0.03442
},
{
"date": 1.1544e+09,
"SP500": 0.068416
},
{
"date": 1.1571e+09,
"SP500": 0.087109
},
{
"date": 1.1597e+09,
"SP500": 0.14161
},
{
"date": 1.1623e+09,
"SP500": 0.12097
},
{
"date": 1.1649e+09,
"SP500": 0.13619
},
{
"date": 1.1676e+09,
"SP500": 0.12355
},
{
"date": 1.1703e+09,
"SP500": 0.098512
},
{
"date": 1.1727e+09,
"SP500": 0.097299
},
{
"date": 1.1754e+09,
"SP500": 0.13105
},
{
"date": 1.178e+09,
"SP500": 0.20513
},
{
"date": 1.1807e+09,
"SP500": 0.18355
},
{
"date": 1.1832e+09,
"SP500": 0.1399
},
{
"date": 1.1859e+09,
"SP500": 0.13052
},
{
"date": 1.1886e+09,
"SP500": 0.14291
},
{
"date": 1.1912e+09,
"SP500": 0.12442
},
{
"date": 1.1939e+09,
"SP500": 0.057481
},
{
"date": 1.1965e+09,
"SP500": 0.035296
},
{
"date": 1.1991e+09,
"SP500": -0.041502
},
{
"date": 1.2018e+09,
"SP500": -0.054158
},
{
"date": 1.2043e+09,
"SP500": -0.069085
},
{
"date": 1.207e+09,
"SP500": -0.065287
},
{
"date": 1.2096e+09,
"SP500": -0.08509
},
{
"date": 1.2123e+09,
"SP500": -0.14857
},
{
"date": 1.2149e+09,
"SP500": -0.12911
},
{
"date": 1.2175e+09,
"SP500": -0.12969
},
{
"date": 1.2202e+09,
"SP500": -0.23605
},
{
"date": 1.2228e+09,
"SP500": -0.37475
},
{
"date": 1.2255e+09,
"SP500": -0.3949
},
{
"date": 1.2281e+09,
"SP500": -0.38486
},
{
"date": 1.2308e+09,
"SP500": -0.40091
},
{
"date": 1.2334e+09,
"SP500": -0.44756
},
{
"date": 1.2359e+09,
"SP500": -0.39679
},
{
"date": 1.2385e+09,
"SP500": -0.37008
},
{
"date": 1.2411e+09,
"SP500": -0.34365
},
{
"date": 1.2438e+09,
"SP500": -0.28178
},
{
"date": 1.2464e+09,
"SP500": -0.22085
},
{
"date": 1.2491e+09,
"SP500": -0.2044
},
{
"date": 1.2518e+09,
"SP500": -0.093693
},
{
"date": 1.2544e+09,
"SP500": 0.069615
},
{
"date": 1.257e+09,
"SP500": 0.22247
},
{
"date": 1.2596e+09,
"SP500": 0.23454
},
{
"date": 1.2623e+09,
"SP500": 0.30027
},
{
"date": 1.265e+09,
"SP500": 0.50252
},
{
"date": 1.2674e+09,
"SP500": 0.46569
},
{
"date": 1.2701e+09,
"SP500": 0.35962
},
{
"date": 1.2727e+09,
"SP500": 0.18525
},
{
"date": 1.2754e+09,
"SP500": 0.12117
},
{
"date": 1.2779e+09,
"SP500": 0.11557
},
{
"date": 1.2806e+09,
"SP500": 0.02813
},
{
"date": 1.2833e+09,
"SP500": 0.079578
},
{
"date": 1.2859e+09,
"SP500": 0.14193
},
{
"date": 1.2886e+09,
"SP500": 0.077508
},
{
"date": 1.2912e+09,
"SP500": 0.12783
},
{
"date": 1.2938e+09,
"SP500": 0.19765
},
{
"date": 1.2965e+09,
"SP500": 0.20166
},
{
"date": 1.2989e+09,
"SP500": 0.13374
},
{
"date": 1.3016e+09,
"SP500": 0.14909
},
{
"date": 1.3042e+09,
"SP500": 0.2348
},
{
"date": 1.3069e+09,
"SP500": 0.28129
},
{
"date": 1.3095e+09,
"SP500": 0.17309
},
{
"date": 1.3122e+09,
"SP500": 0.16159
},
{
"date": 1.3148e+09,
"SP500": -0.0085699
},
{
"date": 1.3174e+09,
"SP500": 0.059192
},
{
"date": 1.3201e+09,
"SP500": 0.056253
},
{
"date": 1.3227e+09,
"SP500": -3.1806e-05
},
{
"date": 1.3254e+09,
"SP500": 0.020441
},
{
"date": 1.3281e+09,
"SP500": 0.028978
},
{
"date": 1.3306e+09,
"SP500": 0.062331
},
{
"date": 1.3332e+09,
"SP500": 0.025154
},
{
"date": 1.3358e+09,
"SP500": -0.025922
},
{
"date": 1.3385e+09,
"SP500": 0.031439
},
{
"date": 1.3411e+09,
"SP500": 0.067354
},
{
"date": 1.3438e+09,
"SP500": 0.15398
},
{
"date": 1.3465e+09,
"SP500": 0.27333
},
{
"date": 1.349e+09,
"SP500": 0.12675
},
{
"date": 1.3517e+09,
"SP500": 0.13571
},
{
"date": 1.3543e+09,
"SP500": 0.13406
},
{
"date": 1.357e+09,
"SP500": 0.1415
},
{
"date": 1.3597e+09,
"SP500": 0.1091
},
{
"date": 1.3621e+09,
"SP500": 0.11411
},
{
"date": 1.3648e+09,
"SP500": 0.14283
},
{
"date": 1.3674e+09,
"SP500": 0.24453
},
{
"date": 1.37e+09,
"SP500": 0.17922
},
{
"date": 1.3726e+09,
"SP500": 0.21438
} ],
"x": "date",
"y": "SP500",
"id": "chart8682cb0b4b"
};
var svg = d3.select('#' + params.id).append("svg")
.attr("width", params.width)
.attr("height", params.height);
var chart = d3.horizon()
.width(params.width)
.height(params.height - 50)
.bands(params.bands)
.mode(params.mode)
.interpolate(params.interpolate);
data = [params.data.map(function(d) {return[d[params.x],d[params.y]]})]
svg.data(data).call(chart);
var x = d3.time.scale().range([0,params.width]),
xAxis = d3.svg.axis().scale(x).tickSize(5).tickSubdivide(true).orient("bottom");
x.domain(d3.extent(params.data,function(d){return new Date(d[params.x] * 1000) }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (params.height - 50) + ")")
.call(xAxis);
var y = d3.scale.linear().range([(params.height) * params.bands - 76,0]), //use 76 for proper alignment
yAxis = d3.svg.axis()
.scale(y)
.tickSize(params.width)
.ticks(params.bands * params.bands)
.orient("left");
y.domain(d3.extent(params.data, function(d){return Math.abs( d[params.y] )}));
svg.append("g")
.attr("class","y axis")
.attr("transform", "translate(" + params.width + ",0)")
.call(yAxis);
</script>
</body>
<!-- Google Prettify -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js"></script>
<script
src='https://google-code-prettify.googlecode.com/svn-history/r232/trunk/src/lang-r.js'>
</script>
<script>
var pres = document.getElementsByTagName("pre");
for (var i=0; i < pres.length; ++i) {
pres[i].className = "prettyprint linenums";
}
prettyPrint();
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment