R d3.js d3horizon with hover zoom

• built in R with d3horizonR htmlwidget and htmltools
• using JavaScript d3.js and d3-horizon-chart
• assembled with blockbuilder.org

Little Bit of JavaScript

An R user with a little bit of JavaScript and the power of htmlwidgets can achieve some neat results. In this little example we add a mouseover zoomed horizon chart with just a couple lines of code.

Code

library(d3horizonR)
library(d3r)
library(htmltools)

d3h <- d3horizon(
  lapply(1:10, function(x){cumprod(1+runif(1000,-0.02,0.02))-1}),
  options = d3horizonOptions(height=7),
  width = 400
)

browsable(
  tagList(
    htmlwidgets::onRender(
      d3h,
"
function(el,x) {
  var hzs = d3.select(el).selectAll('.horizon');
  var hz_zoom = d3.select('#horizonzoom');
  hz_zoom.style('width', el.style.width);

  hzs.on('mouseover', function(d) {
debugger;
    var hzw = HTMLWidgets.widgets.filter(function(d){return d.name==='d3horizon'})[0];
    var instance = hzw.initialize(hz_zoom.node());
    instance.renderValue({data:[d], options:{height: 200}});;
  })
}
"
    ),
    tags$div(
      style = "margin-top: 20px",
      tags$div(id="horizonzoom")
    ),
    d3_dep_v4()
  )
)

Screenshot