Yield Curve Animation with a d3.js brush as slider by timelyportfolio

Forked from Mike Bostock’s brush as slider example, I use the brush/slider to drive an interactive exploration of the US Yield Curve. I think this is a much more helpful way of showing the data than the animated GIF from Treasury yield curve from the Volcker era through Greenspan, Bernanke, and Yellen.

Original Readme.md

By customizing the display of D3's [brush component](https://github.com/mbostock/d3/wiki/SVG-Controls), you can make a single-handle slider. Or, by using [custom resize handles](/mbostock/4349545), you can make a two-handled slider.

code.R

#install.packages("YieldCurve")

library(YieldCurve)
data(FedYieldCurve)

# copied and paste this into the index.html as json data
jsonlite::toJSON(data.frame(date=index(FedYieldCurve),FedYieldCurve))

#see post http://isomorphism.es/post/101890975168/treasury-yield-curve-from-the-volcker-era-through
maturities <- c(3/12,6/12,1,2,3,5,7,10)
howmany=NROW(FedYieldCurve)
require(animation)
saveGIF({
  for (i in 1:howmany) {
    plot(maturities, FedYieldCurve[i,], type="o",lwd=3, col="#333333", xlab="Maturities structure in years", ylab="Interest rates values",ylim=c(0,15) )
    title(main=paste("Federal Reserve yield curve observed at", time(FedYieldCurve[i])))
    grid()
  }
},interval=.05,movie.name="yield curve evolution.gif", ani.width=300,ani.height=300)