<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/jstree-htmlwidget/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://yonicd.netlify.com/post/jstree/"> Rstats on Reproducible Random Thoughts</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p><br>
<br>
<br>
</p>
<p>jsTree is a R package that is a standalone htmlwidget for the jsTree JavaScript library. It can be run from the R console directly into the Rstudio Viewer, be used in a Shiny application or be part of an Rmarkdown html output.</p>
<div>
<h2>Installation</h2>
<pre><code>#CRAN
install.packages('jsTree')

#Github
devtools::install_github('metrumresearchgroup/jsTree')</code></pre>
<p>The motivation for the package came from the <a rel="nofollow" href="https://github.com/trestletech/shinyTree" target="_blank">shinyTree</a> by Jeff Allen, which has an early version of the JavaScript library hardcoded into a Shiny application.</p>
<p>The input for the htmlwidget is a character vector and the heirarchy is set by the ‘/’, as to mimic the delimiter of a file path.</p>
<p>The main purpose of this package is vizualize folder hierarchy, much like in the <code>Files</code> tab in RStudio. But, instead of looking in local directories it will be used for remote repositories, such as github, bitbucket and svn repositories. This is implemented in the <a rel="nofollow" href="https://github.com/metrumresearchgroup/vcs" target="_blank">vcs</a> package and a future post will show utility that package gives.</p>
<p>To show the basic functionality of jsTree we will use a dataset that contains all superfund sites from the <a rel="nofollow" href="https://www.epa.gov/superfund/search-superfund-sites-where-you-live" target="_blank">EPA</a>. You can access the tibble <a rel="nofollow" href="https://github.com/yonicd/blog/blob/master/data/superfundsite.Rds" target="_blank">here</a>. The data</p>
<pre><code>library(htmlTable)
library(jsTree)
library(widgetframe)</code></pre>
<pre><code># Read in the data
superfundsite &lt;- readRDS('../../data/superfundsite.Rds')

htmlTable::htmlTable(head(superfundsite),rnames=FALSE)</code></pre>
<table>
<thead>
<tr>
<th>Region</th>
<th>State</th>
<th>City</th>
<th>County</th>
<th>Zip Code</th>
<th>Site Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Massachusetts</td>
<td>ACTON</td>
<td>MIDDLESEX</td>
<td>01720</td>
<td>W.R. GRACE &amp; CO., INC. (ACTON PLANT)</td>
</tr>
<tr>
<td>01</td>
<td>Massachusetts</td>
<td>AMESBURY</td>
<td>ESSEX</td>
<td>01913</td>
<td>MICROFAB INC (FORMER)</td>
</tr>
<tr>
<td>01</td>
<td>Massachusetts</td>
<td>ASHLAND</td>
<td>MIDDLESEX</td>
<td>01721</td>
<td>NYANZA CHEMICAL WASTE DUMP</td>
</tr>
<tr>
<td>01</td>
<td>Massachusetts</td>
<td>ATTLEBORO</td>
<td>BRISTOL</td>
<td>02703</td>
<td>WALTON &amp; LONSBURY INC.</td>
</tr>
<tr>
<td>01</td>
<td>Maine</td>
<td>AUGUSTA</td>
<td>KENNEBEC</td>
<td>04330</td>
<td>O’CONNOR CO.</td>
</tr>
<tr>
<td>01</td>
<td>Connecticut</td>
<td>BARKHAMSTED</td>
<td>LITCHFIELD</td>
<td>06063</td>
<td>BARKHAMSTED-NEW HARTFORD LANDFILL</td>
</tr>
</tbody>
</table>
</div>
<div>
<h2>Basic Usage</h2>
<pre><code># collapse columns to be delimited by '/'
myx &lt;- apply(superfundsite,1,function(x) paste(x,collapse = '/'))

# call jsTree
j0 &lt;- jsTree(obj = myx)

# place widget in iframe to use in blog post 
# (not needed in regular usage)
frameWidget(j0)</code></pre>
<div></div>
<p>
</div>
<div>
<h2>Initialize tree with checked boxes</h2>
<pre><code>nodestate1 &lt;- superfundsite$State=='California'

j1 &lt;- jsTree(myx,nodestate=nodestate1)

frameWidget(j1)</code></pre>
<div></div>
<p>
</div>
<div>
<h2>Tooltips</h2>
<pre><code># Use the zipcode as a tooltip on the county name

myx2 &lt;- apply(superfundsite[,-c(5)],1,paste,collapse='/')

zipcode_label &lt;- superfundsite$`Zip Code`
names(zipcode_label) &lt;- superfundsite$County

j2 &lt;- jsTree(myx2,tooltips = zipcode_label)

frameWidget(j2)</code></pre>
<div></div>
<p>
</div>
<div>
<h2>Shiny</h2>
<p>jsTree can be used in Shiny applications and supplies observers so the Shiny can react to the tree.</p>
<p><iframe src="https://tranquil-escarpment-51788.herokuapp.com/"><br>
</iframe></p>
<pre><code>ui &lt;- shiny::fluidPage(
  
  shiny::column(width=4,jsTree::jsTreeOutput('tree')),
  
  shiny::column(width=8,shiny::uiOutput('chosen'))
  
)

server &lt;- function(input, output,session) {
  
  network &lt;- shiny::reactiveValues()
  
  shiny::observeEvent(input$tree_update,{
    
    current_selection &lt;- input$tree_update$.current_tree
    if(!is.null(current_selection)) 
      network$tree &lt;- jsonlite::fromJSON(current_selection)
    
  })
  
  shiny::observeEvent(network$tree,{
    
    output$results &lt;- shiny::renderPrint({
      
      str.out &lt;- ''
      
      if(length(network$tree)>0)
        str.out=network$tree
      
      return(str.out)
    })    
  })
  
  output$chosen &lt;- shiny::renderUI({
    
    list(shiny::h3('Selected Items'),
         
    shiny::verbatimTextOutput(outputId = &quot;results&quot;))
    
  })
  
  output$tree &lt;- jsTree::renderJsTree({
    
    nested_string &lt;- myx
    
    jsTree(nested_string)
    
  })
  
}

shinyApp(ui, server)</code></pre>
</div>
	<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://yonicd.netlify.com/post/jstree/"> Rstats on Reproducible Random Thoughts</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 rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/yH4ErmZA4zY" height="1"></a></div>