About

print("This is a test.")

This is a test.

My header

huip

for ii in range(10):
  print("This is a test.")

This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.



bhipbhio



print("This is a test.")

This is a test.

This is a test.

This is a test.

while True print('Hello world')

  Cell In[8], line 1
    while True print('Hello world')
               ^
SyntaxError: invalid syntax

note = "Python syntax highlighting"
print(node)

note = "Python syntax highlighting"
print(note)

Python syntax highlighting

Ice Cream Picker

<py-config>
  packages = ["matplotlib", "pandas"]
</py-config>

<py-script>
  import js
  import pandas as pd
  import matplotlib.pyplot as plt

  from pyodide.http import open_url
  from pyodide.ffi import create_proxy

  url = (
      "https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv"
  )
  ice_data = pd.read_csv(open_url(url))

  current_selected = []
  flavour_elements = js.document.getElementsByName("flavour")

  def plot(data):
      plt.rcParams["figure.figsize"] = (22,20)
      fig, ax = plt.subplots()
      bars = ax.barh(data["name"], data["rating"], height=0.7)
      ax.bar_label(bars)
      plt.title("Rating of ice cream flavours of your choice")
      display(fig, target="graph-area", append=False)

  def select_flavour(event):
      for ele in flavour_elements:
          if ele.checked:
              current_selected = ele.value
              break
      if current_selected == "ALL":
          plot(ice_data)
      else:
          filter = ice_data.apply(lambda x: ele.value in x["ingredients"], axis=1)
          plot(ice_data[filter])

  ele_proxy = create_proxy(select_flavour)

  for ele in flavour_elements:
      if ele.value == "ALL":
        ele.checked = True
        current_selected = ele.value
      ele.addEventListener("change", ele_proxy)

  plot(ice_data)

</py-script>

<div id="input" style="margin: 20px;">
  Select your 🍨 flavour: <br/>
  <input type="radio" id="all" name="flavour" value="ALL">
  <label for="all"> All 🍧</label>
  <input type="radio" id="chocolate" name="flavour" value="COCOA">
  <label for="chocolate"> Chocolate 🍫</label>
  <input type="radio" id="cherrie" name="flavour" value="CHERRIES">
  <label for="cherrie"> Cherries 🍒</label>
  <input type="radio" id="berries" name="flavour" value="BERRY">
  <label for="berries"> Berries 🍓</label>
  <input type="radio" id="cheese" name="flavour" value="CHEESE">
  <label for="cheese"> Cheese 🧀</label>
  <input type="radio" id="peanut" name="flavour" value="PEANUT">
  <label for="peanut"> Peanut 🥜</label>
</div>

<py-repl>
  ice_data
</py-repl>

<div id="graph-area"></div>

Ice Cream Picker

<py-config>
  packages = ["matplotlib", "pandas"]
</py-config>

<py-script>
  import js
  import pandas as pd
  import matplotlib.pyplot as plt

  from pyodide.http import open_url
  from pyodide.ffi import create_proxy

  url = (
      "https://raw.githubusercontent.com/Cheukting/pyscript-ice-cream/main/bj-products.csv"
  )
  ice_data = pd.read_csv(open_url(url))

  current_selected = []
  flavour_elements = js.document.getElementsByName("flavour")

  def plot(data):
      plt.rcParams["figure.figsize"] = (22,20)
      fig, ax = plt.subplots()
      bars = ax.barh(data["name"], data["rating"], height=0.7)
      ax.bar_label(bars)
      plt.title("Rating of ice cream flavours of your choice")
      display(fig, target="graph-area", append=False)

  def select_flavour(event):
      for ele in flavour_elements:
          if ele.checked:
              current_selected = ele.value
              break
      if current_selected == "ALL":
          plot(ice_data)
      else:
          filter = ice_data.apply(lambda x: ele.value in x["ingredients"], axis=1)
          plot(ice_data[filter])

  ele_proxy = create_proxy(select_flavour)

  for ele in flavour_elements:
      if ele.value == "ALL":
        ele.checked = True
        current_selected = ele.value
      ele.addEventListener("change", ele_proxy)

  plot(ice_data)

</py-script>

<div id="input" style="margin: 20px;">
  Select your 🍨 flavour: <br/>
  <input type="radio" id="all" name="flavour" value="ALL">
  <label for="all"> All 🍧</label>
  <input type="radio" id="chocolate" name="flavour" value="COCOA">
  <label for="chocolate"> Chocolate 🍫</label>
  <input type="radio" id="cherrie" name="flavour" value="CHERRIES">
  <label for="cherrie"> Cherries 🍒</label>
  <input type="radio" id="berries" name="flavour" value="BERRY">
  <label for="berries"> Berries 🍓</label>
  <input type="radio" id="cheese" name="flavour" value="CHEESE">
  <label for="cheese"> Cheese 🧀</label>
  <input type="radio" id="peanut" name="flavour" value="PEANUT">
  <label for="peanut"> Peanut 🥜</label>
</div>

<py-repl>
  ice_data
</py-repl>

<div id="graph-area"></div>