block by timelyportfolio 3bad88913525c707c750

r animated chart in svg with vivus.js

Full Screen

Shortly after producing this example of animated chart drawing in R with SVG + javascript using walkway.js, I saw on Twitter this vivus.js. The biggest difference is vivus.js seems to work better in @RStudio. See code.R to replicate and extend.

Live example

code.R

library(htmltools)
library(rvest)
library(pipeR)
library(SVGAnnotation)

svgPlot(
  plot( x = 1:10, y = 1:10, type = "l" )
) %>>%
  saveXML %>>%
  html %>>%
  html_node("svg") %>>%
  addAttributes(
    id = "rplot"
  ) %>>%
  (
    tagList(
      . %>>% saveXML %>>% HTML
      ,tags$script(
        "new Vivus('rplot',{type: 'delayed',start:'autostart',delay:0,duration:200})"
        #"new Vivus('rplot',{type: 'oneByOne',start:'autostart',delay:0,duration:500})"
      )
    )
  ) %>>%
  attachDependencies(
    htmlDependency(
      name="vivus"
      ,version="0.1"
      ,src=c("href"=
               "http://maxwellito.github.io/vivus/dist"
      )
      ,script = "vivus.min.js"
    )
  ) %>>%
  html_print #%>>%
#  rCharts:::publish_.gist( description = "r animated chart in svg with vivus.js", id = NULL )