How do I get my plotly to render correctly in a quarto document?

[saulpink]

Description

I made an interactive map using ggplotly() for a report I'm making on Quarto in RStudio. I have it saved in my directory under "figures/community_areas_shootings_plotly.html"

I'm trying to embed it in Quarto but it won't render correctly. Instead, the code shows up as text in the document.

{embed: src="figures/community_areas_shootings_plotly.html"}
#> Error in embed:src = "figures/community_areas_shootings_plotly.html": could not find function ":<-"

^{Created on 2023-12-05 with reprex v2.0.2}

CC: If there's a better way to embed a ggplotly into a Quarto let me know!

Repo: https://github.com/stat301-1-2023-fall/final-project-1-saulpink

[mcanouil]

Your Git repository link is not valid.

Could you share a small self-contained "working" (reproducible) example to work with, i.e., a complete Quarto document or eventually a Git repository? Thanks.

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

![A placeholder image](https://placehold.co/600x400.png)

The end.
````

[mcanouil]

Indeed, but here it does not seem to be the use case and without reproducible example, we can't really assume what's wrong.

[saulpink]

Sorry the GitHub repo link should work now, though the project is work in progress: https://github.com/stat301-1-2023-fall/final-project-1-saulpink.

The Quarto I'm trying to put the plotly in is Pink_Saul_final_report.qmd and the plotly is in the R Script 1_bivariate_spatial_beats.R. The plotly is also saved under "figures/community_areas_shootings_plotly.html".

Thank you!

[mcanouil]

https://github.com/stat301-1-2023-fall/final-project-1-saulpink/blob/main/Pink_Saul_final_report.qmd#L71C1-L71C61

What's that supposed to be? This is definitely not Quarto.
Since your Quarto document already include computation, why computing the figure and exporting it as HTML instead of simply run plotly code from within the Quarto document? What's the reason/goal here?

if you intend to include/embed HTML code inside another HTML document, then the question has nothing to do with Quarto (or almost):

1. use usual HTML such as iframe, etc.
2. read the plotly html as text and output it in a code cell with output: asis
3. whatever other ways

But all the above are simply ugly workaround of having plotly code inside the Quarto document in the first place which works out of the box without any trouble.

None of your script seems to take a long time to run and are mostly composed of figure code and some export.
This make me wonder why not use Quarto as its main goal is to allow to render reports using literate programming? Using fully Quarto would make your life way easier and your project a lot cleaner as you wouldn't have those R scripts, those plotly html, files, etc.

If you could explain what's the rationale behind that setup, it would help understand and maybe offer better support.

[saulpink]

The rationale is that its required to use R scripts for a class project! When I tried to render it directly in the code chunk, I kept getting an error, which is why I resorted to HTML. Here's the code:

#| label: community-areas-plotly

community_area_shootings_spatial <- st_read("data/community_area_shootings_spatial.csv")

# create map
community_areas_shootings_map <- community_area_shootings_spatial |> 
  mutate(community_area = toTitleCase(as.character(community))) |>
  ggplot() +
  geom_sf(aes(fill = total_homicides, geometry = geometry, text = paste("Neighborhood:", community_area, "<br>Homicides:", total_homicides)),
          color = "gray", size = 0.1) +
  scale_fill_viridis_c() +
  facet_wrap(~ time_period) +
  labs(title = "Homicides in Chicago by Neighborhood from 1993 to 2022",
       subtitle = "More homicides on South Side, West Side in all years",
       fill = "Total homicides") +
  theme_void()

# final plotly
community_areas_shootings_plotly <- ggplotly(community_areas_shootings_map, tooltip = "text")

community_areas_shootings_plotly

I get an error that says the geometry setting is missing, but even when I add that in, it still doesn't render.

[mcanouil]

Because it is a class project, I personally won't debug your R code for you.
So as I said, either use the methods I described (mostly HTML based solution) or provide a small reproducible example that is not your class project.