Learn R Programming

threejs (version 0.3.3)

globejs: 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.

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.

References

The three.js project http://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/~frazier/RSpatialGuides/OverviewCoordinateReferenceSystems.pdf

Examples

Run this code
# NOT RUN {
# Plot flights to frequent destinations from Callum Prentice's
# global flight data set,
# http://callumprentice.github.io/apps/flight_stream/index.html
data(flights)
# Approximate locations as factors
dest   <- factor(sprintf("%.2f:%.2f",flights[,3], flights[,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 <- flights[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)

# }
# 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"))
# }
# NOT RUN {
# See http://bwlewis.github.io/rthreejs for additional examples.
# }

Run the code above in your browser using DataLab