dimplejs and rCharts Tutorial with US Treasury Yield Data
Even this early in it release, dimplejs is such a powerful and promising d3 library that we decided to quickly make it available in rCharts. The first test was to recreate all (48) of the examples provided by dimplejs with rCharts. Once we completed those, we felt fairly satisfied that we had good coverage of the dimplejs API (easily one of the best documented). We are aware of a couple missing items, but I really wanted to throw some real financial time series at it to see how well it might work in my real life as a portfolio manager. If you are not familiar with rCharts, you might want to see this Quickstart.
Since bonds are a hot topic now, I thought some US Treasury Yield data from the St. Louis Federal Reserve (FRED) would make a nice subject. I will start very basic and build up to a still simple but slightly more complicated plot. As always, we first need data so we grab the data with quantmod getSymbols() and then merge it into one big ust.xts object.
require(quantmod)
require(rCharts)
#now get the US bonds from FRED
USbondssymbols <- paste0("DGS",c(1,2,3,5,7,10,20,30))
ust.xts <- xts()
for (i in 1:length( USbondssymbols ) ) {
ust.xts <- merge(
ust.xts,
getSymbols(
USbondssymbols[i], auto.assign = FALSE,src = "FRED"
)
)
}
Then we will define a little xtsMelt function to easily transform our wide xts data into long form.
xtsMelt <- function(data) {
require(reshape2)
#translate xts to time series to json with date and data
#for this behavior will be more generic than the original
#data will not be transformed, so template.rmd will be changed to reflect
#convert to data frame
data.df <- data.frame(cbind(format(index(data),"%Y-%m-%d"),coredata(data)))
colnames(data.df)[1] = "date"
data.melt <- melt(data.df,id.vars=1,stringsAsFactors=FALSE)
colnames(data.melt) <- c("date","indexname","value")
#remove periods from indexnames to prevent javascript confusion
#these . usually come from spaces in the colnames when melted
data.melt[,"indexname"] <- apply(matrix(data.melt[,"indexname"]),2,gsub,pattern="[.]",replacement="")
return(data.melt)
#return(df2json(na.omit(data.melt)))
}
Now let's use our new xtsMelt function on our data. You might notice that we use na.omit to remove the pesky NAs that sometimes haunt FRED data.
ust.melt <- na.omit( xtsMelt( ust.xts["2012::",] ) )
ust.melt$date <- format(as.Date(ust.melt$date))
ust.melt$value <- as.numeric(ust.melt$value)
ust.melt$indexname <- factor(
ust.melt$indexname, levels = colnames(ust.xts)
)
ust.melt$maturity <- as.numeric(
substr(
ust.melt$indexname, 4, length( ust.melt$indexname ) - 4
)
)
ust.melt$country <- rep( "US", nrow( ust.melt ))
Getting the data was fairly easy, now let's plot. I hope you see how easy it is to get an interactive dimplejs chart from R. Without my comments, the code would all fit nicely on one line. We can even use a r formula to define our x and y as shown value~date.
#simple line chart of 10 year
d1 <- dPlot(
value ~ date, #or x="date", y="value"
#dimplejs allows filtering but will lessen data to write
#if we subset in R
data = subset(ust.melt,maturity==10), #get all data for 10y maturity
type = 'line'
)
d1
Uh oh, our x axis does not look too pretty. However, rCharts is extensible and modular, so let's quickly jump to a little more advanced concept. Currently dimplejs does not support dates on the x axis as well as I would like. dimplejs is built on d3, so let's fix with a little help from the d3 master Mike Bostock. I built a custom layout template to remove the dimple x-axis and replace with a d3 version featuring much better date/time support. To access it, we can set it with a little hack (I have a little inside information that this will soon become much easier).
d2 <- d1
d2$field(
'templates',
modifyList(d2$templates, list(id = "chart2", script = 'http://timelyportfolio.github.io/rCharts_dimple/assets/chart_d3dateaxis.html') )
)
d2
Sorry for the little advanced topic. The author of dimplejs says better date handling is on his TO-DO list.
Most portfolio managers/analysts will want more than just the US 10y. Let's plot all the maturities with just one little groups addition in our dPlot. I also anticipate that we will need a legend to identify our maturities by color so we will also add a legend.
#simple line chart of all maturities
d3 <- dPlot(
value ~ date, #or x="date", y="value"
groups = 'maturity',
data = ust.melt, #get all maturities so remove subset from above
type = 'line'
)
d3$legend( x = 60, y = 10, width = 620, height = 20,
horizontalAlign = "right")
d3$field(
'templates',
modifyList(d3$templates, list(id = "chart3", script = 'http://timelyportfolio.github.io/rCharts_dimple/assets/chart_d3dateaxis.html') )
)
d3
I am still really proud of my chart displayed in this post. I bet we can do something like that but better since we will have interactivity. Will it be hard? Of course not, we just change our x in dPlot() and then sort with d4$xAxis(grouporderRule="date").
#simple line chart of all maturities
d4 <- dPlot(
x = c("maturity","date"),
y = "value",
groups = 'maturity',
data = ust.melt,
type = 'line'
)
d4$xAxis( grouporderRule = "date" ) #sort by date
d4$legend( x = 60, y = 10, width = 620, height = 20,
horizontalAlign = "right")
d4
Another way to look at yields would be as a yield curve. Generally, this means remove time, but with dimplejs storyboard feature we can see the history of the yield curve. Daily would be a little tedious, so let's do monthly 2013. Watch closely.
#get weekly since April 2013
ust.melt <- xtsMelt(ust.xts[endpoints(ust.xts,"months"),]["2013::",])
ust.melt$date <- format(as.Date(ust.melt$date),"%m/%d/%Y")
ust.melt$value <- as.numeric(ust.melt$value)
ust.melt$indexname <- factor(
ust.melt$indexname, levels = colnames(ust.xts)
)
ust.melt$maturity <- as.numeric(
substr(
ust.melt$indexname, 4, length( ust.melt$indexname ) - 4
)
)
ust.melt$country <- rep( "US", nrow( ust.melt ))
d5 <- dPlot(
value ~ maturity,
data = ust.melt,
type = "line"
)
d5$xAxis( orderRule ="maturity" )
d5$set( storyboard = "date" )
d5
Telling a story with your data has never been so easy. Add a little text content describing the change and next you will be presenting at Eyeo.
Just to make sure we cover some of the other plot types, let's draw our other two dimplejs options--area, bar, and bubble.
d6 <- dPlot(
x = "date",
y = "value",
groups = "indexname",
data = ust.melt,
type = "area"
)
d6$xAxis( orderRule = "date" )
d6
And although a stacked 100% bar does not make a lot of sense with this data, here is how we might do that by changing type = "bar" and d7$yAxis( type = "addPctAxis" ).
d7 <- dPlot(
x = "date",
y = "value",
groups = "indexname",
data = ust.melt,
type = "bar"
)
d7$xAxis( orderRule = "date" )
d7$yAxis( type = "addPctAxis" )
d7
Bubble also might not be the best way to plot yields, but here is an example.
d8 <- dPlot(
x = c("indexname","date"),
y = "value",
z = "value",
groups = "indexname",
data = ust.melt,
type = "bubble"
)
d8$xAxis( grouporderRule = "date", orderRule = "maturity" )
d8$zAxis( type = "addMeasureAxis", overrideMax = 10 )
d8
The beauty of rCharts is its ability to harness the ingenuity from the entire ecosystem inside and outside of r. Whole libraries, such as dimplejs, nvd3, rickshaw, highcharts, morris, and polycharts, or even specific custom visualizations can quickly be incorporated into your workflow and publishing. If desired, these can be delivered in various reproducible formats with slidify. I strongly encourage you to check out rCharts, slidify, and dimplejs. They have changed my world.
dimplejs[http://dimplejs.org] and his seemingly infinite supply of helpful and inspirational examples.