Can a ggiraph interactive plot be the size of the window in R shiny?

Question

I am creating an RShiny app that centres around a network drawn in ggiraph. The network is very large and detailed so ideally I'd like it to fill as much of the page as possible.

I've had a lot of problems getting ggiraph to scale properly, and also with margins/padding in RShiny. I've gotten this far with the code but it's still leaving huge amounts of whitespace

library(tidyverse)
library(ggiraph)


dt <- 
  
  structure(list(vName = c("Travel (people, not goods)", "Distribution of goods (logistics)", 
                           "Financial services", "Emergency services", "Employment provision", 
                           "Road conditions and safety", "Clothing provision", "Physical security", 
                           "Goods and services provision", "Observance of religion", "Tourism", 
                           "Social interaction", "Societal hazard regulation", "Law and order", 
                           "Foster social cohesion", "Governance", "Community activities and engagement", 
                           "Communication systems", "Housing provision", "Learning and education", 
                           "Technological hazard regulation", "Recreational activities", 
                           "Ceremonies and services for major life events", "Public health", 
                           "Biological hazard regulation", "Historical and cultural value contribution", 
                           "Animal welfare", "Planning activities", "Food provision", "Waste management", 
                           "Energy supply", "Sanitation provision", "Hydrometeorological hazard regulation", 
                           "Environmental and geohazard regulation", "Clean water", "Environmental conservation", 
                           "Clean air"), x = c(-2.98858409427524, -2.81640877118298, -2.74123849093864, 
                                               -2.65386726001767, -2.28398121105892, -2.14920295612388, -2.00485883548675, 
                                               -1.8515913089343, -1.69008255335043, -1.521051426422, -1.34525026708241, 
                                               -1.08643400771279, -0.897560522159429, -0.704692093555197, -0.508687158038456, 
                                               -0.310418111994458, -0.110767429115102, 0.0893762673942864, 0.28912215997901, 
                                               0.487581201665836, 0.683870073113174, 0.87711511416821, 1.06645621243203, 
                                               1.25105063152523, 1.4300767620147, 1.74479084369789, 1.90363064894277, 
                                               2.05399760378407, 2.19522244146318, 2.32667658577832, 2.44777494880796, 
                                               2.55797853507279, 2.65679684054522, 2.75437446946491, 2.92721942501146, 
                                               2.96449908915101, 2.98858409427524), y = c(-0.261467228242974, 
                                                                                          -1.03336423085163, -1.21885665104493, -1.39892407449664, -1.94510406598975, 
                                                                                          -2.09306632799546, -2.23171258224949, -2.36042572954096, -2.47863288182427, 
                                                                                          -2.58580791208079, -2.68147379605222, -2.79636570335232, -2.86258364228207, 
                                                                                          -2.91606053662828, -2.95655836662271, -2.98389688088342, -2.99795439869375, 
                                                                                          -2.99866835158986, -2.98603556184602, -2.96011225661834, -2.92101381768388, 
                                                                                          -2.86891426788911, -2.80404549659329, -2.72669622755457, -2.63721073385225, 
                                                                                          -2.44043129625646, -2.31866132766425, -2.18657125281782, -2.04474899009546, 
                                                                                          -1.89382577477205, -1.73447334946035, -1.56740097425861, -1.393352269912, 
                                                                                          -1.18887395545529, -0.65680015060565, -0.460157745151427, -0.261467228242978
                                               )), class = "data.frame", row.names = c(NA, -37L))

ui <- 
  
  fillPage(
    
    tags$body(tags$div(id="ppitest", style="width:1in;visible:hidden;padding:0px")),
    
    tags$script('$(document).on("shiny:connected", function(e) {
                                    var w = window.innerWidth;
                                    var h = window.innerHeight;
                                    var d =  document.getElementById("ppitest").offsetWidth;
                                    var obj = {width: w, height: h, dpi: d};
                                    Shiny.onInputChange("pltChange", obj);
                                });
                                $(window).resize(function(e) {
                                    var w = $(this).width();
                                    var h = $(this).height();
                                    var d =  document.getElementById("ppitest").offsetWidth;
                                    var obj = {width: w, height: h, dpi: d};
                                    Shiny.onInputChange("pltChange", obj);
                                });
                            '),
    
girafeOutput("plot")
    
  )

server <- function(input, output, session) {
  
  output$plot <- renderGirafe({
    
    myPlot <- 
      
      dt %>%
      ggplot() + 
      geom_point_interactive(aes(x = x, y = y, tooltip = vName)) +
      coord_equal() +
      theme_void()
    
    return(girafe(code = print(myPlot), 
                  width_svg = (1.0*input$pltChange$width/input$pltChange$dpi),
                  height_svg = (1.0*input$pltChange$height/input$pltChange$dpi)))
    
  })
  
}

shinyApp(ui, server)

score 4 · Accepted Answer · answered Dec 12 '20 at 17:35

4

It seems to me you want to stop the rescaling. See https://davidgohel.github.io/ggiraph/articles/offcran/customizing.html#size-options-1


server <- function(input, output, session) {
  output$plot <- renderGirafe({
    myPlot <-

      dt %>%
      ggplot() +
      geom_point_interactive(aes(x = x, y = y, tooltip = vName)) +
      coord_equal() +
      theme_void()

    return(girafe(
      code = print(myPlot),
      options = list(opts_sizing(rescale = FALSE)),
      width_svg = (1.0 * input$pltChange$width / input$pltChange$dpi),
      height_svg = (1.0 * input$pltChange$height / input$pltChange$dpi)
    ))
  })
}

answered Dec 12 '20 at 17:35

David Gohel

9,180
2
16
34

Excellent, thank you, this is exactly what I needed. Also had to tweak the width in `tags$body(tags$div(id="ppitest", style="width:0.75in;visible:hidden;padding:0px"))` to get rid of the last white space. Anything smaller than 0.75 distorted the graph for me. – Quinn Dec 13 '20 at 08:30
I don't understand. You are free to use any HTML container you want, ggiraph does only manage ggiraph content. If you add a ggiraph inside an element with width set to 100px, ggiraph should not go beyond this 100px width. The resizing is occurring inside that space. – David Gohel Dec 13 '20 at 11:19

Can a ggiraph interactive plot be the size of the window in R shiny?

1 Answers1