Multiple Lines gridSVG and d3

As another post in the series, I thought I would show an alternate way of using d3 to bind data from a gridSVG exported lattice plot. This time we will have multiple strips complicating our data bind. Also, I will use a different set of techniques to send the data from R to Javascript. I think I prefer how I have done it previous posts though. No sense in wasting time with the intro. Let's grab US Treasury Yield Curve data from the Federal Reserve Bank of St. Louis FRED.

FRED, Give Us Some Treasury Yield Data

We will get the daily yield series for US Treasuries with 1, 2, 3, 5, 7, 10, 20, and 30 year maturities.

d3 Reverse Data Bind

Even though I don't like it as much, here is my original solution to sending data from R to javascript. You will probably notice that it requires much more R and javascript code to tidy and bind. This will result in data that looks something like this.

The d3 reverse data bind portion of the javascript will look like this. We will loop through each of the keys (strips in lattice-speak) in the data. With each key, it will parse the points from the R/gridSVG line pointsToArray(d3.select(g[0][i]).select('polyline').attr("points")). We will add x,y,group, and strip to our new pointsdata array.

As usual, we can do lots of things with bound data. We'll build a little on R/gridSVG/d3 Line Reverse Data Bind by adding a similar mouseover, but this time for each of the lines. I also wanted to test if adding the yield curve would be helpful. Of course, this is a rough sketch and could be improved greatly by some simple styling. I'll leave that to you.