Wednesday, July 10, 2013

rCharts version of d3 horizon

I love horizon plots.  My love shows up throughout my blog, and I have plotted horizon charts in base graphics, xtsExtra, lattice, and ggplot2.  Now with rCharts, we can implement Jason Davies d3.js horizon chart plugin to plot R data in html/javascript.  I put together a tutorial going into great detail on rCharts and convertin custom charts.  For the tutorial, go here, or click on the screenshot below.

image

26 comments:

  1. This looks great. I'm actually getting stymied early on in attempting to replicate your work

    require(rCharts)
    rChart <- rCharts$new()
    rChart

    Error in file(con, "r") : cannot open the connection

    In addition: Warning message:

    In file(con, "r") :

    cannot open file '/config.yml': No such file or directory

    Any idea why? I have justupdated rCharts and am having no probs running apps with code like

    rChart <- rCharts::Highcharts$new()

    ReplyDelete
  2. Should be able to just ignore and move on through; at the very end we define config.yml that will solve this error. Let me know if you have any other troubles.

    ReplyDelete
  3. Thanks for swift response. I'm obviously missing a step or two


    I have created ../rCharts/libraries/widgets/d3_horizon/layouts/d3_horizon.html the same as yours on github

    and a config.yml file using your code at the end and placing in the d3_horizon folder

    the code to create chart is

    require(rCharts)
    rChart <- rCharts$new()
    rChart$setLib('libraries/widgets/d3_horizon')
    rChart$setTemplate(script = "libraries/widgets/d3_horizon/layouts/d3_horizon.html")
    ### create SP500.df
    rChart$set(data = SP500.df)
    rChart$set(x = "date", y = "SP500")
    rChart

    ReplyDelete
  4. whoops, I forgot to say set your working directory to the directory that contains /libraries/... through setwd() or the menu in Rstudio.

    let me know if that does not fix it.

    ReplyDelete
  5. The comments seem to have got out of order?

    Anyways I set the working directory to C:/mypath/R/win-library/3.0/rCharts/. I think
    you mentioned the location did not matter. A browser window appears but is blank. However, in viewsource there is code inc the data - too long to paste so put here

    https://gist.github.com/pssguy/5979684

    ReplyDelete
  6. ok, the code looks about as expected. Here is my gist http://rcharts.io/viewer/?5980383#.Ud9KUEHVCSp and code https://gist.github.com/timelyportfolio/5980383. Here is my code run directly if it helps. If you have Chrome, hit F12 and look in the bottom right to see what errors might be happening.

    setwd("C:/Dropbox/development/r/rCharts_d3_horizon")

    require(rCharts)

    rChart <- rCharts$new()

    rChart$setLib('libraries/widgets/d3_horizon')

    rChart$setTemplate(script = "libraries/widgets/d3_horizon/layouts/d3_horizon.html")

    rChart$set(

    bands = 3,

    mode = "mirror",

    interpolate = "basis",

    width = 700,

    height = 300

    )

    require(quantmod)

    #get sp500 prices and convert them to monthly

    SP500 <- to.monthly(

    getSymbols("^GSPC", from = "1990-01-01", auto.assign = FALSE)

    )

    #get 12 month rolling return

    SP500.ret <- na.omit(ROC(SP500[,4], type = "discrete", n = 12))

    SP500.df <- cbind(

    as.numeric(as.POSIXct(as.Date(index(SP500.ret)))),

    coredata(SP500.ret)

    )

    colnames(SP500.df) <- c("date","SP500")

    #supply the data to our dataless but no longer naked rChart

    rChart$set(data = SP500.df)

    rChart$set(x = "date", y = "SP500")

    rChart

    ReplyDelete
  7. I should have checked for errors. It is failing to load the js files i.e.

    file:///C:/Users/Andy/Documents/R/win-library/3.0/rCharts/libraries/widgets/d3_horizon/js/d3.v3.js

    file:///C:/Users/Andy/Documents/R/win-library/3.0/rCharts/libraries/widgets/d3_horizon/js/horizon.js

    Guess I did something wrong, but I located these files elsewehere on my system and copied them to

    these addresses.

    Running again I then get the error

    Uncaught TypeError: Object # has no method 'map' horizon.js:29

    ReplyDelete
  8. ok, think we are getting close. If you set a breakpoint in the browser at line 138


    svg.data(data).call(chart)



    what is the structure of data? If you have an rChart, you can say rChart$publish() and that will push to a gist.

    ReplyDelete
  9. Sorry you have lost me. line 138 of what?

    ReplyDelete
  10. Also should I not be referencing the js files like you do'http://d3js.org/d3.v3.min.js'
    as per the d3_horizon\config.yml file ?

    ReplyDelete
  11. sorry line 1138 (not 138) of the html file produced

    as long as d3.js and horizon.js are loading, does not matter which are referenced

    ReplyDelete
  12. Hi, I think I have found the error I was making


    I had

    svg.data(params.data).call(chart)
    rather than

    svg.data(data).call(chart)
    in the d3_horizon.htl file

    So I have now managed to construct a simple plot similar to yours
    I have a data.frame with 3 fields: country, date and relative unemployment (which can b e +ve or -ve)
    For one country I can take the date and unemployment columns, transpose them to matrix and create the chart

    However, to be of much value as a horizon plot I want to be comparing in one chart all countries over time, showing the country and time on y and x axes respectively . How would I go about doing this?


    TIA

    ReplyDelete
  13. So something like but in d3 http://timelyportfolio.blogspot.com/2012/08/horizon-on-ggplot2.html?m=1

    ReplyDelete
  14. Exactly. You have done some great work on this type of chart. I am just dipping my toe into rCharts and have basically used the Highcharts library to date so d3 is new to me

    ReplyDelete
  15. Can handle in R with slidify or in js. Think js route will be more scalable.

    ReplyDelete
  16. Will try to show something tomorrow or Monday. Did you see

    ReplyDelete
  17. Just checking it out now. Looks like a lot of code for a few numbers!

    ReplyDelete
  18. Did you have the chance to look at this (I see you have been v busy on other things!)
    Like you, I think horizon plots are a great visualization method for comparisons and once I have a template up should be able to use in several areas
    cheers

    ReplyDelete
  19. here is a quick and dirty example. issues with it are padding is not provided as a parameter and scales are different for each.

    http://rcharts.io/viewer/?6106779

    ReplyDelete
  20. Hi. I am a newbie and appreciate all the information. was wondering if you all can help. I have this line in Rstudio "libraries/widgets/d3_sankey/layouts/chart.html " but I have not loaded d3_sankey widget. how can I get the sankey plug-in or pacakge and how do I to load into Rstudio ? please help

    ReplyDelete
  21. Glad you are trying this out. If you install the newest 'dev' branch or rCharts, this step is much easier.

    require(devtools)

    install_github( 'rCharts','ramnathv',ref='dev' )

    Now the line can simple read as follows:

    for sankey
    --------------------------------------------------
    sankeyPlot <- rCharts$new()
    sankeyPlot$setLib('http://timelyportfolio.github.io/rCharts_d3_sankey')

    for horizon
    ----------------------------------------------------
    rChart <- rCharts$new()
    rChart$setLib('http://timelyportfolio.github.io/rCharts_d3_horizon/libraries/widgets/d3_horizon')

    ReplyDelete
  22. Thanks a bunch. That helped.. and I ran line by line and got an error at the last line. I think its something to do with things not being in the right directly, but cant figure it out. the code and error is below.

    require(igraph)
    require(rCharts)
    g <- graph.tree(40, children = 4)
    E(g)$weight = 1
    edgelist <- get.data.frame(g) #this will give us a data frame with from,to,weight
    colnames(edgelist) <- c("source","target","value")
    #make character rather than numeric for proper functioning
    edgelist$source <- as.character(edgelist$source)
    edgelist$target <- as.character(edgelist$target)
    sankeyPlot <- rCharts$new()
    sankeyPlot$setLib('http://timelyportfolio.github.io/rCharts_d3_sankey')
    sankeyPlot$set( data = edgelist,nodeWidth = 15,nodePadding = 10,layout = 32,width = 960,height = 500)
    sankeyPlot
    Error in file(con, "r") : cannot open the connection
    In addition: Warning message:
    In file(con, "r") :
    cannot open file '/config.yml': No such file or directory

    ReplyDelete
  23. Thanks a bunch, tried it and I went all the way to teh end and then the last line gave me an error, which I think has to do with the things not being in teh right place - but cant figure it out. any help is greatly appreciated. below is the code and error
    >require(igraph)
    Loading required package: igraph
    > require(rCharts)
    Loading required package: rCharts
    > g <- graph.tree(40, children = 4)
    > E(g)$weight = 1
    > edgelist <- get.data.frame(g) #this will give us a data frame with from,to,weight
    > colnames(edgelist) <- c("source","target","value")
    > edgelist$source <- as.character(edgelist$source)
    > edgelist$target <- as.character(edgelist$target)
    > sankeyPlot <- rCharts$new()
    > sankeyPlot$setLib('http://timelyportfolio.github.io/rCharts_d3_sankey')
    > sankeyPlot$set( data = edgelist,nodeWidth = 15,nodePadding = 10,layout = 32,width = 960,height = 500)
    > sankeyPlot
    Error in file(con, "r") : cannot open the connection
    In addition: Warning message:
    In file(con, "r") :
    cannot open file '/config.yml': No such file or directory

    ReplyDelete
  24. I'm having the same issues at @ImAndy. Can't seem to fix and it won't run generate any plots while the error persists.

    ReplyDelete
  25. @lmAndy got it to work. Install the dev branch of rCharts and then try this http://rcharts.io/viewer/?6106779#.UhOn6JLVCSo. Let me know what it does.

    ReplyDelete