Interactive reports are powerful ways to communicate complex data and detailed insights. They combine narrative text with interactive maps and visualizations that allow the user to drill down into the data. To share an interactive report, you will write the report in Markdown and include HTML assets, then convert the entire thing to HTML. If you can get all of the HTML in one file, you can share the `.html` file directly with users, it will simply open in their browser. If not, you can either zip the repository to share it (I've found users get a bit uncomfortable at this stage) or find a way to host the repository. See the Guatemala EDA Report ([repo](https://github.com/eriktuck/guatemala-eda-report) and [page](https://eriktuck.github.io/guatemala-eda-report/)), LST Crop Stress Indicator ([repo](https://github.com/eriktuck/lst-crop-stress-capstone) and [page](https://eriktuck.github.io/lst-crop-stress-capstone/)) or the private repository `pocket_projects/dwr-interactive-report` for good examples with both maps and interactive visualizations. ## Markdown to HTML Write the report as you would otherwise with placeholders for interactive elements. Create plots and maps as [[HTML]] and save with descriptive names into a folder `assets`. You'll need a library like [[Plotly]] that supports HTML exports. Use IFRAME to embed the HTML in the Markdown document where desired. ```Markdown <iframe height=500 width=100% src='assets/project-map.html'></iframe> ``` Use a Markdown editor (like [[Typora]]) or converter (like [[nbconvert]] to save the Markdown file as HTML. You'll need to share the HTML file and the `assets` directory together for your user to access the report. Alternatively, you can host the repo on [[GitHub pages]]. It is also possible to save the interactive elements directly in the Markdown file. Instead of an IFRAME, you essentially embed the entire file. Note that each file likely imports or contains some [[JavaScript]], so you'll want to cleanly import once rather than have duplicate imports of the same libraries for each DIV. ## Creating HTML assets Use a library that is capable of producing HTML outputs to create any maps and visuals. I recommend [[Plotly]]. Find guidance for creating HTML outputs in Plotly at the help file [Plotly HTML Exports](https://plotly.com/python/interactive-html-export/). [[Folium]] and [[ipyleaflet]] are useful alternatives for maps. ## Hosting Technically any static-site hosting service will be able to host a basic interactive report. You can find a variety of options online. The simplest is [[GitHub pages]]. ## notebook viewers Because we're basically working with Markdown and code, the [[Jupyter Notebook]] is an ideal solution. You can use either Google Colab or nbviewer to host notebooks online. ### Google Colab [[Google Colab]] is a free hosted notebook solution, which combines Markdown and code. You can create maps and visuals in the notebook and share the link with users. At most, the users will need to hit Run > Run All to reproduce the visuals. The downside is that data assets must be added directly to the Colab environment through a file picker by your user. Otherwise you could serve raw data elsewhere (like GitHub) and read it into the notebook. ### nbviewer [nbviewer](https://nbviewer.org/) can render any notebook stored on GitHub. ## data-driven web app An interactive report should be far less complex than developing a [[data-driven web app]], however its possible to go this route. Using [[Google Apps Script]] to develop a [[web app]] is a good approach. See also other [[options for deploying data-driven web apps]].