block by timelyportfolio 086fbb2f63805cdb39a859a9fc6f0be5

parcoords + sparkline R htmlwidget

Full Screen

Built with blockbuilder.org

experiments with sparklines

jquery.sparkline is old but works really well. As far as I know, its only real competitor is react-sparklines. Ramnath Vaidyanathan used jquery-sparkline for testing in one of the very first R htmlwidgets sparkline. Since then, not much has happened, but I hate to see a great JavaScript library not used to its full potential.

I have started experimenting with sparkline to hopefully update it to exploit the full potential. Here is one of the experiments combining parcoords with sparkline.

code

library(parcoords)
library(sparkline)
library(htmlwidgets)
library(htmltools)

browsable(
  attachDependencies(
    tagList(
      tags$div(
        tags$span(style="font-style:bold","mpg"),
        tags$span(id="sparkline-mpg")
      ),
      tags$div(
        tags$span(style="font-style:bold","disp"),
        tags$span(id="sparkline-disp")
      ),
      onRender(
        parcoords(mtcars,brushMode="1d-axes"),
        sprintf(
"        
function(el,x){
  var drawBox = function(pc){
    $('#sparkline-mpg').sparkline(
      pc.brushed().map(function(d){return d.mpg}),
      {type:'box',chartRangeMin:%i,chartRangeMax:%i}
    );
    $('#sparkline-disp').sparkline(
      pc.brushed().map(function(d){return d.disp}),
      {type:'box',chartRangeMin:%i,chartRangeMax:%i}
    );
  };

  drawBox(el.parcoords);

  el.parcoords.on(
    'brush.sparkline',
    function(){drawBox(this)}
  )
}
",
          0,
          ceiling(max(mtcars$mpg)),
          0,
          ceiling(max(mtcars$disp))
        )
      )
    ),
    htmlwidgets:::getDependency("sparkline","sparkline")
  )
)