Converting plot into suitable format for shiny

[GreyMerchant]

Hello,

I have this graph from the aweSOM package I'd like to embed in a shiny app. From the str() call it would seem to be a htmlwidget sort of object. Is there a simple way to take output and the htmlwidget package to create this plot in a shiny app?

library(aweSOM)
#> Warning: package 'aweSOM' was built under R version 4.0.4

full.data <- iris
## Select variables
train.data <- full.data[, c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width")]
### Scale training data
train.data <- scale(train.data)

### RNG Seed (for reproducibility)
set.seed(31388)
### Initialization (PCA grid)
init <- somInit(train.data, 4, 4)
## Train SOM
iris.som <- kohonen::som(train.data, grid = kohonen::somgrid(4, 4, "hexagonal"), 
                         rlen = 100, alpha = c(0.05, 0.01), radius = c(2.65,-2.65), 
                         dist.fcts = "sumofsquares", init = init)


output <- aweSOMplot(som = iris.som, type = "Hitmap")

str(output)
#> List of 10
#>  $ x            :List of 12
#>   ..$ plotType        : chr "Hitmap"
#>   ..$ sizeInfo        : num 400
#>   ..$ gridInfo        :List of 3
#>   .. ..$ nbLines  : num 4
#>   .. ..$ nbColumns: num 4
#>   .. ..$ topology : chr "hexagonal"
#>   ..$ superclass      : num [1:16] 1 1 1 1 1 1 1 1 1 1 ...
#>   ..$ superclassColor :List of 1
#>   .. ..$ : chr "#8DD3C7"
#>   ..$ cellNames       :List of 16
#>   .. ..$ : chr "42"
#>   .. ..$ : chr "54, 58, 61, 70, 81, 82, 90, 94, 99, 107"
#>   .. ..$ : chr "63, 69, 73, 88, 120"
#>   .. ..$ : chr "84, 102, 104, 109, 112, 114, 115, 122, 124, 127, 129, 133, 135, 143, 147"
#>   .. ..$ : chr "2, 3, 4, 9, 10, 13, 14, 26, 30, 31, 35, 36, 39, 43, 46, 48"
#>   .. ..$ : chr ""
#>   .. ..$ : chr "56, 60, 65, 67, 68, 80, 83, 85, 89, 91, 93, 95, 96, 97, 100"
#>   .. ..$ : chr "55, 62, 64, 72, 74, 75, 79, 92, 98, 128, 134, 139, 150"
#>   .. ..$ : chr "1, 5, 7, 8, 12, 18, 21, 22, 23, 24, 25, 27, 28, 29, 32, 37, 38, 40, 41, 44, 50"
#>   .. ..$ : chr "52, 57, 71, 86"
#>   .. ..$ : chr "51, 53, 59, 66, 76, 77, 78, 87"
#>   .. ..$ : chr "103, 106, 108, 119, 123, 126, 130, 131, 136"
#>   .. ..$ : chr "6, 11, 15, 16, 17, 19, 20, 33, 34, 45, 47, 49"
#>   .. ..$ : chr ""
#>   .. ..$ : chr "101, 105, 111, 113, 116, 117, 121, 125, 137, 138, 140, 141, 142, 144, 145, 146, 148, 149"
#>   .. ..$ : chr "110, 118, 132"
#>   ..$ cellPop         : 'table' int [1:16(1d)] 1 10 5 15 16 0 15 13 21 4 ...
#>   ..$ showAxes        : logi TRUE
#>   ..$ transparency    : logi TRUE
#>   ..$ showNames       : logi TRUE
#>   ..$ normalizedValues: 'table' num [1:16(1d)] 0.196 0.621 0.439 0.761 0.786 ...
#>   ..$ realValues      : 'table' int [1:16(1d)] 1 10 5 15 16 0 15 13 21 4 ...
#>  $ width        : num 400
#>  $ height       : num 334
#>  $ sizingPolicy :List of 6
#>   ..$ defaultWidth : NULL
#>   ..$ defaultHeight: NULL
#>   ..$ padding      : NULL
#>   ..$ viewer       :List of 6
#>   .. ..$ defaultWidth : NULL
#>   .. ..$ defaultHeight: NULL
#>   .. ..$ padding      : NULL
#>   .. ..$ fill         : logi TRUE
#>   .. ..$ suppress     : logi FALSE
#>   .. ..$ paneHeight   : NULL
#>   ..$ browser      :List of 5
#>   .. ..$ defaultWidth : NULL
#>   .. ..$ defaultHeight: NULL
#>   .. ..$ padding      : NULL
#>   .. ..$ fill         : logi FALSE
#>   .. ..$ external     : logi FALSE
#>   ..$ knitr        :List of 3
#>   .. ..$ defaultWidth : NULL
#>   .. ..$ defaultHeight: NULL
#>   .. ..$ figure       : logi TRUE
#>  $ dependencies : NULL
#>  $ elementId    : chr "aweSOMwidget-988e06d13544a06ce531"
#>  $ preRenderHook: NULL
#>  $ jsHooks      : list()
#>  $ prepend      :List of 2
#>   ..$ :List of 3
#>   .. ..$ name    : chr "h4"
#>   .. ..$ attribs :List of 1
#>   .. .. ..$ id: chr "aweSOMwidget-988e06d13544a06ce531-info"
#>   .. ..$ children: list()
#>   .. ..- attr(*, "class")= chr "shiny.tag"
#>   ..$ :List of 3
#>   .. ..$ name    : chr "h4"
#>   .. ..$ attribs :List of 1
#>   .. .. ..$ id: chr "aweSOMwidget-988e06d13544a06ce531-message"
#>   .. ..$ children: list()
#>   .. ..- attr(*, "class")= chr "shiny.tag"
#>  $ append       :List of 2
#>   ..$ :List of 3
#>   .. ..$ name    : chr "p"
#>   .. ..$ attribs :List of 1
#>   .. .. ..$ id: chr "aweSOMwidget-988e06d13544a06ce531-names"
#>   .. ..$ children: list()
#>   .. ..- attr(*, "class")= chr "shiny.tag"
#>   ..$ :List of 3
#>   .. ..$ name    : chr "svg"
#>   .. ..$ attribs :List of 3
#>   .. .. ..$ id    : chr "aweSOMwidget-988e06d13544a06ce531-legend"
#>   .. .. ..$ width : chr "100%"
#>   .. .. ..$ height: chr "0"
#>   .. ..$ children: list()
#>   .. ..- attr(*, "class")= chr "shiny.tag"
#>  - attr(*, "class")= chr [1:2] "aweSOMwidget" "htmlwidget"
#>  - attr(*, "package")= chr "aweSOM"

[ginberg]

Normally, there is a render method that's specific for an htmlwidget package but I could not find it for this package. You can always try to use the generic renderUI method, it seems to work well in this case.

library(shiny)
library(aweSOM)

ui <- fluidPage(
    titlePanel("Awesome app"),
    uiOutput("myPlot")
)
server <- function(input, output) {
    output$myPlot <- renderUI({
        full.data <- iris
        ## Select variables
        train.data <- full.data[, c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width")]
        ### Scale training data
        train.data <- scale(train.data)
        
        ### RNG Seed (for reproducibility)
        set.seed(31388)
        ### Initialization (PCA grid)
        init <- somInit(train.data, 4, 4)
        ## Train SOM
        iris.som <- kohonen::som(train.data, grid = kohonen::somgrid(4, 4, "hexagonal"), 
                                 rlen = 100, alpha = c(0.05, 0.01), radius = c(2.65,-2.65), 
                                 dist.fcts = "sumofsquares", init = init)
        tagList(aweSOMplot(som = iris.som, type = "Hitmap"))
    })
}
shinyApp(ui = ui, server = server)

[GreyMerchant]

Thank you! This is great. I didn't think it would work so directly with renderUI.