werk.statt.codes / blog / Potential sizing issue when importing interactive plots (ggraph; htmlWidget)
Potential sizing issue when importing interactive plots (ggraph; htmlWidget)
November 12, 2019

This post documents a potential issue when it comes to sizing interactive images/htmlwidgets produced with the ggiraph and htmlwidgets packages. The goal is to import interactive graphs produced in other R(Studio) Projects into a blogdown post. I assume/hope there there is a relatively easy solution to it, but I haven’t yet figured it out.

Create interactive plot

First, let’s create an interactive plot. Here it has the dimensions 10 by 5 inches and is meant to have no padding. The result is as expected. The goal is to have a similar appearance/behavior after importing this graph into a blogdown post in a different R project. The vertical and horizontal page re-size nicely, text flow remains in order.

library(tidyverse)
## -- Attaching packages ------------------------------------------------------------------------------------------------------- tidyverse 1.2.1 --
## v ggplot2 3.2.1.9000     v purrr   0.3.3     
## v tibble  2.1.3          v dplyr   0.8.3     
## v tidyr   1.0.0          v stringr 1.4.0     
## v readr   1.3.1          v forcats 0.4.0
## -- Conflicts ---------------------------------------------------------------------------------------------------------- tidyverse_conflicts() --
## x dplyr::filter() masks stats::filter()
## x dplyr::lag()    masks stats::lag()
library(htmlwidgets)
library(ggiraph)

my_plot <- mtcars %>% 
  rownames_to_column(., var="car_name") %>% 
  ggplot()+
  geom_point_interactive(aes(x=mpg,
                             y=drat,
                             tooltip=car_name,
                             data_id=car_name))
  


my_plot <- girafe(code = print(my_plot), 
                  width_svg=10,
                  height_svg= 5,
                  options = list(opts_toolbar(saveaspng = FALSE),
                                 opts_sizing(rescale=T),
                                 opts_tooltip(css="background-color:lightgray;"))) %>%
  girafe_options(.,
                 sizingPolicy(padding = "0px"))

my_plot

Export plot as htmlwidget

Now, let’s save this interactive plot with the saveWidget function from the htmlwidgets package. The purpose is to import the interactive plot into a blogdown post (as below). To highlight/make visible the remaining padding, I set the background to red.

saveWidget(my_plot, file="widget_saved_wo_padding_with_rescaling.html",
            background = "red")

Import widget as an iframe

with dimensions defined in absolute terms

10 x 5 inches = 960 x 480 pxls
advantage: vertical space after plot remains fixed; text flow does not get distorted
disadvantage: iframe/graph does not shrink horizontally; graph reaches into table of contents on the right side when changing size of browser/screen

<iframe id="inlineFrameExample2"

    title="Inline Frame Example2"

    width="960"

    height="480"

    frameborder="0" scrolling="no" 

    src="/post/2019-11-12-size-issue-ggraph_files/widget_saved_wo_padding_with_rescaling.html">

</iframe>

text under plot; is there excessive space?

relative definition of dimensions

disadvantage: vertical space too small; graph is cut off;

<iframe id="inlineFrameExample3"

    title="Inline Frame Example3"

    frameborder="0" scrolling="no" 

    style="position: relative; height: 100%; width: 100%;"

    src="/post/2019-11-12-size-issue-ggraph_files/widget_saved_w_padding_with_rescaling.html">

</iframe>

text under plot; is there excessive space?

mixing relative and absolute definition of dimensions

disadvantage: excessive vertical space reemerges when moving to smaller screen

<iframe id="inlineFrameExample4"

    title="Inline Frame Example3"

    frameborder="0" scrolling="no" 

    style="position: relative; height:480px; width: 100%;"

    src="/post/2019-11-12-size-issue-ggraph_files/widget_saved_w_padding_with_rescaling.html">

</iframe>

text under text under plot; is there excessive space?

Javascript (digging a hole…)

resizes the plot when reloading the browser; should be a reising trigger though…

text under plot; is there excessive space?






Export and Import with widgetframe package

Export

library(widgetframe)
saveWidget(frameableWidget(my_plot), file="widget_saved_wo_padding_with_rescaling_widgetframe.html",
            background = "red")

Import widgetframe


OLD: Import widget and adjust sizing

Now let’s import the widget into the a blogdown blogpost (via the insert image function of the blogdown add-in). Several seizing versions are demonstrated below:

without size options

Without any sizing options the plot is small and embedded with a vertical scrollbar. Note that there is a small padding at the bottom (in red).

![](/post/2019-11-12-size-issue-ggraph_files/widget_saved_wo_padding.html)

width=100% height=100%

The plot as an intended size, but the height is still too small (despite height=100%).

![](/post/2019-11-12-size-issue-ggraph_files/widget_saved_wo_padding.html){width=100% height=100%}

width=100% height=672px

The vertical size of the plot changes but remains too small; vertical scrollbars remain

![](/post/2019-11-12-size-issue-ggraph_files/widget_saved_wo_padding.html){width=100% height=672px}

width=100% height=1100px

The plot is now well visible, without any scrollbars. The padding at the bottom grew somewhat but is sitll ok.

![](/post/2019-11-12-size-issue-ggraph_files/widget_saved_wo_padding.html){width=100% height=1100px}

PROBLEM: Laptopscreen; padding becomes too large

When moving the browser window from my main screen to the laptop screen, the padding grows and becomes distorting (I assume others can replicate this). The reason is likely that the laptop screen has fewer pixles and the ‘fix’ definition of the vertical size (1100 px) appears proportionally larger. How to solve this?

rescale=F

my_plot <- girafe(code = print(my_plot), 
                  width_svg=10,
                  height_svg= 7,
                  options = list(opts_toolbar(saveaspng = FALSE),
                                 opts_sizing(rescale=F),
                                 opts_tooltip(css="background-color:lightgray;")))

![](/post/2019-11-12-size-issue-ggraph_files/widget_saved_wo_padding_no_rescaling.html){width=100% height=100%}

##without padding=0

# Attempt with plotly

library(plotly)
my_plot_2 <- mtcars %>% 
  rownames_to_column(., var="car_name") %>% 
  ggplot()+
  geom_point(aes(x=mpg,
                 y=drat))
  
plotly::ggplotly(my_plot_2)
my_plotly <- plotly::ggplotly(my_plot_2)
htmlwidgets::saveWidget(as_widget(my_plotly), paste0(wdr, "plotly_graph.html"))