<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="https://www.r-bloggers.com/slickr/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://r-posts.com/slickr/"> R-posts.com</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>We are happy to bring the <a target="_blank" rel="nofollow" href="http://kenwheeler.github.io/slick/">slick</a> JavaScript library to R. It is self-described as “the last carousel you’ll ever need”. This carousel is based on putting the elements of the carousel in a <a target="_blank" rel="nofollow" href="https://www.w3schools.com/tags/tag_div.asp">div</a> HTML tag. This makes the carousel very versatile in what can be placed inside. Regular objects that are placed in a carousel can be for example: images, plots, tables, gifs, videos, iframes and even htmlwidgets.</p>
<div><img src="https://i2.wp.com/raw.githubusercontent.com/yonicd/slickR/master/Miscellaneous/Multimedia/gif/slickRnestingWidgets.gif?w=660&ssl=1" data-recalc-dims="1"></div>
<p> </p>
<p>This tool helps review multiple outputs in an efficient manner and saves much needed space in documents and Shiny applications, while creating a user friendly experience.</p>
<p>These carousels can be used directly from the R console, from RStudio, in Shiny apps and R Markdown documents.</p>
<div>
<h1>Installation</h1>
<p><a target="_blank" rel="nofollow" href="https://cran.r-project.org/web/packages/slickR/index.html">CRAN</a></p>
<pre><code>install.packages('slickR')</code></pre>
<p><a target="_blank" rel="nofollow" href="https://github.com/metrumresearchgroup/slickR">Github</a> (dev)</p>
<pre><code>devtools::install_github('metrumresearchgroup/slickR')</code></pre>
</div>
<div>
<h1>Examples</h1>
<p>There are many options within the slick carousel, to get started with the basics we will show a few examples in the rest of the post. If you want to try out any of the examples you can go to this <a target="_blank" rel="nofollow" href="http://r-posts.com/slickr/metrumresearchgroup.github.io/slickR">site</a> where they are rendered and can be tested out.</p>
<pre><code>
library(svglite)
library(lattice)
library(ggplot2)
library(rvest) 
library(reshape2)
library(dplyr)
library(htmlwidgets)
library(slickR)
</code></pre>
</div>
<div>
<h1>Images</h1>
<p>Some web scraping for the images example….</p>
<pre><code>#NBA Team Logos
nbaTeams=c(&quot;ATL&quot;,&quot;BOS&quot;,&quot;BKN&quot;,&quot;CHA&quot;,&quot;CHI&quot;,&quot;CLE&quot;,&quot;DAL&quot;,&quot;DEN&quot;,&quot;DET&quot;,&quot;GSW&quot;,
    &quot;HOU&quot;,&quot;IND&quot;,&quot;LAC&quot;,&quot;LAL&quot;,&quot;MEM&quot;,&quot;MIA&quot;,&quot;MIL&quot;,&quot;MIN&quot;,&quot;NOP&quot;,&quot;NYK&quot;,
    &quot;OKC&quot;,&quot;ORL&quot;,&quot;PHI&quot;,&quot;PHX&quot;,&quot;POR&quot;,&quot;SAC&quot;,&quot;SAS&quot;,&quot;TOR&quot;,&quot;UTA&quot;,&quot;WAS&quot;)
teamImg=sprintf(&quot;https://i.cdn.turner.com/nba/nba/.element/img/4.0/global/logos/512x512/bg.white/svg/%s.svg&quot;,nbaTeams)

#Player Images
a1=read_html('http://www.espn.com/nba/depth')%>%html_nodes(css = '#my-teams-table a')
a2=a1%>%html_attr('href')
a3=a1%>%html_text()
team_table=read_html('http://www.espn.com/nba/depth')%>%html_table()
team_table=team_table[[1]][-c(1,2),]
playerTable=team_table%>%melt(,id='X1')%>%arrange(X1,variable)
playerName=a2[grepl('[0-9]',a2)]
playerId=do.call('rbind',lapply(strsplit(playerName,'[/]'),function(x) x[c(8,9)]))
playerId=playerId[playerId[,1]!='phi',]
playerTable$img=sprintf('http://a.espncdn.com/combiner/i?img=/i/headshots/nba/players/full/%s.png&amp;w=350&amp;h=254',playerId[,1])</code></pre>
<div>
<h2>Simple carousel</h2>
<p>Let’s start easy: show the team logos one at a time with dots underneath</p>
<pre><code>slickR(obj = teamImg,slideId = 'ex1',height = 100,width='100%')</code></pre>
<div><img src="https://i0.wp.com/raw.githubusercontent.com/yonicd/slickR/master/Miscellaneous/blogPost/ex1.gif?w=660&ssl=1" data-recalc-dims="1"></div>
</div>
<div>
<h2>Grouped Images</h2>
<p>There are players on each team, so lets group the starting five together and have each dot correspond with a team:</p>
<pre><code>slickR(
  obj = playerTable$img,
  slideId = c('ex2'),
  slickOpts = list(
    initialSlide = 0,
    slidesToShow = 5,
    slidesToScroll = 5,
    focusOnSelect = T,
    dots = T
  ),
  height = 100,width='100%'
)</code></pre>
<div><img src="https://i1.wp.com/raw.githubusercontent.com/yonicd/slickR/master/Miscellaneous/blogPost/ex2.gif?w=660&ssl=1" data-recalc-dims="1"></div>
</div>
<div>
<h2>Replacing the dots</h2>
<p>Sometimes the dots won’t be informative enough so we can switch them with an HTML object, such as text or other images.<br>
We can pass to the customPaging argument javascript code using the <code>htmlwidgets::JS</code> function.</p>
<div>
<h3>Replace dots with text</h3>
<pre><code>cP1=JS(&quot;function(slick,index) {return '&lt;a>'+(index+1)+'&lt;/a>';}&quot;)

slickR(
  obj = playerTable$img,
  slideId = 'ex3',
  dotObj = teamImg,
  slickOpts = list(
    initialSlide = 0,
    slidesToShow = 5,
    slidesToScroll = 5,
    focusOnSelect = T,
    dots = T,
    customPaging = cP1
  ),
  height=100,width='100%'
)</code></pre>
<div><img src="https://i2.wp.com/raw.githubusercontent.com/yonicd/slickR/master/Miscellaneous/blogPost/ex3.gif?w=660&ssl=1" data-recalc-dims="1"></div>
</div>
</div>
<div>
<h3>Replace dots with Images</h3>
<pre><code>cP2=JS(&quot;function(slick,index) {return '&lt;a>&lt;img src= ' + dotObj[index] + '  width=100% height=100%>&lt;/a>';}&quot;)


#Replace dots with Images
s1 &lt;- slickR(
  obj = playerTable$img,
  dotObj = teamImg,
  slickOpts = list(
    initialSlide = 0,
    slidesToShow = 5,
    slidesToScroll = 5,
    focusOnSelect = T,
    dots = T,
    customPaging = cP2
  ),height = 100,width='100%'
)

#Putting it all together in one slickR call
s2 &lt;- htmltools::tags$script(
  sprintf(&quot;var dotObj = %s&quot;, 
          jsonlite::toJSON(teamImg))
)

htmltools::browsable(htmltools::tagList(s2, s1))</code></pre>
<div><img src="https://i1.wp.com/raw.githubusercontent.com/yonicd/slickR/master/Miscellaneous/blogPost/ex7.gif?w=660&ssl=1" data-recalc-dims="1"></div>
</div>
</div>
<div>
<h1>Plots</h1>
<p>To place plots directly into slickR we use svglite to convert a plot into svg code using xmlSVG and then convert it into a character object</p>
<pre><code>plotsToSVG=list(
  #Standard Plot
    xmlSVG({plot(1:10)},standalone=TRUE),
  #lattice xyplot
    xmlSVG({print(xyplot(x~x,data.frame(x=1:10),type=&quot;l&quot;))},standalone=TRUE),
  #ggplot
    xmlSVG({show(ggplot(iris,aes(x=Sepal.Length,y=Sepal.Width,colour=Species))+
                   geom_point())},standalone=TRUE), 
  #lattice dotplot
    xmlSVG({print(dotplot(variety ~ yield | site , data = barley, groups = year,
                          key = simpleKey(levels(barley$year), space = &quot;right&quot;),
                          xlab = &quot;Barley Yield (bushels/acre) &quot;,
                          aspect=0.5, layout = c(1,6), ylab=NULL))
            },standalone=TRUE) 
)

#make the plot self contained SVG to pass into slickR 
s.in=sapply(plotsToSVG,function(sv){paste0(&quot;data:image/svg+xml;utf8,&quot;,as.character(sv))})</code></pre>
<pre><code>slickR(s.in,slideId = 'ex4',slickOpts = list(dots=T), height = 200,width = '100%')</code></pre>
<div><img src="https://i2.wp.com/raw.githubusercontent.com/yonicd/slickR/master/Miscellaneous/blogPost/ex4.gif?w=660&ssl=1" data-recalc-dims="1"></div>
<div>
<h2>Synching Carousels</h2>
<p>There are instances when you have many outputs at once and do not want to go through all, so you can combine two carousels one for viewing and one for searching.</p>
<pre><code>slickR(rep(s.in,each=5),slideId = c('ex5up','ex5down'),
       slideIdx = list(1:20,1:20),
       synchSlides = c('ex5up','ex5down'),
       slideType = rep('img',4),
       slickOpts = list(list(slidesToShow=1,slidesToScroll=1),
                        list(dots=F,slidesToScroll=1,slidesToShow=5,
                             centerMode=T,focusOnSelect=T)
                        ),
       height=100,width = '100%'
       )</code></pre>
<div><img src="https://i2.wp.com/raw.githubusercontent.com/yonicd/slickR/master/Miscellaneous/blogPost/ex5.gif?w=660&ssl=1" data-recalc-dims="1"></div>
</div>
</div>
<div>
<h1>Iframes</h1>
<p>Since the carousel can accept any html element we can place iframes in the carousel.<br>
There are times when you may want to put in different DOMs rather than an image in slick. Using slideType you can specify which DOM is used in the slides.<br>
For example let’s put the help Rd files from ggplot2 into a slider using the helper function getHelp. (Dont forget to open the output to a browser to view the iframe contents).</p>
<pre><code>geom_filenames=ls(&quot;package:ggplot2&quot;,pattern = '^geom')

slickR(unlist(lapply(geom_filenames,getHelp,pkg = 'ggplot2')),slideId = 'ex6',slideType = 'iframe',height = '400px',width='100%',slickOpts = list(dots=T,slidesToShow=2,slidesToScroll=2))</code></pre>
<div><img src="https://i2.wp.com/raw.githubusercontent.com/yonicd/slickR/master/Miscellaneous/blogPost/ex6.gif?w=660&ssl=1" data-recalc-dims="1"></div>
<div>
<h2>htmlwidgets</h2>
<p>Finally, we can really leverage R and place self contained htmlwidgets in iframes (like leaflets and plotly) and use them in a carousel. This solves a problem of how to run many htmlwidgets at once outside of Shiny.</p>
<pre><code>library(leaflet)
library(plotly)

l &lt;- leaflet() %>% addTiles()
htmlwidgets::saveWidget(l,'leaflet.html')

p &lt;- iris%>%ggplot(aes(x=Sepal.Length,y=Sepal.Width))+geom_point()
pL= ggplotly(p)
htmlwidgets::saveWidget(pL,'ggplotly.html')

slickR(c(rep(paste0(readLines('leaflet.html'),collapse='\n'),4),
         rep(paste0(readLines('ggplotly.html'),collapse='\n'),4)),
       slideId = c('leaf','plot'),
       slideIdx = list(1:4,5:8),
       slideType = rep('iframe',2),
       slickOpts = list(list(dots=T,slidesToShow=2,slidesToScroll=2),
                        list(dots=T,slidesToShow=2,slidesToScroll=2)),
       height='200px',width='100%')</code></pre>
<div><img src="https://i2.wp.com/raw.githubusercontent.com/yonicd/slickR/master/Miscellaneous/Multimedia/gif/slickRnestingWidgets.gif?w=660&ssl=1" data-recalc-dims="1"></div>
</div>
</div>
<hr>
<p><em> Jonathan Sidi joined Metrum Research Group in 2016 after working for several years on problems in applied statistics, financial stress testing and economic forecasting in both industrial and academic settings. To learn more about additional open-source software packages developed by Metrum Research Group please visit the Metrum <a target="_blank" rel="nofollow" href="http://metrumrg.com/opensourcetools.html">website</a>. Contact: For questions and comments, feel free to email me at: yonis@metrumrg.com or open an issue for bug fixes or enhancements at <a target="_blank" rel="nofollow" href="https://github.com/metrumresearchgroup/ggedit/issues">github</a>. </em></p>
<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="http://r-posts.com/slickr/"> R-posts.com</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a title="The R Project for Statistical Computing" rel="nofollow" href="https://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="https://www.r-bloggers.com/search/data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="https://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="https://www.r-bloggers.com/search/map">maps</a>, <a title="Animation in R" rel="nofollow" href="https://www.r-bloggers.com/search/animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="https://www.r-bloggers.com/search/sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="https://www.r-bloggers.com/search/SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="https://www.r-bloggers.com/search/git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="https://www.r-bloggers.com/search/hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="https://www.r-bloggers.com/search/PCA">PCA</a>, <a title="Time series" rel="nofollow" href="https://www.r-bloggers.com/search/time+series">time series</a>, <a title="finance trading" rel="nofollow" href="https://www.r-bloggers.com/search/trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/5J48ivsaOJE"></a></div>