Widgets For Christmas

For Christmas, I generally want electronic widgets, but after six months of development, all I wanted this Christmas was htmlwidgets, and Santa RStudio/jj,joe,yihui and Santa Ramnath delivered early with this RStudio tweet on December 17th.

htmlwidgets: Bring the best of JavaScript data visualization to R http://t.co/a16qlLxuLz #rstats

— RStudio (@rstudio) December 17, 2014

The major benefit of htmlwidgets is it provides all three methods of bridging R with JavaScript/HTML mentioned in my Aug. 16, 2013 post I Want ggplot2/lattice and d3 (gridSVG–The Glue).  For htmlwidgets to be successful though, not only do htmlwidgets need to work, easy creation of widgets is absolutely essential.

As a quick example, we can look at the DiagrammeR package released yesterday by Richard Iannone.  DiagrammeR launched in non-htmlwidgets form severely hampering its ability to be easily used in multiple contexts.  Converting it to htmlwidgets seemed like a great opportunity to illustrate both the ease of htmlwidgets creation and the powerful infrastructure offered by htmlwidgets.  So, in a couple hours—easy to create, check—yesterday (most of the time spent on examples, documentation, and testing) with only a couple of lines of JavaScript—easy to create, check again—I was able to transform the DiagrammeR package into htmlwidgets.

I thought a finance diagram would be a great example for this blog, so off to Google Images I went looking for a good and also simple application and chose this from the Department of Finance Canada.

Here is what it looks like with DiagrammeR + mermaid.js.

 

If I can come up with the resolve and commitment, I might have an announcement for 2015 – the year of the widget.

Happy New Year, and thanks for 4 good years of TimelyPortfolio.

Out of Nowhere–Explore Text on a Path

I had not really stopped to think of this until I listened to this The Web Ahead podcast with Sara Soueidan.  What is really interesting about the tech world is how experts can seemingly pop up out of nowhere and become the authority on a topic.  In the podcast, this was the case with the interviewee Sara Soueidan.  We can find a similar example in Joni "Bologna" Trythall with SVG.

I find it even more fun when I can incorporate these experts’ content into R.  Let’s animate some text on a path as Joni does in her article "Animating SVG text On A Path", but instead of an arbitrary path, let’s use a line in a plot.

I’ll copy the code below.  Let me know if a tutorial would be helpful.

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

# make as basic a line plot as I know how in R
svg = svgPlot(plot(sin(seq(0,pi*3,0.2)),type="l")) %>>%
  # extract the XML and use htmlParse
  # to overcome namespace confusion and difficulty
  saveXML %>>% htmlParse

# with base R plots, we get clues with clip-path attributes
# in this case we know with some inspection
# there will be one g with a clip-path attribute
# and that g will contain our plotted line
getNodeSet(svg,"//g[contains(@clip-path,'url')]//path")[[1]] %>>%
  # let's add an id so we can reference this later
  ( addAttributes( node=., id = "ourline" ) )

# first step in adding text to a path
# make a new text node
textOnPath = newXMLNode("text")
# now the critical part to join the text to the path
addChildren(
  textOnPath
  , newXMLNode(
    "textPath"
    ,attrs=c( "xlink:href" = "#ourline" ) #our id given above
    ,"some text on a path" #some very creative saying
  )
)

# add our text node to the svg plot
addChildren(
  getNodeSet(svg,"//svg")[[1]]
  ,kids = list(textOnPath)
)
# see if it works by sending to our viewer/browser
getNodeSet(svg,"//svg")[[1]] %>>%
  saveXML %>>% HTML %>>% html_print

# let's continue our journey by exploring the startOffset attribute
# startOffset says where on the path to start our text
# what happens if we add startOffset = 30%
getNodeSet(svg, "//textPath")[[1]] %>>%
  ( addAttributes( node = . , startOffset = "30%" ) )
# find out the effect of startOffset by browsing
getNodeSet(svg,"//svg")[[1]] %>>%
  saveXML %>>% HTML %>>% html_print

# for our grand finale we can animate the text
# note: this might not work in your browser, so use Chrome
# add a child animate node with the same attributes as Joni's tutorial
getNodeSet(svg, "//textPath")[[1]] %>>%
  (
    addChildren(
      node = .
      , newXMLNode(
        "animate"
        ,attrs = c(
          attributeName="startOffset"
          ,values = "0;0.7;1"
          ,dur = "8s"
          ,repeatCount = "indefinite"
          ,keyTimes = "0;0.2;1"
        )
      )
    )
  )
# see the animated text
getNodeSet(svg,"//svg")[[1]] %>>%
  saveXML %>>% HTML %>>% html_print(viewer=utils::browseURL)

No Reason to Read, Just Need an Outlet

Don’t intend for this to be a bitch and moan post, and I’m not sure there is really any real objective other than I feel like I need an outlet.  This happens to be my only one,.

For those out there not engaged in money management, it can be pleasantly simple and maybe even entertaining to poke fun  at those of us who foolishly choose to call ourselves portfolio managers.  However, this business can be excrutiating, depressing, and frustrating.  Generally, our biggest benefit to our clients is insulating themselves from their own stupidity, but often this task becomes impossible, usually at the time when client stupidity results in the most amount of damage to themselves.

While distracting myself with my insatiable curiosity through academic research, technology, and data visualization (just look at the last couple of years of posts) helps, I cannot forget that I get paid to manage money, which generally just ain’t no fun as failing is the norm, and the brief moments of “success” go unnoticed and disappear with no lasting memory or permanent effect. 

Most would naively say go do something else, but I still feel this delusional quest really can help those few clients who trust and endure.

Much Better Animated Paths | Christmas SVG

Just after I made my really ugly animated turkey sketch (see post), I saw this much better set of Christmas icons in the Smashing Magazine Article Freebie Christmas Icon Set from Manuela Langella.  While I still remember how to do this, I thought I would use the same techniques in R using rvest + XML + htmltools to animate the paths with vivus.js.  In the iframe below is the result on the Santa icon.

Code: http://gist.github.com/39394d6e37a7fd878cab#file-code-R