Applications of Interactivity to Finance

Of the nearly infinite ways of using crossfilter and dc.js in finance, the 2 that immediately came to my mind are signal analysis in system building and money manager analysis in due diligence.  My first very basic experiment explores a commonly known signal (RSI) on the daily S&P 500 since 1950.  Interactivity adds a lot to the experience.  I used R to grab and reshape the data and slidify to make it pretty.  Check it out by clicking here or on the screenshot below.

For another very fine example of dc.js and crossfilter in use with AAII Stockpicking strategy data, see this fine site.

gridSVG Multi-line Data Bind with d3–US Treasury Yields

If you have not read the other posts on gridSVG and d3, I recommend reading those before progressing to this one.

Facets or strips are one of my favorite features of lattice and ggplot2, so of course I want to extend our d3 reverse data bind to support these small multiples.  Let’s see one way of accomplishing this.  For a short explanation of the process, click here or on the screenshot below.  If you just like yield curve data, I think you will enjoy the graph which I have embedded below.

Stocks and Bonds Behavior by Decade

I struggled with whether or not I should even post this.  It is raw and ugly, but it might help somebody out there.   I might use this as a basis for some more gridSVG posts, but I do not think I have the motivation to finish the analysis.

Code:

require(latticeExtra)
require(quantmod)
require(PerformanceAnalytics)

getSymbols("SP500",src="FRED")
US10 <- na.omit(getSymbols("DGS10",src="FRED",auto.assign=FALSE))

stocksBonds <- na.omit(
  merge(
    lag(SP500,k=-100)/SP500-1,  #forward 100 day sp500 perf
    US10 / runMean(US10,n=250) - 1,       #us10 yield - 250 day average
    SP500
  )
)
#get the decade
stocksBonds$decade = as.numeric(substr(index(stocksBonds),1,3)) * 10
#name columns
colnames(stocksBonds) <- c("sp500","us10","SP500","decade")
#get a color ramp for our change in us10 year yields
linecolors <- colorRamp(
  c("red","green"),
  interpolate="linear",
  space="rgb"
)((stocksBonds[,2]+0.5))

xyplot(
  stocksBonds[,1],
  col=rgb(linecolors,max=255),
  type="p",pch=19,cex=0.5,
  main = "Stocks 100d Forward Performance"
)

xyplot(
  sp500 ~ us10 | factor(decade),
  groups = decade,
  data = as.data.frame(stocksBonds),
  pch=19,
  cex = 0.5,
  scales = list(
    x = list(tck=c(1,0),alternating=1)
  ),
  layout=c(6,1),
  main = "S&P 500 Forward Performance vs US 10y Change in Yields",
  ylab = "S&P Forward Performance (100d)",
  xlab = "US 10y Yields - 250d Avg"
) +
latticeExtra::layer(panel.abline(h=0,col="gray",lty=2)) +
latticeExtra::layer(panel.abline(v=0,col="gray",lty=2)) +
xyplot(
  sp500 ~ us10 | factor(decade),
  col="gray",
  data = as.data.frame(stocksBonds),
  panel = panel.lmline)

require(ggplot2)
ggplot(data = data.frame(stocksBonds), aes(y=sp500, x= us10,colour=decade))+
  geom_point()+facet_wrap(~decade,ncol=6)+geom_smooth()

 

charts.PerformanceSummary(
  merge(
    ROC(stocksBonds[,3],n=1,type="discrete"),
    ROC(stocksBonds[,3],n=1,type="discrete") * (stocksBonds[,2]>0)
  ),
  main="S&P 500 | if Bonds - Mean(250d) > 0"
)

PIMCO Rolling Correlation, d3, R, gridSVG, lattice | Gets An Axis

Where else will you hear Pimco, rolling correlation, R, gridSVG, lattice, and d3 all in one post?  Let’s mix them all together to see what might happen.  For those here for the geekery, we will add a d3 axis for our y and it will follow the mouse.  For those who care nothing about d3 and R, you might like the chart too since it plots the 90 day rolling correlation between Pimco Total Return and Pimco All Asset Authority  .  Click here if or on the screenshot below. to see the live version.

 

 

 

At some point I will find the limits of my creativity and knowledge.  Please give me some ideas.

R/gridSVG/d3 Line Reverse Data Bind

I veer from finance to tech, so let’s use some data from FRED/OECD this time.  I do not think I need to comment much on what has happened to New Car Registrations in Greece.

Reverse data binding a line plot from ggplot2 or lattice is slightly more difficult than what we saw in the last post I Want ggplot2/lattice and d3 (gridSVG–The Glue).  Here is a quick tutorial on one way we can accomplish this.  Click on this link or the screenshot below.

As always, this is fully reproducible.  See the code on Github.

R on Your iPhone (Not the Way You Think)

If you really love R, you should put it on your iPhone.  Apple gives the measurements for its products here. Let's use a little grid magic with ggplot2 to make a chart for the back of your iphone similar to this.

require(grid)
require(ggplot2)

# thanks for the Apple measurements
# https://developer.apple.com/resources/cases/
x11(
  height = as.numeric(convertX(unit(58.55, "mm"), "in")),
  width = as.numeric(convertX(unit(115.15,"mm"), "in"))
)

# seems Rstudio make it hard to select a dev use until the new dev is
# Active
dev.set(which = dev.next())
# draw anything to activate our window
grid.text("my R iphone case")

# draw your most beautiful plot with ggplot2 or lattice a good example
# thanks http://sharpstatistics.co.uk/r/ggplot2-guide/
p <- ggplot(iris, aes(Sepal.Length, Sepal.Width)) + geom_point()
p + facet_grid(. ~ Species) + stat_smooth(method = "lm")

# draws rectangular and circular(camera) cutout
grid.roundrect(
  y = unit(28.975, "mm"),
  x = unit(57.275, "mm"),
  height = unit(57.95, "mm"),
  width = unit(114.55, "mm"),
  r = unit(8.17, "mm"),
  name = "iphoneback"
)
grid.circle(
  y = unit(49.78, "mm"),
  x = unit(106.45, "mm"),
  r = unit(3.46, "mm")
)

Cut and insert in or paste/tape to your case.

A little more seriously, this is a good way to test how your graph might appear on an iOS device if you have the need.  Just use the screen measurements from the Apple specs.

ggplot2 meet d3

With great libraries, just a couple lines of code can do amazing things.  For instance, let’s limit ourselves to less than 10 lines of code and see what ggplot2 and d3 can do.  We will use gridSVG as discussed in yesterday’s post I Want ggplot2/lattice and d3 (gridSVG–The Glue) to expose ggplot2 to d3.  Thanks Hadley Wickham, Mike Bostock, Paul Murrell, Simon Potter, and George Bull/Sharp Statistics.

If the iframe does not appear below, click here.

Just think what we can do if we remove our 10 line code limit.

#get the latest version of gridSVG
#install.packages("gridSVG", repos="http://R-Forge.R-project.org")

require(ggplot2)
require(gridSVG)

#draw a ggplot2 graph
#thanks http://sharpstatistics.co.uk/r/ggplot2-guide/
p <- ggplot(iris, aes(Sepal.Length, Sepal.Width)) + geom_point()
p + facet_grid(. ~ Species) + stat_smooth(method = "lm")

#define a simple html head template
htmlhead <- 
'<!DOCTYPE html>
<head>
  <meta charset = "utf-8">
  <script src = "http://d3js.org/d3.v3.js"></script>
</head>

<body>
'

#use gridSVG to export our plot to SVG
mysvg <- grid.export("panzoom1.svg")


#define a simple pan zoom script using d3
panzoomScript <-
'  <script>
    var svg = d3.selectAll("#gridSVG");
    svg.call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
    
    function zoom() {
      svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
    } 
  </script>
</body>
'

#combine all the pieces into an html file
sink("panzoom_ggplot2.html")
cat(htmlhead,saveXML(mysvg$svg),panzoomScript)
#close our file
sink(file=NULL)

I Want ggplot2/lattice and d3 (gridSVG–The Glue)

I really like interactive graphics, especially when they come straight from R.  I posted a lot about rCharts, but it is not the only way.  In my mind there are three types of glue to link R to SVG/HTML/Javascript:

1. Let R do the data and then send the data to Javascript to create the SVG graphics. This is the process employed by rCharts, clickme,d3network, googleVis, gigvis, and tabplotd3.

2. Let R both do the data and render the graph then export the SVG to get interactivity from Javascript. We see this with the new and improved gridSVG and the predecessor SVGAnnotation.

3. Use 1. or 2. and then maintain bidirectional communication between R and Javascript through shiny, Rook, or some other web server type interface.

Let’s think about method 2.  R has ggplot2 and lattice.  Javascript has d3.  I want both.

We R users are very spoiled by the ggplot2 and lattice engines that rival or beat the plotting libraries of any language.  Wouldn’t it be nice to have all the power of these engines to create interactive graphs?  Well, Paul Murrell, the author of grid (platform of ggplot2 and lattice), wrote gridSVG to do just that.  Over the last couple of years, Simon Potter under the guidance of Murrell has refined gridSVG for his honours project.  It is now a full-featured robust package capable of sending even your most complicated ggplot2 and lattice masterpieces to SVG.   gridSVG can do amazing things on his own, but I, of course, wanted to combine gridSVG with d3.  Click here or on the screenshot below to see a walkthrough applying a little gridSVG glue to ggplot2 and d3.

Thanks to Paul Murrell, Simon Potter, Hadley Wickham, Mike Bostock, Duncan Temple Lang, Deborah Nolan, Juliana Williams, Andreas Neumann, Ramnath Vaidyanathan and all the folks along the way that have made this possible.