HoloViz-Quarto

The purpose of this project is to make it easy to use the HoloViz ecosystem with Quarto.

Embed the HoloViz Ecosystem

With HoloViz you get access to a large ecosystem of tools for data visualization.

Code

import panel as pn
import pandas as pd

pn.extension(design="material")

gis_1880 = 'https://earthobservatory.nasa.gov/ContentWOC/images/globaltemp/global_gis_1945-1949.png'
gis_2015 = 'https://earthobservatory.nasa.gov/ContentWOC/images/globaltemp/global_gis_2015-2019.png'

swipe = pn.Swipe(gis_1880, gis_2015, height=450, sizing_mode="stretch_width")
pn.Column(
  pn.chat.ChatMessage("Visualize the global temperature 1945-1949 against 2015-2019", user="User"),
  pn.chat.ChatMessage(swipe, user="Assistant"),
)

For more inspiration check out the Panel Component Gallery.

Embed the PyData Ecosystem

With the HoloViz ecosystem you can easily embed the rest of the PyData ecosystem live and interactively in your documentation.

Code

import numpy as np
import panel as pn
import matplotlib.pyplot as plt

pn.extension(design="material")

def plot(factor):
  r = np.arange(0, 2, 0.01)
  theta = factor * np.pi * r
  fig, ax = plt.subplots(
    subplot_kw = {'projection': 'polar'} 
  )
  ax.plot(theta, r)
  ax.set_rticks([0.5, 1.2, 1.5, 2])
  ax.grid(True)
  plt.close(fig)
  return fig

slider = pn.widgets.FloatSlider(value=2, start=1, end=4, step=0.25, name="Factor")
plot = pn.pane.Matplotlib(pn.rx(plot)(slider), tight=True, format="svg", height=400, sizing_mode="stretch_width")
pn.Column(
  slider, plot, sizing_mode="stretch_width"
).embed(max_states=16, max_opts=16)

Create Beautiful Documentation

The HoloViz blog is created with the help of Quarto. Check out the source code here.

The HoloViz Blog