Shiny/R Conversion of Another One of My Favorite Mike Bostock d3 Examples

Mike Bostock has revolutionized visualization with his d3 and his seemingly infinite examples.  In another adaptation of his amazing work, I will adapt one of my favorite examples to supplement the interactive scatterplot with data supplied by R through Shiny.  Often in finance, we will use a scatterplot to explore the relationship between different asset classes or risk exposures.  This exploration becomes much more deep and meaningful when we can interact in real-time with the plot.

I thought using the technique to look at the monthly returns of Vanguard funds representing different exposures would be helpful.  A clear linear relationship immediately shows up between the equity funds (VFINX-Vanguard S&P 500, VDMIX-Vanguard Developed Markets, and VEIEX-Vanguard Emerging Markets).  Also, we can see the very beneficial effect of VBMFX-Vanguard Total US Bond throughout what we know was a tumultuous period.

Live example hosted at Glimmer (IE does not correctly render IFRAME below)

Code at Github

Shiny SVG no d3–New and Improved

The fine author Joe Cheng of RStudio Shiny suggested in this Google Groups message to use htmlOutput rather than the ugly hack in my last post R Shiny svg with no d3.  As I should have known, it works great and eliminates all the useless javascript.  Unless, you dig into the code, nothing changes, but I have posted a new glimmer live example and the code at Github.  For the ambitious, please feel free to use d3 now or other code to show how we could change colors and other aesthetics with javascript.

R Shiny svg with no d3

see Shiny SVG no d3–New and Improved for a better version

Paul Murrell’s Technical Report reminded me that svg in the browser does not require d3.  With his package gridSVG, we can do all sorts of wonderful things without leaving R.  I think I prefer the power of d3.js, but here is an example of R creating svg from a lattice plot with gridSVG and then sending to the browser through Shiny.

Here is the code at github.

From d3 to pdf (hopefully knitr) with R Shiny

Although I think I like the d3, R, and Shiny team the best, I could definitely envision a big need for multi-page pdf reports created with R, knitr, and latex delivered to the browser with Shiny.  Shiny helpfully provides pre-built functionality to send .png charts and graphics created by R to the web.  This works especially well since most browsers offer containers for the graphics that can dynamically change.

In this quick experiment, I use the pdf() dev function from R instead of the hoped for knit2pdf to see if sending the binary pdf data is possible.  It seems the downloadHandler function from Shiny only currently handles text.  The downloadHandler function from Shiny also serves up downloads well.  I have included the code to get that to work also if you prefer this behavior.

Try it out at http://glimmer.rstudio.com/timelyportfolio/shiny-d3-pdf.  It seems to work with the newest Chrome and IE.

Code at Github.

d3 Showreel Combined with R and Shiny

Since the d3 portion of the example provide in my last post d3 and r interacting through shiny was so weak, I thought it would be interesting to combine the much more compelling Showreel Example with the same stock data.  However, this time the data will come from R getSymbols.  Also, most of the plots would be better using cumulative return data, so we will use R to convert the price data into a cumulative return series.

Almost all credit for the code contained in this example goes to Mike Bostock, and although much of the code is now gone, the structure and idea belong to Trestle Technology's Jeff Allen.

See it live in the browser at http://glimmer.rstudio.com/timelyportfolio/shiny-d3-showreel/, and all code is hosted on Github, so please play, experiment, and let me know what great things you do with this.

d3 and r interacting through shiny

I was amazed and delighted by the Reconstruct Gene Networks Using Shiny.  Jeff accomplished what I knew was possible but had absolutely no idea how to implement.  With the boost, I went to work combining his d3 force layout with my d3 experiments discussed in Hi R and Axys, I’m d3.js “Nice to Meet You” (On the Iphone).  Unfortunately, I could not figure out how to host the example at http://glimmer.rstudio.com See this live at http://glimmer.rstudio.com/timelyportfolio/shiny-d3-plot/, and for all the source code go to https://github.com/timelyportfolio/shiny-d3-plot.

Unbelievable and Amazing R Shiny–Web Parameter Test in 1.5 Hours

Life keeps getting better and better.  Yesterday, I discovered the absolutely unbelievable and amazing work RStudio has done with Shiny employing one of my favorite R packages websockets.  As proof of the ease and quality, within a couple of minutes, I was able to get it up and running.  This morning basically starting from scratch in less than 1.5 hours I was able to achieve a web-based interactive parameter test for a moving average system as my first example.

Below is a screencast of this very basic parameter testing web app.  I can only hope that this simple application can illustrate just how powerful Shiny is.  Just imagine pairing this with d3 or knitr.

R code for server.R and ui.R from GIST:

Hi R and Axys, I’m d3.js “Nice to Meet You” (On the Iphone)

I am still definitely in the proof of concept stage, but as I progress I get more excited about the prospects of combining d3.js with R and Axys through Bryan Lewis’ really nice R websockets package (even nicer now that he has added the daemonize function).  In this iteration, I will add a cumulative growth line chart, some animation and transitions, and then javascript will ask R to calculate drawdowns.  Instead of R returning a chart like last time, R will send the results of the drawdown calculations through JSON through the websocket.  We will then use d3.js to draw a line chart of drawdowns.  This becomes really powerful when we consider the existing and thanks to Google Summer of Code soon to be added risk/return calculations offered by the R PerformanceAnalytics package.

As one last bonus at the end of the video you will see that we can get this interactive reporting experience and websocket communication all on our Iphone and Ipad.

As a quick review of what is happening

1. Axys runs a report called perhstsp.rep.
2. Axys calls the cdataset.xlsm testd3axys macro and sends performance information.
3. Excel cdataset.xlsm testd3axys macro does some very basic formatting, converts the data to JSON, creates a webpage, and opens the webpage in the default browser.
4. Browser opens the webpage and d3.js generates a bar graph of performance and then a cumulative growth line chart.
5. Browser provides a button to open a websocket with R and send the performance information originally calculated in Axys.
6. R receives the performance data through the websocket, calculates drawdown, and then sends the drawdown calculations as JSON back to the browser.
7. Browser receives the drawdown calculations and d3.js plots them as a line chart.

 

The next set of iterations will focus on cleaning up the d3.js charts and adding interactivity.

So far I have received no comments.  Please let me know what you think about this.

The list of acknowlegements is starting to get long. I really appreciate all the fine work done by Mike Bostock on d3.js https://github.com/mbostock/d3/wiki, the dedicated authors of the R package PerformanceAnalytics http://cran.r-project.org/web/packages/PerformanceAnalytics/index.html, Bryan the author of http://illposed.net/websockets.html and the example, the author of RJSONIO http://cran.r-project.org/web/packages/RJSONIO/index.html, and Bruce McPherson at http://excelramblings.blogspot.com/ for the inspirational idea.

To work through on your own, you will need the Excel file cdataset.xlsm, the Axys report perhstsp.rep, and the R code from GIST.

Best of Axys, R, d3.js, and HTML5

Axys, R, d3.js, and HTML5 all offer incredibly powerful tools for investment management and reporting, but they are not set up to synergistically interact to fill each other’s gaps and leverage each other’s strengths.  In my ideal scenario, Axys serves as the accounting system and performance calculator, R serves as the advanced financial/statistical engine, d3.js serves as the interactive reporting component, and HTML5 offers the user interface and ties everything together through websockets (nicely demoed here).  After working and suffering with Axys for 12 years, I am amazed that it all seems to be coming together.  I provided a bare proof of concept for Axys to d3.js in my post Axys to d3.js Error Catching and Formatting.  Now let’s extend that to R and websockets through the generously contributed R websockets package.  I have borrowed very heavily from the author's Youtube example presented in

In this proof of concept, Axys will calculate performance and send to Excel through a graph macro which creates JSON and an html page (thanks Bruce http://excelramblings.blogspot.com/).  The html page contains javascript and d3.js to produce a simple bar chart.  Now we add a button to take the JSON created by Excel and embedded in our html and send it to R.  R will produce a charts.PerformanceSummary chart and send it back as jpeg to the html page.  The html page will receive the image and replace the d3.js bar chart with the image.

Going forward I will only use R as the statistical engine and continue to rely on d3.js for the interactive reporting.  How far I go with this depends heavily on user response.  Please let me know if you would like me to continue down this path.

The list of acknowlegements is starting to get long.  I really appreciate all the fine work done by Mike Bostock on d3.js https://github.com/mbostock/d3/wiki, the dedicated authors of the R package PerformanceAnalytics http://cran.r-project.org/web/packages/PerformanceAnalytics/index.html, Brian the author of http://illposed.net/websockets.html and the example, the author of RJSONIO http://cran.r-project.org/web/packages/RJSONIO/index.html, and Bruce McPherson at http://excelramblings.blogspot.com/ for the inspirational idea.

To work through on your own, you will need the Excel file cdataset.xlsm, the Axys report perhstsp.rep, and the R code from GIST.