3

Say I have two htmlwidgets

# Load energy projection data
# Load energy projection data
library(networkD3)
URL <- paste0(
        "https://cdn.rawgit.com/christophergandrud/networkD3/",
        "master/JSONdata/energy.json")
Energy <- jsonlite::fromJSON(URL)
# Plot
sankeyNetwork(Links = Energy$links, Nodes = Energy$nodes, Source = "source",
             Target = "target", Value = "value", NodeID = "name",
             units = "TWh", fontSize = 12, nodeWidth = 30)

and

library(leaflet)
data(quakes)

# Show first 20 rows from the `quakes` dataset
leaflet(data = quakes[1:20,]) %>% addTiles() %>%
  addMarkers(~long, ~lat, popup = ~as.character(mag))

And I want to put them side by side in an html page. How can I do this? Could I use an iframe? Other?

Scott
  • 642
  • 7
  • 16

1 Answers1

7

There are lots of ways to answer this. Often sizing and positioning will vary based on who authored the htmlwidget, so you might need to experiment a little. The easiest way if you don't plan to use a CSS framework with grid helpers will be to wrap each htmlwidget in tags$div() and use CSS. You also might be interested in the very nice new flexbox-based dashboard package from RStudio http://github.com/rstudio/flexdashboard.

# Load energy projection data
# Load energy projection data
library(networkD3)
URL <- paste0(
  "https://cdn.rawgit.com/christophergandrud/networkD3/",
  "master/JSONdata/energy.json")
Energy <- jsonlite::fromJSON(URL)
# Plot
sn <- sankeyNetwork(Links = Energy$links, Nodes = Energy$nodes, Source = "source",
              Target = "target", Value = "value", NodeID = "name",
              units = "TWh", fontSize = 12, nodeWidth = 30,
              width = "100%")
library(leaflet)
data(quakes)

# Show first 20 rows from the `quakes` dataset
leaf <- leaflet(data = quakes[1:20,]) %>% addTiles() %>%
  addMarkers(~long, ~lat, popup = ~as.character(mag))


library(htmltools)
browsable(
  tagList(list(
    tags$div(
      style = 'width:50%;display:block;float:left;',
      sn
    ),
    tags$div(
      style = 'width:50%;display:block;float:left;',
      leaf
    )
  ))
)
timelyportfolio
  • 6,479
  • 30
  • 33
  • HOLY COW this (flexdashboard) is EXACTLY what I need. TY Kent!! – Scott Mar 12 '16 at 00:11
  • Lol, I was just thinking "I bet timelyportfolio could answer this" and I ran into this answer. – BrodieG Jan 19 '17 at 23:40
  • 1
    I recently did another experiment with Split.js here https://github.com/r-spatial/mapedit/blob/master/inst/experiments/experiment_split.R if anyone cares. This allows the ability to resize. – timelyportfolio Jan 20 '17 at 14:20
  • I should also note this fine new package https://github.com/rte-antares-rpackage/manipulateWidget for layout of htmlwidgets. – timelyportfolio Jan 20 '17 at 14:22