R for
Authoring!!

OOH Session #41…
…threejs

Open Office Hours
(September 03, 2024)

• Recap session #40       ↔︎️
• Focal issue:
  • Interactivity
    • threejs
  • 🚧Work issue (new)🚧
• Shared problem-solving

Recap of Session #40:

Leaflet🍃 Interactivity

• Basic🌐
• Tiles🗺
• Markers📌
• Sliding blobs🦠

library(tidyverse)
library(leaflet)

leaflet() %>%
  addTiles() %>%
  setView(lat = 41.93,
          lng = -88.71, 
          zoom = 12) 

1

Default (unspecified) “tile” is OpenStreetMap

library(tidyverse)
library(leaflet)

leaflet() %>%
  addProviderTiles(providers$Esri.WorldImagery) %>%
  setView(lat = 41.93,
          lng = -88.76, 
          zoom = 12) 

1

Listings (with preview capability) of free tiles

library(tidyverse)
library(leaflet)

leaflet() %>%
  addProviderTiles(providers$Esri.WorldImagery) %>%
  setView(lat = 41.93,
          lng = -88.76, 
          zoom = 12) %>%
  addMarkers(
    lat=41.93155,
    lng=-88.76512)

ergIcon <- makeIcon(
  iconUrl = "https://ergreports.com/images/erg2.png",
  iconWidth = 60, iconHeight = 50,
  iconAnchorX = 30, iconAnchorY = 30,
)

## create leaflet map
leaflet() %>% 
  setView(lng= -93.24, lat=44.99, 
          zoom=5) %>%
  addTiles() %>%
  addMarkers(data=together, 
          ~LocationLongitude, 
          ~LocationLatitude, 
          icon = ergIcon,  
   clusterOptions = 
           markerClusterOptions(spiderfyDistanceMultiplier=1.5)) %>%
   addProviderTiles("Stamen.TonerBackground") 

Today:

threejs Interactivity

plotly
leaflet
threejs
dygraphs

• threejs
• plotly
• leaflet
• dygraphs

Tip

A helpful guide and description of three.js elements is available here

THREE = {
  const THREE = window.THREE = await require("three@0.130.0/build/three.min.js");
  await require("three@0.130.0/examples/js/controls/OrbitControls.js").catch(() => {});
  return THREE;
}

height = 350
width = 350

cube = {
  const material = new THREE.MeshNormalMaterial();
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const cube = new THREE.Mesh(geometry, material);
  return cube;
}

scene = {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x001b42);
  scene.add(cube);
  return scene;
}

camera = {
  const fov = 45;
  const aspect = width / height;
  const near = 1;
  const far = 1000;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(2, 2, -2)
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  return camera;
}

renderer = {
  const renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setSize(width, height);
  renderer.setPixelRatio(devicePixelRatio);
  const controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.addEventListener("change", () => renderer.render(scene, camera));
  invalidation.then(() => (controls.dispose(), renderer.dispose()));
  return renderer;
}

// Continuously updates
{
  while (true) {
    cube.rotation.z += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
    yield null;
  }
}

renderer.domElement

Issue from work this week…

Session Info (September 03, 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     leaflet.extras_2.0.1 plotly_4.10.4       
 [4] leaflet_2.1.2        lubridate_1.9.3      forcats_1.0.0       
 [7] stringr_1.5.1        dplyr_1.1.4          purrr_1.0.1         
[10] readr_2.1.5          tidyr_1.3.1          tibble_3.2.1        
[13] ggplot2_3.5.1        tidyverse_2.0.0      fontawesome_0.5.2   

loaded via a namespace (and not attached):
 [1] zoo_1.8-12              tidyselect_1.2.1        xfun_0.42              
 [4] lattice_0.20-45         colorspace_2.1-0        vctrs_0.6.5            
 [7] generics_0.1.3          leaflet.providers_1.9.0 viridisLite_0.4.2      
[10] htmltools_0.5.7         emo_0.0.0.9000          yaml_2.3.8             
[13] utf8_1.2.4              rlang_1.1.3             pillar_1.9.0           
[16] glue_1.6.2              withr_3.0.0             lifecycle_1.0.4        
[19] munsell_0.5.1           gtable_0.3.5            htmlwidgets_1.6.4      
[22] evaluate_0.23           knitr_1.45              tzdb_0.4.0             
[25] fastmap_1.1.1           crosstalk_1.2.0         fansi_1.0.6            
[28] xts_0.14.0              scales_1.3.0            jsonlite_1.8.8         
[31] farver_2.1.1            hms_1.1.3               digest_0.6.31          
[34] stringi_1.7.12          grid_4.2.2              cli_3.6.0              
[37] tools_4.2.2             magrittr_2.0.3          lazyeval_0.2.2         
[40] crayon_1.5.2            pkgconfig_2.0.3         ellipsis_0.3.2         
[43] data.table_1.15.2       timechange_0.3.0        assertthat_0.2.1       
[46] rmarkdown_2.26          httr_1.4.7              rstudioapi_0.15.0      
[49] R6_2.5.1                compiler_4.2.2