globejs: Plot Data on 3D Globes

In bwlewis/rthreejs: Interactive 3D Scatter Plots, Networks and Globes

Plot Data on 3D Globes

Description

Plot points, arcs and images on a globe in 3D using Three.js. The globe can be rotated and and zoomed.

Usage

globejs(
  img = system.file("images/world.jpg", package = "threejs"),
  lat,
  long,
  value = 40,
  color = "#00ffff",
  arcs,
  arcsColor = "#99aaff",
  arcsHeight = 0.4,
  arcsLwd = 1,
  arcsOpacity = 0.2,
  atmosphere = FALSE,
  bg = "black",
  height = NULL,
  width = NULL,
  elementId = NULL,
  ...
)

Arguments

img	A character string representing a file path or URI of an image to plot on the globe surface.
lat	Optional data point decimal latitudes, must be of same length as long (negative values indicate south, positive north).
long	Optional data point decimal longitudes, must be of same length as lat (negative values indicate west, positive east).
value	Either a single value indicating the height of all data points, or a vector of values of the same length as lat indicating height of each point.
color	Either a single color value indicating the color of all data points, or a vector of values of the same length as lat indicating color of each point.
arcs	Optional four-column data frame specifying arcs to plot. The columns of the data frame, in order, must indicate the starting latitude, starting longitude, ending latitude, and ending longitude.
arcsColor	Either a single color value indicating the color of all arcs, or a vector of values of the same length as the number of rows of arcs.
arcsHeight	A single value between 0 and 1 controlling the height above the globe of each arc.
arcsLwd	Either a single value indicating the line width of all arcs, or a vector of values of the same length as the number of rows of arcs.
arcsOpacity	A single value between 0 and 1 indicating the opacity of all arcs.
atmosphere	TRUE enables WebGL atmpsphere effect.
bg	Plot background color.
height	The container div height.
width	The container div width.
elementId	Use an explicit element ID for the widget (rather than an automatically generated one). Useful if you have other JavaScript that needs to explicitly discover and interact with a specific widget instance.
...	Additional arguments to pass to the three.js renderer (see below for more information on these options).

Value

An htmlwidget object (displayed using the object's show or print method).

Available rendering options

• "bodycolor" The diffuse reflective color of the globe.

• "emissive" The emissive color of the globe object.

• "lightcolor" The color of the ambient light in the scene.

• "fov" The initial field of view, default is 35.

• "rotationlat" The initial globe latitudinal rotation in radians, default is 0.

• "rotationlong" The initial globe longitudinal rotation in radians, default is 0.

• "pointsize" The numeric size of the points/bars, default is 1.

• "renderer" Manually set the three.js renderer to one of 'auto' or 'canvas'. The canvas renderer works across a greater variety of viewers and browsers. The default setting of 'auto' automatically chooses WebGL rendering if it's available.

• "program" User-supplied JavaScript run on plot initialization

Specify colors with standard color names or hex color representations. The default values (well-suited to many earth-like map images) are lightcolor = "#aaeeff", emissive = "#000000", and bodycolor = "#ffffff". Larger fov values result in a smaller (zoomed out) globe. The latitude and longitude rotation values are relative to the center of the map image. Their default values of zero radians result in the front of the globe corresponding to the center of the flat map image.

Note

The img argument specifies the WebGL texture image to wrap on a sphere. If you plan to plot points using lat and lon the image must be a plate carree (aka lat/long) equirectangular map projection; see https://en.wikipedia.org/wiki/Equirectangular_projection for details. Lat/long maps are commonly found for most planetary bodies in the solar system, and are also easily generated directly in R (see the references and examples below).

References

The three.js project https://threejs.org. (The corresponding three.js javascript file is in system.file("htmlwidgets/globejs",package="threejs").)

An excellent overview of available map coordinate reference systems (PDF): https://www.nceas.ucsb.edu/sites/default/files/2020-04/OverviewCoordinateReferenceSystems.pdf.

Examples

## Not run: 
# Plot flights to frequent destinations from Callum Prentice's
# global flight data,
# http://callumprentice.github.io/apps/flight_stream/index.html
f <- flights()
# Approximate locations as factors
dest   <- factor(sprintf("%.2f:%.2f", f[,3], f[,4]))
# A table of destination frequencies
freq <- sort(table(dest), decreasing=TRUE)
# The most frequent destinations in these data, possibly hub airports?
frequent_destinations <- names(freq)[1:10]
# Subset the flight data by destination frequency
idx <- dest %in% frequent_destinations
frequent_flights <- f[idx, ]
# Lat/long and counts of frequent flights
ll <- unique(frequent_flights[, 3:4])
# Plot frequent destinations as bars, and the flights to and from
# them as arcs. Adjust arc width and color by frequency.
globejs(lat=ll[, 1], long=ll[, 2], arcs=frequent_flights,
        bodycolor="#aaaaff", arcsHeight=0.3, arcsLwd=2,
        arcsColor="#ffff00", arcsOpacity=0.15,
        atmosphere=TRUE, color="#00aaff", pointsize=0.5)

## End(Not run)

## Not run: 
# Plot populous world cities from the maps package.
library(threejs)
library(maps)
data(world.cities, package="maps")
cities <- world.cities[order(world.cities$pop, decreasing=TRUE)[1:1000],]
value  <- 100 * cities$pop / max(cities$pop)
col <- colorRampPalette(c("cyan", "lightgreen"))(10)[floor(10 * value/100) + 1]
globejs(lat=cities$lat, long=cities$long, value=value, color=col, atmosphere=TRUE)

# Plot the data on the moon:
moon <- system.file("images/moon.jpg", package="threejs")
globejs(img=moon, bodycolor="#555555", lightcolor="#aaaaaa",
        lat=cities$lat, long=cities$long,
        value=value, color=col)

# Using global plots from the maptools, rworldmap, or sp packages.

# Instead of using ready-made images of the earth, we can use
# many R spatial imaging packages to produce globe images
# dynamically. With a little extra effort you can build globes with total
# control over how they are plotted.

library(maptools)
library(threejs)
data(wrld_simpl)

bgcolor <- "#000025"
earth <- tempfile(fileext=".jpg")

# NOTE: Use antialiasing to smooth border boundary lines. But! Set the jpeg
# background color to the globe background color to avoid a visible aliasing
# effect at the the plot edges.

jpeg(earth, width=2048, height=1024, quality=100, bg=bgcolor, antialias="default")
par(mar = c(0,0,0,0), pin = c(4,2), pty = "m",  xaxs = "i",
    xaxt = "n",       xpd = FALSE,  yaxs = "i", bty = "n", yaxt = "n")
plot(wrld_simpl, col="black", bg=bgcolor, border="cyan", ann=FALSE,
     setParUsrBB=TRUE)
dev.off()
globejs(earth)

# A shiny example:
shiny::runApp(system.file("examples/globe",package="threejs"))

## End(Not run)

# See http://bwlewis.github.io/rthreejs for additional examples.

bwlewis/rthreejs documentation built on Aug. 22, 2022, 1:30 p.m.