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.2.2 (2022-10-31 ucrt)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows 10 x64 (build 19045)

Matrix products: default

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    

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

other attached packages:
[1] dygraphs_1.1.1.6  threejs_0.3.3     igraph_1.4.2      leaflet_2.1.2    
[5] plotly_4.10.4     ggplot2_3.5.1     fontawesome_0.5.2

loaded via a namespace (and not attached):
 [1] zoo_1.8-12        tidyselect_1.2.1  xfun_0.42         purrr_1.0.1      
 [5] lattice_0.20-45   colorspace_2.1-0  vctrs_0.6.5       generics_0.1.3   
 [9] htmltools_0.5.7   viridisLite_0.4.2 emo_0.0.0.9000    yaml_2.3.8       
[13] base64enc_0.1-3   utf8_1.2.4        rlang_1.1.3       pillar_1.9.0     
[17] glue_1.6.2        withr_3.0.0       lifecycle_1.0.4   stringr_1.5.1    
[21] munsell_0.5.1     gtable_0.3.5      htmlwidgets_1.6.4 evaluate_0.23    
[25] knitr_1.45        fastmap_1.1.1     crosstalk_1.2.0   fansi_1.0.6      
[29] xts_0.14.0        scales_1.3.0      jsonlite_1.8.8    farver_2.1.1     
[33] digest_0.6.31     stringi_1.7.12    dplyr_1.1.4       grid_4.2.2       
[37] cli_3.6.0         tools_4.2.2       magrittr_2.0.3    lazyeval_0.2.2   
[41] tibble_3.2.1      crayon_1.5.2      tidyr_1.3.1       pkgconfig_2.0.3  
[45] ellipsis_0.3.2    data.table_1.15.2 timechange_0.3.0  lubridate_1.9.3  
[49] assertthat_0.2.1  rmarkdown_2.26    httr_1.4.7        rstudioapi_0.15.0
[53] R6_2.5.1          compiler_4.2.2