using jupyter notebook on quarto website

While quarto allows code in qmd files, it is easier to write it in jupyter notebooks. In this post, I am using jupyter notebook to do it.

Once we open a jupyter notebook, we can choose to add a code block or markdown block.

at the beginning of the document, insert a markdown block and write the usual yaml you write on the .qmd, like title: date: etc.

this one is the next markdown block.

A couple of days back, I started drawing geometric art, starting with one mandala that has 24 circles drawn around a central circle. Here is a photo.

Then I thought of writing some code for it. What followed was an exploration of matplotlib and I ended up with this code.

write #|code-fold: true on top to fold the code.

import numpy as np
import matplotlib.pyplot as plt
import random

#function generated random hexcolor. just looks good. 

def random_hex_color():
    return "#{:06x}".format(random.randint(0, 0xFFFFFF))

figure, axes = plt.subplots()
r = 10
draw_center_circle=plt.Circle((0,0),10, fill=False, edgecolor='white')

# Draw 24 circles with random colors
for i in range(24):
    theta = i * (2 * np.pi / 24)
    x1 = r * np.cos(theta)
    y1 = r * np.sin(theta)
    color = random_hex_color()

    draw_circle = plt.Circle((x1, y1), r, fill=True, edgecolor='black',facecolor=color,alpha=0.1)
    axes.add_artist(draw_circle)


axes.add_artist(draw_center_circle)

axes.set_aspect(1) # set aspect ration
#limits of the display
axes.set_xlim(-2*r, 2*r)
axes.set_ylim(-2*r, 2*r)

# Hide axes labels
axes.set_xticks([])
axes.set_yticks([])

# Remove the border
for spine in axes.spines.values():
    spine.set_visible(False)

plt.show() # displays the plot. very important. 

one more thing - I am posting this under til. the listing page for this is generated from an index.qmd and it was coded to list .qmd. Now, I had to go add .ipynb to that so a jupyter notebook also displays properly.

That’s it. Jupyter notebook on quarto website!

I have not found a way to preview this like we preview .qmd files. Just going to publish and see!