Mise en Abyme

Yesterday Roger Peng, Brooke Anderson, and I were working on the last part of our Mastering Software Development in R specialization on Coursera and we started talking about the explosion of Javascript-based interactive graphics packages that have come out for R. We then started seriously discussing the capstone project of the specialization, down to the gritty details of how we wanted students to convert rows in a certain data frame into nicely formatted HTML that could be displayed in a Leaflet marker popup. The discussion got me thinking: what are the limits to what you can put into Leaflet marker popup? Could you, for example, put an interactive Plotly scatter plot in a popup? The resulting monstrosity is below:

library(leaflet)

popup <- '<iframe width="300" height="300" frameborder="0" scrolling="no" src="https://plot.ly/~seankross/1.embed"></iframe>'

leaflet() %>%
  addTiles() %>%
  addMarkers(lng=174.768, lat=-36.852, popup=popup)

If you want to do this yourself start by creating a graph using Plotly, and then upload it to your Plotly account. Once you’ve uploaded the graph you can then get an embeddable iframe that you can supply as the popup argument in addMarkers().

I showed this insanity to Brooke and Roger, and Brooke mentioned that it reminded her of the artistic concept of mise en abyme (literally: placed into abyss), which describes the experience of standing between two mirrors. The next logical question for the three of us was: what are the limits of using an <iframe> in a Leaflet popup? How deep does this rabbit hole go? I uploaded my first map and attempted to embed that site into yet another popup:

library(leaflet)

popup <- '<iframe width="300" height="600" frameborder="0" scrolling="no" src="https://seankross.neocities.org/map.html"></iframe>'

leaflet() %>%
  addTiles() %>%
  addMarkers(lng=174.768, lat=-36.852, popup=popup)

If you place yourself into the abyss, the abyss stares back at you.