How the Pros showcase their data projects
Publish an interactive website in under 1 hour with Quarto and Python (no web coding experience needed)
Leading media platforms and data journalists embed their data visualizations and dashboards as websites. For example, check out Nate Silver’s presidential polling model or The Economist’s interactive Big Mac Index.
There are several key benefits of doing this:
Accessibility: Publishing on a website is the easiest way for your audience to access your work—you just need the URL link.
Engagement: Leverage interactive plots and storytelling tools.
Reproducibility and automation: Plots and tables are embedded in your report and directly linked to the code, so any updates to the model or data are instantly reflected.
Today, I’m going to show you how to easily create a website or landing page from your Python code with Quarto and GitHub. No prior knowledge of web coding is needed.1
I was able to convert my housing demographic plots into this basic website in under an hour with just these tools. You can find the GitHub repo for the website here.
Autonomous Econ aims to empowers analysts who work with economic data by equipping them with Python and data science skills. The content aims to boost their productivity through automation and transform them into savvier analysts.
Posts will roughly be split between practical guides (80 percent) and data journalism pieces where I demonstrate the tools (20 percent).
If you find the content valuable, please consider becoming a free subscriber by clicking on the button below.
What makes this approach so simple?
The Quarto package embeds your Python code and renders your plots and tables into your website. It also works for R and Julia.
The content within the website is controlled via a Quarto Markdown file (.qmd). It combines the simplicity of Markdown syntax with the ability to include executable Python code. Markdown syntax lets you write text, create headings, lists, links, images, tables, and more.
GitHub hosts your code and website for free via GitHub Pages. The service is free, and you even have the option to use a custom domain.
If you have any data visualization written in Python, just paste it as a code block in the .qmd file. When you run quarto render, it will create a docs folder containing all the static HTML files needed for the website.
Then, you simply point your GitHub Pages settings to the docs folder, and GitHub will automatically deploy your website every time you push changes.
Quarto lets you create engaging data stories exclusively with Python
Professionals use JavaScript-based tools to produce interactive websites, which have a steep learning curve. These would be great to learn at some point, but what if I’m a Python user and need a website today?
With Quarto, you can transform your website or landing page and make it look professional exclusively with Python.
For example, you can create the following elements with Python packages:
Interactive plots and tables using Python packages like Plotly and Altair
Interactive maps with Leaflet
Interactive dashboards using Plotly dash
The website will also display the code blocks for each element, which makes it reproducible and educational for your audience (there is also the ability to hide this). Plus, you can add convenient links (with Markdown) to download the source data for each plot, making your analysis more transparent.
For my housing demographics dashboard, I used Plotly for interactive charts. The site already looks great out of the box, but you can easily enhance it with pre-built website themes.
It should be noted that Quarto can be used not only for websites but also for presentations and documents, including academic papers with LaTeX and portfolio sites.
Run your dashboards on autopilot
A standard way of sharing data visualizations on a regular basis is to generate your plots locally and then upload or paste image files to a website or PDF document. This requires a lot of manual effort each time and makes it difficult to know exactly which version of the code was used to generate the visualization.
With Quarto and GitHub, every time you make a change to your project and push it to the repository, your website will redeploy with the updates. This means no more messing around with manually uploading plots.
Since GitHub tracks the version history of your code, you can identify the specific code version that was used to deploy each iteration of your website.
GitHub allows you to schedule your website deployments via GitHub Actions, which opens up another powerful workflow—full automation. If your data can be retrieved with a script, then you can schedule a GitHub Action to update the data, model, and visualizations at set intervals (e.g., daily, weekly, monthly).
Stay tuned for a tutorial in a future post.
A minimal example of Quarto with Plotly
Here, I will give a step-by-step walkthrough of how you can create a Quarto-generated website with an interactive Plotly chart. Plotly is great for out-of-the-box interactive time-series charts that are well-suited to economic and financial data—see my previous post here.
My steps assume that you are using VSCode as your code editor, which also happens to be well supported by Quarto. Check out my tutorial below if you are new to code editors.
You should also use virtual environments and have a GitHub repo when setting up your project. You can find my full guide below on how to do this as well.
(1) Download Quarto and install Python packages
First, download Quarto for your machine from their website. Next, download the Quarto extension in VS Code. The extension includes some handy shortcuts and allows you to preview your website locally.
For this demo, you will also need to pip install the Pandas, Matplotlib, and Plotly packages in your virtual environment.
(2) Create your project
Create a new project in GitHub and clone it locally before opening it in VS Code.
Add a new file called s&p.qmd and paste the code snippet at the bottom of this post into the file.
Then, create a _quarto.yml file with the configurations below. This will ensure that the HTML files are rendered into a directory called docs.
Add a .nojekyll file to the root of your repository to prevent GitHub Pages from processing your site with Jekyll. You can do this by running the command below in your terminal.
(3) Render website and push to GitHub
Now render the website by running the command below in your terminal window. This will create the necessary files for your website in a new docs folder.
Next, add the docs folder along with the .qmd file, and commit and push them to the GitHub repo.
(4) Configure GitHub Pages and deploy
Go to the Settings → Pages tab of your repository and configure your GitHub repository to publish from the docs directory of your main branch.
Once this is done, go to the Actions tab, and you should see the build and deploy process start.
Once the deployment process is complete, you will see the URL link for your website, and it should look like the page below. It’s a pretty basic site, but the design possibilities are endless.
Code snippet for s&p.qmd file
At the top of the file there is a YAML block with document level options. Code-fold determines if the code for each plot is added above the chart. The Python code is then added in the next block.
---
title: "S&P 500"
format:
html:
code-fold: true
jupyter: python3
---
S&P500 since year 2000, see @fig-sp.
```{python}
#| label: fig-sp
#| fig-cap: "S&P500<br>Source: Alpha Vantage"
import pandas as pd
import plotly.graph_objs as go
# URL of the raw CSV file from GitHub
url = 'https://raw.githubusercontent.com/martingeew/finance_dashboard_demo/main/sp500_20240825.csv'
# Read the CSV file into a DataFrame
df = pd.read_csv(url, index_col=0)
def plot_daily(df):
fig = go.Figure()
fig.add_trace(
go.Scatter(
x=df.index,
y=df["close"],
mode="lines",
name="S&P 500 Close",
hovertemplate="%{x|%Y-%m-%d}<br>Close: %{y:.2f}<extra></extra>",
)
)
fig.update_layout(
title="Daily S&P 500 Closing value",
xaxis_title="",
yaxis_title="",
template="plotly_dark", # Use the dark mode template
)
fig.show()
plot_daily(df)
```
Very cool! Is Quarto really necessary, though, to share plotly python charts online—can't you simply embed the plotly code into an iframe?
I’ve been curious about Quarto and this breaks it down so well, thank you sir!