Wiki Chart Gallery

[reinholdsson]

It would be nice to add a gallery to the wiki section, similar to the D3 gallery. Users may then easily publish code examples to RPubs, which could be added to the gallery.

I have put up a prototype, see: https://github.com/reinholdsson/rCharts/wiki/Gallery.

What do you think? Would also be nice if there are a more automatized way of creating the thumbnails, other than using print screen.

[ramnathv]

It looks really cool. I agree that an automated way to create the thumbnails would be great. I have some ideas on how to do that and will keep you posted.

I see that you have managed to integrate HighCharts into rCharts. You can send me a pull request once you are comfortable. Can you also add yourself as an author in the DESCRIPTION file?

I created a Shiny app replicating an NY Times graphic. You can see it here http://glimmer.rstudio.com/ramnathv/strikeouts/. I think a chart like that should be easy to create with HighCharts too. If you can take a crack, that would be awesome. I want to position rCharts as a truly single interface, multiple JS library package.

[ramnathv]

There are two issues to deal with here. The first, is to automate the process by which a user can publish an rCharts generated plot. The second, is a mechanism by which it can be added to a Gallery.

Let me talk about the second issue first. The way I see it, there are many ways of doing this.

1. Let users edit the Wiki on github (simple, but error prone I think)
2. Use a Google Spreadsheet to allow users to add to the Gallery. Check this site out, which creates a stunning gallery populated from a Google Spreadsheet. The source code is on Github, and should be fairly easy to adapt. We might have to check on licensing though.

For the first issue, once again there are multiple ways for users to publish.

1. rPubs using the built in rPubsUpload function. I am planning to add a publish method to the parent rCharts class that will take the generated html and upload it to rPubs using rPubsUpload in one shot. I like rPubs, but sharing multiple files is an issue (say the source code).
2. gist. I have a set of functions that can automate gist uploads (anonymous gists, authorized gists is harder). Once uploaded as a gist, we can use http://bl.ocks.org to view the chart. I like bl.ocks for the simple reason that it showcases the visualization nicely.

I would appreciate your thoughts on this.

PS. As for automating screenshots, it seems much harder than I thought. Let me see if I can find a simple workable solution.

[ramnathv]

Another option I am exploring is to wrap together a workflow I have been using to create a Shiny App using rCharts accompanied by a guide explaining the idea. Here is an example.

The advantage is that the folder is standalone. The user can run the ShinyApp as well as regenerate the tutorial HTML by running slidify on index.Rmd.

This would be a neat way to contribute tutorials. Each tutorial could be a standalone git repository, and the rCharts website could point to it.

[ramnathv]

Here is a preview of what I am thinking for the example pages. I am using Slidify and the Bootstrap framework to create these pages. It is straightforward to wrap the workflow into a single function that takes an expression containing the R code generating an rChart plot, and transforming it into a gallery page.

For the main gallery page, I am thinking of adapting the page here which makes clever use of jquery-isotope allowing users to filter examples by tags. We can tag charts by library, type and several other dimensions, which makes it easy to search through examples. Ultimately, the input for the gallery page and the example page can come from a gist or a google spreadsheet and can be automatically updated.

Let me know what you think.

[reinholdsson]

Regarding the first issue, I really like your idea of having a publish method for RPubs or Gists. Using RPubs it would be nice to automatically generate a markdown with the chart code and output.

bl.ocks and gistview are both nice and simple. Since it is a bit unnecessary to show the code of index.html I would prefer latter.

Regarding the wiki, another way of collecting examples could be to automatically search for either RPubs/Gists published by users. The publish method could add some tag (e.g. rCharts::rNVD3) to make it easy to find. Adding an argument, e.g. public = T, would let the user choose whether it should be searchable.

Update: I will take some time this weekend to push the highcharts implementation to rCharts and recreate the strikeouts app. Either today or tomorrow :)

[ramnathv]

Thanks. I forked gistview so that we can customize it for rCharts. The idea is to look for more than just index.html. Since a gist can contain multiple files, I was thinking, we can specify a structure.

index.html        html containing the chart
README.md   a readme file with some explanation
code.R            containing the source code
data.csv          conatains any data used

This will allow a fully reproducible chart. Moroever, we can also code up a runGist kind of function, which will automatically download a gist and run the code.

I like your idea of automatically searching through RPubs/gists. Any ideas on how to add tags that make it easily searchable?

[reinholdsson]

Nice!

Perhaps like as twitter, using #-tags in the description could be an idea; e.g. "Generated by #rCharts using the #polychart class". Then we could search for all gists with "#rCharts" and add the rest of the tags as categories in the gallery. See also https://www.mygists.info/.

[ramnathv]

I added a publish method. See here. It uses RCurl to post the html file created as a gist and uses http://bl.ocks.org to view the chart.

In the future, I would like to use gistview (which is open source) and tweak the source so that the R code used to create the visualization can be included along with any data or README. We could use bootstrap for an attractive page format. I also like the approach taken by datawrapper, which displays the chart as a full page spread with a title, footer and link to data. We could add a link to the source code as well.

Try it out and let me know what you think.

[ramnathv]

Here is how the datawrapper charts look. Apart from the chart, it has a title, a short subtitle (or introduction), and a footer with a marketing message, data source and link to data. I like the format, and the only thing I would add to it is a link to the source code.

Over time, we could build templates for published charts, which would expand the possibilities. For example, a README.md could appear in the sidebar giving some context to the story. Again using bootstrap would give us a lot of theming possibilities at little cost.

[ramnathv]

Here is another candidate for a gist viewer. The code looks a lot cleaner and might be easier to adapt. Just to summarize the options:

1. http://bl.ocks.org nice chart view, but shows index.html which is not needed.
2. http://gistview.github.io shows chart, but code looks clunky to customize (esp dep. outside of repo)
3. http://pagist.github.io nice centered chart view, clean code, easy to customize

[timelyportfolio]

http://www.scoop.it/t/backpack-filmmaker is a nice layout also

[timelyportfolio]

not that we need any more ideas but I just remembered http://builtbybalance.com/Tabletop/ and http://jllord.github.io/sheetsee.js/ with a nice example http://jlord.us/dashboard/. The code in d3visualization probably is easy enough, but if we want more from the Google Spreadsheet, tabletop might be a good option.

[ramnathv]

Yes. I was looking at Tabletop too, looks pretty slick.

[ramnathv]

Just created a prototype gallery here https://ramnathv.github.io/rChartsGallery/. The issues page should give you an idea of what I am thinking. Feel free to provide feedback/thoughts/ideas etc.