R for
Authoring!!

OOH Session #39…
…introducing interactivity

Open Office Hours
(August 20, 2024)

  • Recap session #38       ↔︎️
  • Focal issue:
  • Shared problem-solving

Recap of Session #38:

Customized Callouts:

@import url('https://fonts.googleapis.com/css?family=Dancing Script');

.trynew {
  margin-top: 1em;
  margin-bottom: 1em;  
  border-radius: .25rem;
  border-left: solid #acacac .3rem;
  border-right: solid 1px silver;
  border-top: solid 1px silver;
  border-bottom: solid 1px silver;
  border-left-color: #ff99ff !important;
}                                     

.trynew-header {
  margin-top: 0.0em;
  margin-bottom: 0.5em;
  border-bottom: none;
  font-weight: 800;
  color: #71797E;
  font-family: 'Dancing Script';
  font-size: 2.0rem;
  opacity: 85%;
  padding-left: 0.5em;
  padding-right: 2.5em;
  display: flex;
  background-color: #ff99ff;
}  

.trynew-icon {
  height: 5.0rem;
  width: 6.0rem;
  display: inline-block;
  content: "";
  background-repeat: no-repeat;
  background-size: 7.0rem 7.0rem;
  margin-top: -1.5rem;
  padding-right: 2.1rem;
  background-image: url('https://i.pinimg.com/originals/4c/09/e6/4c09e608d548b4abf525f3bb2b215c68.png');
}                                      

.trynew-body {
  font-size: 1.9rem;
  font-weight: 400;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

.kulas3 {
  font-size: 35px;
  font-weight: bold;
  color: #ff99ff;
  font-family: 'Dancing Script';
}
1
General shape of callout – outermost “rectangle”. Note line 11 parrots the intended header color 🦜
2
Color (line 26), font (lines 18–21), and padding/size of top-most header
3
Icon specification – here pulling image from internet (line 38)
4
Actual content of callout – messaging typically goes inside this portion of the container 
:::{.trynew}
::::{.trynew-header}
:::::{.trynew-icon}
:::::
`r fontawesome::fa("youtube", fill="#FF0000")` Tutorial
::::

::::{.trynew-body}
[Fantastic]{.kulas3} walk-through available [here](https://www.youtube.com/watch?v=DDQO_3R-q74)
::::
:::

Tutorial

Fantastic walk-through available here

Today:

Element Interactivity

htmlwidgets⚙️

Caution

Old (??) wrapper for interactive objects. Current application seemingly integrated within plotly, leaflet, dygraphs, etc…

Note

None of the previous 4 visuals explicitly specified htmlwidgets functions within this current slide presentation

## Old utilization (prob 2019-ish):

htmlwidgets::saveWidget(hc_gdpr, "hc_gdpr.html", 
             selfcontained = TRUE, knitrOptions = list())

widgetframe::frameWidget(hc_gdpr)           ## trying for online

Session Info (August 20, 2024) Rendering:

R version 4.5.0 (2025-04-11 ucrt)
Platform: x86_64-w64-mingw32/x64
Running under: Windows 10 x64 (build 19045)

Matrix products: default
  LAPACK version 3.12.1

locale:
[1] LC_COLLATE=English_United States.utf8 
[2] LC_CTYPE=English_United States.utf8   
[3] LC_MONETARY=English_United States.utf8
[4] LC_NUMERIC=C                          
[5] LC_TIME=English_United States.utf8    

time zone: America/Chicago
tzcode source: internal

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] dygraphs_1.1.1.6  threejs_0.3.4     igraph_2.1.4      leaflet_2.2.2    
[5] plotly_4.10.4     ggplot2_4.0.3     fontawesome_0.5.3

loaded via a namespace (and not attached):
 [1] generics_0.1.4      tidyr_1.3.2         lattice_0.22-6     
 [4] stringi_1.8.7       digest_0.6.39       magrittr_2.0.4     
 [7] evaluate_1.0.5      grid_4.5.0          timechange_0.4.0   
[10] RColorBrewer_1.1-3  fastmap_1.2.0       jsonlite_2.0.0     
[13] httr_1.4.8          purrr_1.0.4         crosstalk_1.2.1    
[16] viridisLite_0.4.3   scales_1.4.0        lazyeval_0.2.2     
[19] jquerylib_0.1.4     cli_3.6.5           rlang_1.1.7        
[22] crayon_1.5.3        base64enc_0.1-6     withr_3.0.2        
[25] yaml_2.3.12         otel_0.2.0          tools_4.5.0        
[28] dplyr_1.2.0         assertthat_0.2.1    vctrs_0.7.2        
[31] R6_2.6.1            zoo_1.8-14          lifecycle_1.0.5    
[34] lubridate_1.9.5     stringr_1.6.0       htmlwidgets_1.6.4  
[37] pkgconfig_2.0.3     pillar_1.11.1       gtable_0.3.6       
[40] glue_1.8.0          data.table_1.18.2.1 xfun_0.57          
[43] tibble_3.3.1        tidyselect_1.2.1    emo_0.0.0.9000     
[46] rstudioapi_0.18.0   knitr_1.51          farver_2.1.2       
[49] htmltools_0.5.9     xts_0.14.1          rmarkdown_2.31     
[52] compiler_4.5.0      S7_0.2.1