jsTree htmlwidget

Follow @metrumresearchgroup Star Issue
CRAN_Status_Badge downloads

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.

Installation

#CRAN
install.packages('jsTree')

#Github
devtools::install_github('metrumresearchgroup/jsTree')

The motivation for the package came from the shinyTree by Jeff Allen, which has an early version of the JavaScript library hardcoded into a Shiny application.

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.

The main purpose of this package is vizualize folder hierarchy, much like in the Files 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 vcs package and a future post will show utility that package gives.

To show the basic functionality of jsTree we will use a dataset that contains all superfund sites from the EPA. You can access the tibble here. The data

library(htmlTable)
library(jsTree)
library(widgetframe)
# Read in the data
superfundsite <- readRDS('../../data/superfundsite.Rds')

htmlTable::htmlTable(head(superfundsite),rnames=FALSE)
Region State City County Zip Code Site Name
01 Massachusetts ACTON MIDDLESEX 01720 W.R. GRACE & CO., INC. (ACTON PLANT)
01 Massachusetts AMESBURY ESSEX 01913 MICROFAB INC (FORMER)
01 Massachusetts ASHLAND MIDDLESEX 01721 NYANZA CHEMICAL WASTE DUMP
01 Massachusetts ATTLEBORO BRISTOL 02703 WALTON & LONSBURY INC.
01 Maine AUGUSTA KENNEBEC 04330 O’CONNOR CO.
01 Connecticut BARKHAMSTED LITCHFIELD 06063 BARKHAMSTED-NEW HARTFORD LANDFILL

Basic Usage

# collapse columns to be delimited by '/'
myx <- apply(superfundsite,1,function(x) paste(x,collapse = '/'))

# call jsTree
j0 <- jsTree(obj = myx)

# place widget in iframe to use in blog post 
# (not needed in regular usage)
frameWidget(j0)

Initialize tree with checked boxes

nodestate1 <- superfundsite$State=='California'

j1 <- jsTree(myx,nodestate=nodestate1)

frameWidget(j1)

Tooltips

# Use the zipcode as a tooltip on the county name

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

zipcode_label <- superfundsite$`Zip Code`
names(zipcode_label) <- superfundsite$County

j2 <- jsTree(myx2,tooltips = zipcode_label)

frameWidget(j2)

Shiny

jsTree can be used in Shiny applications and supplies observers so the Shiny can react to the tree.

ui <- shiny::fluidPage(
  
  shiny::column(width=4,jsTree::jsTreeOutput('tree')),
  
  shiny::column(width=8,shiny::uiOutput('chosen'))
  
)

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

shinyApp(ui, server)
comments powered by Disqus