d3 horizon with axis from rCharts

<!doctype HTML>
<meta charset = 'utf-8'>
<html>
  <head>
    <link rel='stylesheet' href="https://netdna.bootstrapcdn.com/bootswatch/2.3.1/cosmo/bootstrap.min.css">
     <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" >
    <link rel='stylesheet' href="https://twitter.github.io/bootstrap/assets/js/google-code-prettify/prettify.css">
    <link rel='stylesheet' href="https://aozora.github.io/bootplus/assets/css/docs.css">
    
    <script src='https://d3js.org/d3.v3.min.js' type='text/javascript'></script>
    <script src='https://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>

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);

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://timelyportfolio.github.io/rCharts_d3_horizon/libraries/widgets/d3_horizon/js/horizon.js to a secure url

Modified http://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js to a secure url

https://d3js.org/d3.v3.min.js

https://timelyportfolio.github.io/rCharts_d3_horizon/libraries/widgets/d3_horizon/js/horizon.js

https://cdnjs.cloudflare.com/ajax/libs/prettify/188.0.0/prettify.js