block by timelyportfolio 5398614

use clickme in R and vega in javascript to produce a line chart of JGB rates

Full Screen

##Line Chart (from vega spec) of JGB Rates *source: http://www.mof.go.jp/english/jgbs/reference/interest_rate/

R with the clickme package will supply the jgb yield data from the Japanese Ministry of Finance to a line_facet.json vega spec. If you would like to recreate, just run the recreate.rmd supplied in this gist. You will have to specify the location of your clickme root path.

line_facet.json

{
  "width": {{ opts$params$width }},
  "height": {{ opts$params$height  }},
  "padding": {{ get_padding_param(opts) }},
  "data": [
    {
      "name": "table",
      "format": {"type":"json", "parse":{"date":"date","value":"number"}},
      "values": {{ get_data_as_json(opts) }}
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "time",
      "range": "width",
      "nice": "month",
      "domain": {"data": "table", "field": "data.date"}
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "domain": {"data": "table", "field": "data.value"}
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category20"
    }
  ],
  "axes": [
    {"type": "x", "scale": "x"},
    {"type": "y", "scale": "y"}
  ],
  "marks": [
    {
      "type": "group",
      "from": {
        "data": "table",
        "transform": [
          {"type": "facet", "keys": ["data.indexname"]}
        ]
      },
      "marks": [
        {
          "type": "line",
          "properties": {
            "enter": {
              "interpolate": {"value": "monotone"},
              "x": {"scale": "x", "field": "data.date"},
              "y": {"scale": "y", "field": "data.value"},
              "size": {"value": 50},
              "stroke": {"scale": "color", "field": "data.indexname"},
              "strokeWidth": {"value": 2}
            },
            "update": {
              "opacity": {"value": 1}
            },
            "hover": {
              "opacity": {"value": 0.5}
            }
          }
        }
      ]
    }    
  ]
}

recreate.rmd

```{r,message=FALSE,error=FALSE,warning=FALSE}

#plot with clickme and vega Japan yield data from the Ministry of Finance Japan
#data goes back to 1974

require(xtsExtra)
require(clickme)

url <- "http://www.mof.go.jp/english/jgbs/reference/interest_rate/"
filenames <- paste("jgbcme",c("","_2010","_2000-2009","_1990-1999","_1980-1989","_1974-1979"),".csv",sep="")

#load all data and combine into one jgb data.frame
jgb <- read.csv(paste(url,filenames[1],sep=""),stringsAsFactors=FALSE)
for (i in 2:length(filenames)) {
  jgb <- rbind(jgb,read.csv(paste(url,"/historical/",filenames[i],sep=""),stringsAsFactors=FALSE))
}

#now clean up the jgb data.frame to make a jgb xts
jgb.xts <- as.xts(data.matrix(jgb[,2:NCOL(jgb)]),order.by=as.Date(jgb[,1]))

#get Yen from the Fed
#getSymbols("DEXJPUS",src="FRED")

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)))
    
  }
  
  jgb.melt <- xtsMelt(jgb.xts["2012::",])


  set_root_path("path to clickme/inst/examples")

  clickme_vega(jgb.melt,"line_facet")
```