clickme and rCharts integration about rcharts

[nachocab]

I am indeed in the middle of PhD hell, but I'll get back to Clickme in a week :) @ramnathv I like what you're doing with rCharts. I think our approaches are complementary, so I'd love to make both packages inter-operable.

[ramnathv]

I see a lot of potential here as well. Clickme can benefit from some refactoring, since there is repeated code across the the templates, and across data translators. Given that d3.js uses a limited amount of data structures, it might make sense to just have a bunch of translators, and shift the innovation to the templates.

Effectively, it should be possible to just have a single Rmd file with YAML front matter representing the config and the javascript function in the body. The YAML front matter can take scripts and styles as a list of external asests.

Another way to go about this is to think of a clickme as a highly specialized library. Taking that route makes things simpler, since config.yml can map to the YAML configuration and layouts/chart.html can map to.

[ramnathv]

Here is forcedirected implemented in rCharts

require(RCurl)
dat = read.csv(text =   getURL('https://raw.github.com/nachocab/clickme/master/inst/examples/force_directed/data/original_data.csv'))
dat = toJSONArray(dat, json = F)

p1 <- rCharts$new()
p1$field('lib', 'forcedirected')
p1$set(x = 'source', y = 'target', type = 'type', data = dat)
p1

[ramnathv]

Some explanation is in order. Here is what I am doing

1. We initialize a new instance of the class rCharts
2. I set the lib field manually to forcedirected so that it will now look for everything in inst/forcedirected
3. I have to use x and y since rCharts needs them by default. But, you can map it to any name, as I have done in my code here. You can also use arbitrary field names, but x and y are a must. This is necessary to be able to take advantage of the formula interface as well.
4. Finally, we print the chart.

Note that I used toJSONArray to convert the data frame into a JSON Array, rather than a JSON object, which is what toJSON would do. This is similar to what df2json would do. I use json = F, because I want the R object. rCharts by default converts its payload to JSON, so that would be taken care of automatically.

[timelyportfolio]

Here is my simple example. Where clickme can be extremely helpful is combining multiple charts and also potentially adding the javascript interactive functions and components. Correct me if I am wrong but rCharts excels at creating a single chart. These can be combined in a ractive to create a powerful whole.

This example I think helps highlight some of the data duplication.

[ramnathv]

What you are doing can be achieved using Slidify and rCharts. I will post an example shortly.

UPDATE. Here you go http://ramnathv.github.io/rChartsPerfAnalytics/

[timelyportfolio]

very nice!

Some questions though as I still wrestle with the differences of rCharts and clickme.

What happens though when we want to loop through 40 managers and produce this for each with this as our content template? clickme allows us to simply do

clickme(get(paste0(manager,i)), ractivename)

Also what happens if we want to combine the charts into one group for interactivity, such as when we hover over an area in the cumul chart, we want a vertical line to appear on both charts representing the x location and trigger the appearance of a tooltip? clickme would allow us to provide the functionality in the template.Rmd.

[ramnathv]

I just added a Shiny app too. You can either try it by downloading the repo or use

runGitHub('rChartsPerfAnalytics', 'ramnathv', ref = 'gh-pages', subdir = 'app')

This should answer your question about multiple managers :)

[timelyportfolio]

now we are talking! sweet! @jfreels

[timelyportfolio]

did you manually or programatically produce?

[ramnathv]

I have an idea to programmatically produce it :-). For now, I just cut paste code.

Basically

1. global.R all data prep code
2. ui.R interface for manager selection + two outputs
3. server.R cut-paste code for the two charts, replacing 1 with input$manager.

I was thinking of writing up a shinify function that would create a shiny rCharts app, given a bunch of inputs. It should not be too difficult.

I tried your clickme version. I don't see any interactivity there. Am I missing something?

[ramnathv]

I have some ideas on clickme and rCharts integration. Essentially, I can reprogram rCharts such that a clickme type of folder can make use of the rCharts class. Once that happens, clickme users can benefit fully by all the supporting functions including publish.

However, for that to happen, design changes are required at both ends. If you see my forcedirected example, you will see what I am talking about. I am happy to talk through this with @nachocab and see where this leads. For starters, I will convert a few more clickmes into a structure that rCharts can take. We can iterate to arrive at a design that works for everyone (hopefully!)

[timelyportfolio]

so what did you copy for the forcedirected example? was it the ractive?

[nachocab]

I am totally willing to do this. I love the publishing feature. My goal is to make interactive plots as easy to use as static plots. I'm not married to any tool or library (not even my own). Give me a week until I pass my qualifying exam, so I have some free time and let's talk about it.

[ramnathv]

The structure of a library in rCharts (which is essential for it to seamlessly integrate as a widget in Slidify) is as shown below. config.yml provides metadata about scripts and styles (and other info). layouts contains a chart.html which is just a mustache template with javascript. The js and css folders are self explanatory.

lib
  config.yml
  layouts
    chart.html
  js
  css

In the case of the forcedirected ractive,

1. I replaced js and css with external (since it only matters for how they are referred to in config.yml).
2. I modified template.Rmd by stripping everything other than the js within script tags. rCharts only passes a single js object by default called chartParams. I captured it in the JS variable params and then modified the js function. My idea is not to have any placeholders in the JS function, and essentially use R to direct the payload. This will be clearer once I post more clickme examples formatted for rCharts.

You can see the final structure here.

Good luck with your qualifiers @nachocab. Let us talk once you are done with that. I know how qualifiers can hang over your head :) Meanwhile, I will post more examples of integrating ractives. We will need a few iterations, but I can totally see how they will work great.

[timelyportfolio]

forcedirected worked very nicely, and I hope to run many more experiments. On a side note, the publish feature worked great.

[timelyportfolio]

Now I believe I understand enough to play along. Let me know as soon as you have one or two more examples, so I can get right on it. Thanks.

[ramnathv]

@timelyportfolio @nachocab Another example: Parallel Coordinates

http://ramnathv.github.io/rChartsParCoords/

[ramnathv]

Here is a version published using the publish method

http://pagist.github.io/?5448776

[timelyportfolio]

alright I'm pretty dang convinced. Well done! I will do all the standalone polycharts, but what next? Still want me to focus on NVD3? I'm not the biggest fan of NVD3 but it does offer some of the best built-in interactivity.

[ramnathv]

I want to take a step back and revisit the design of rCharts to see what changes are needed to more flexibly accomodate clickme style charts. I also want to refactor, adhere to a consistent naming policy and follow a coding style.

I think you should try to do what excites you. Feel free to bounce ideas around.

[ramnathv]

rChartsExtra will house custom visualizations.

[nachocab]

Good to hear!

[ramnathv]

Thanks. rCharts was getting too dense to hold everything, so I decided to spin-off custom visualizations into an rChartsExtra. Nice zoomable scatterplot with clickme btw.

[nachocab]

Thanks, more are coming. Good luck presenting on the NYC R meetup.

[ramnathv]

Great. Look forward to seeing more! And thanks.