Introduction

The journey of building and testing echarty has taken us to great places in cyberspace. Recently we came across this project - about visualizing live satellites in orbit. It became our inspiration on conquering a distant corner of the ECharts galaxy - the 3D Globe 🌍.

Project

First step - getting data. We liked this source for its scope and simplicity.
The search for an astrodynamics R library did not look promising. But then we got lucky - asteRisk is a freshly released gem 💎. The library is neatly abstracted and easy to digest.
Here is a summary of our workflow:
Step Library Purpose
1 data (*.txt) satellite live data in TLE format, public source
2 asteRisk (R) astrodynamics in R, read TLE and calculate latitude/longitude
3 echarty (R) our thin R wrapper for ECharts to build structures and chart parameters
4 ECharts (JavaScript) chart visualization in 2D/3D, chart to canvas
5 web page (HTML) display here at RPubs, fully interactive


The live data feed contains info on thousands of satellites. We choose around 70 for clarity. They are Low-Earth Orbit LEO, with high velocity, complete orbit in 90 to 120 minutes.
All three globe drawing charts are used - scatter3D for positions, bar3D for vertical beams and lines3D for surface tracks. There are a couple lines of JavaScript as well.
Altitudes are magnified since LEO orbits are very close to Earth when observed from space.

Result

There are 20 snapshots of a one hour future timespan of satellite locations, altitude and surface tracks.
An animated wide red band represents orbits of debris from the recent ASAT military test. The International Space Station(ISS) has its own icon in white. ECharts allows zooming, rotating the planet, control timeline execution and hover points for identification. There is also a custom toggle button to stop/start animations.
Full-screen is not yet available inside the RPubs iframe.

Source code is behind the button ➟



load(url('https://helgasoft.github.io/echarty/test/satellites3D.RData'))

# ----------- visualization ------------

tline <- unlist(lapply(options, \(x) x$title$text))
#options <- lapply(options, \(x) { x$title<-NULL; x})

ROOT_PATH <- 'https://echarts.apache.org/examples/data-gl/asset/'

getImage <- function(f) {   # avoid complains about CORS
  return(paste0("data:image/png;base64,", 
                base64enc::base64encode(f)))  
}

library(echarty)
# custom toolbox toggle button to start/stop all animations
tbox <- list(
  list(right= '10%', 
       emphasis= list(iconStyle= list(color='brown')), iconStyle= list(color='orange'),
       feature= list(myTT=list(
    show=TRUE,  title= 'animation', 
    icon= 'path://M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zM6 4a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1zm4 0a1 1 0 0 0-1 1v6a1 1 0 0 0 2 0V5a1 1 0 0 0-1-1z',
    onclick= htmlwidgets::JS("function() { togglePlay(); }")))),
  list(right= '5%', feature= ec.util(cmd='fullscreen'))
)
# JavaScript code for the toggle button above
jscode <- "window.flag = true;
  window.togglePlay = function () {
    window.flag = !window.flag;
    opts = chart.getOption();
    opts.globe[0].viewControl.autoRotate = window.flag;
    opts.timeline[0].loop = window.flag;
    opts.timeline[0].autoPlay = window.flag;
    chart.setOption(opts);
  }"

ec.init(load='3D', preset=FALSE, js= jscode,
  #title = list(text= '67 Satellites in 1 hour', 
  #             subtext='Click for info', sublink='https://rpubs.com/echarty/satellites'),
  globe= list( 
    globeRadius=100, globeOuterRadius=130,
    baseTexture= getImage(paste0(ROOT_PATH, 'earth.jpg')), 
    environment= getImage(paste0(ROOT_PATH, 'starfield.jpg')),
    shading= 'realistic',
    realisticMaterial= list(roughness= 0.9),
    viewControl= list(autoRotate= TRUE, autoRotateAfterStill= 15, 
      autoRotateDirection= 'ccw', autoRotateSpeed= 1, distance= 180)
  ),
  tooltip= list(show=TRUE, backgroundColor= 'transparent',
    textStyle= list(color='#eee'),  formatter= htmlwidgets::JS("
    function(x) { return '<b>'+ x.data.name +
                      '</b><br>altitude <b>'+ x.data.value[2]+'</b> km'; }")),
  timeline= list(axisType='category', orient= 'vertical', 
      symbol='diamond', playInterval= 1000, loop= TRUE, autoPlay= TRUE, 
      left= NULL, right= 0, top= 20, bottom= 20,
      width= 55, height= NULL, checkpointStyle= list(borderWidth= 2),
      data= tline),
  options= options,
  toolbox= tbox
)

Conclusion

Our objective was reached - demonstrate that building a practical 3D application with R and echarty is achievable. And with 3D Globe it could be fun too 🚀.
Some ECharts glitches were discovered and documented during development.

If you like the project, please consider giving echarty a Github star ⭐.
Recognition is our only reward and is deeply appreciated.
Lets explore the horizons of R visualization !