Pyodide counter and plots

index.html

<div class="container">
  <h1 id="title">Hello, World!</h1>
  <button id="show-counter" disabled>Counter</button>
  <button id="show-plotly" disabled>Plotly</button>
  <button id="show-matplotlib" disabled>matplotlib</button>

  <div id="counter-container">
    <img class="logo" src="https://213d15e2.localpen.pages.dev/localpen/assets/templates/python.svg" />
    <p>You clicked <span id="counter">0</span> times.</p>
    <button id="counter-button" disabled>Loading...</button>
  </div>
  <div id="plotly-plot" class="hidden">Loading...</div>
  <div id="matplotlib-plot" class="hidden">Loading...</div>
</div>

Pyodide_counter_and_plots.md

Pyodide counter and plots

A project created by Hatem Hosny on LocalPen.

script.py3

from js import document
import pandas
import plotly.express as px
import plotly.io as pio
import matplotlib.pyplot as plt

def showPlot(figure, lib = 'plotly', selector = ''):
  el = document.querySelector(selector)
  if selector == '':
    el = document.createElement('div')
    document.body.appendChild(el)
  el.innerHTML = ''

  if lib == 'plotly':
    iframe = document.createElement('iframe')
    iframe.srcdoc = pio.to_html(figure)
    iframe.style = 'border:none;'
    iframe.seamless = 'seamless'
    iframe.scrolling = 'no'
    iframe.height = '525'
    iframe.width = '100%'
    el.appendChild(iframe)

  if lib == 'matplotlib':
    iconStyles = document.createElement('link')
    iconStyles.rel = 'stylesheet'
    iconStyles.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'
    document.head.appendChild(iconStyles)

    def create_root_element(self):
      return el
    
    figure.canvas.create_root_element = type(figure.canvas.create_root_element)(
      create_root_element, figure.canvas.__class__)
    figure.canvas.show()

def showScreen(selector):
  screens = document.querySelectorAll('.container > div')
  for screen in screens:
    screen.classList.add('hidden')
  document.querySelector(selector).classList.remove('hidden')

def counter(ev):
  showScreen('#counter-container')

  counter = document.getElementById('counter')
  button = document.getElementById('counter-button')

  count = 0
  counter.innerHTML = str(count)

  def increment(ev):
      nonlocal count
      count += 1
      counter.innerHTML = str(count)

  button.addEventListener("click", increment)
  button.innerHTML = 'Click me'
  button.disabled = False

df = px.data.iris()

def plotly_plot(ev):
  showScreen('#plotly-plot')

  fig = px.scatter(df, x="sepal_length", y="sepal_width", color="species")
  showPlot(fig, 'plotly', '#plotly-plot') 

def matplotlib_plot(ev):
  showScreen('#matplotlib-plot')
  
  formatter = plt.FuncFormatter(lambda i, *args: df['species'].unique()[int(i)])
  f = plt.figure(figsize=(6, 4))
  plt.scatter(df[df.columns[0]], df[df.columns[1]], c=df['species_id']-1)
  plt.colorbar(ticks=[0, 1, 2], format=formatter)
  plt.xlabel(df.columns[0])
  plt.ylabel(df.columns[1])
  plt.tight_layout()
  showPlot(f, 'matplotlib', '#matplotlib-plot')


title = document.getElementById('title')
name = 'Python'
title.innerHTML = f"Hello, {name}!"

counter_button = document.getElementById('show-counter')
counter_button.addEventListener("click", counter)
counter_button.disabled = False

plotly_button = document.getElementById('show-plotly')
plotly_button.addEventListener("click", plotly_plot)
plotly_button.disabled = False

matplotlib_button = document.getElementById('show-matplotlib')
matplotlib_button.addEventListener("click", matplotlib_plot)
matplotlib_button.disabled = False

counter('')

style.css

.container,
button {
  text-align: center;
  font: 1em sans-serif;
}
.container > button {
    margin: 1em;
}
.logo {
  width: 150px;
}
.hidden {
  display: none;
}