Embeding interactive html files

Hello everyone,

I’m trying to embed an interactive HTML plot into my Obsidian notes and facing some challenges. The plot is generated using R and the plotly package, and I’m hoping to make it viewable directly within Obsidian.

Problem Description

I have created an interactive plot using R’s ggplotly function from the plotly package and saved it as an HTML file using htmlwidgets. Here’s the R code snippet I used:

library(plotly)
p <- ggplot(data, aes(x, y)) + geom_line()  # This is just an example; replace with your actual plot
p_plotly <- ggplotly(p)
htmlwidgets::saveWidget(p_plotly, file.path(fig_dir, "example_figure.html"))

The output is an HTML file that I would like to embed directly into an Obsidian note so that it can be interacted with, similar to how one might interact with it in a web browser.

Things I Have Tried

  1. Embedding with Iframe: I attempted to embed the HTML using an iframe in my markdown file like so:
<iframe src="file:///C:/path/to/example_figure.html" style="width:100%; height:500px;"></iframe>

However, this only creates a blank frame without displaying the content.

Custom Frames Plugin : I tried using the Custom Frames plugin with the following configuration:

frame: example_figure.html

Unfortunately, I encountered errors stating “Couldn’t find a frame with name example_figure.html”.

Questions

  1. Has anyone successfully embedded interactive HTML within their Obsidian notes? If so, what method did you use?
  2. Are there any settings or plugins that I might need to adjust to allow for local HTML content to be displayed correctly?
  3. Any tips on security settings or iframe configurations that might be blocking the content from being displayed?