- matplotlib

Random number generation using PyScript

Demo developed by Dr. Tirthajyoti sarkar

Check out the announcement from Anaconda about PyScript framework

Test: Random integers

These are 100 random integers, generated by NumPy

We literally wrote this pure Python code in the HTML file to generate these numbers! If you don't believe us, just right-click and view the source code of this page :-) The only thing to note here is the <py-script></py-script> tags around the code block.

import numpy as np
integers = np.random.randint(0,100,100)
import numpy as np integers = np.random.randint(0,100,100) print(integers)

This is the histogram of those random integers, generated by Matplotlib

You can do all the usual Matplotlib tweaks and tricks with the visualization as you would in a normal Python script or Jupyter Notebook. Here, we have just set the dpi=150 and figsize=(5,2) inside the plt.subplots() function.

This code is inline too i.e., embedded with this HTML. So, feel free to check it out. The last line of the Python code block is just the figure object fig1. This tells the PyScript framework to output the object/image (it detects the type intelligently) to the corresponding div section.

import matplotlib.pyplot as plt fig1,ax1 = plt.subplots(1,1,dpi=150,figsize=(5,2)) ax1.hist(integers,bins=20,edgecolor='k',color='blue') ax1.set_title("Histogram of random integers",fontsize=11) fig1

Changing the image output method

In the next section, we generate histogram based on the type of the distribution that the user (you) choses. We slightly change the output method for this as we grab the div element where we want to display the image and write the figure object with a code like out.write(fig1)

User-defined random variate generation

How many random variates to generate? (if left blank, 10 values will be generated)

Choose the type of distribution you want to generate random variates from

As you expect, every time the button is clicked, you will see a new histogram. All that computation is happening with pure Python code and in your browser!

Adjust the number of random variates

import numpy as np import matplotlib.pyplot as plt out = Element("outputDiv") input_num = Element("how-many") dist_type = Element("dist").value out2 = Element("outputDiv2") def random_num(n): """ """ r = np.random.normal(size=n) return np.array2string(r) def clear(*ags, **kws): out = Element("outputDiv") out.clear() def print_num(*ags, **kws): if input_num.value=='': n = 10 else: n = int(input_num.value) r = random_num(n) out.write(f"Here are {n} random variates from Normal distribution: {r}") def show_dist(*ags, **kws): dist_type = Element("dist").value dist_size = int(Element("slider-num-var").value) fig1,ax1 = plt.subplots(1,1,dpi=150,figsize=(6,4)) fig1.subplots_adjust(hspace=0.25) if dist_type=='Gaussian': data = np.random.normal(size=dist_size) ax1.hist(data,bins=20,edgecolor='k',color='blue') ax1.set_title(f"Histogram of Normal (Gaussian) Distribution \nwith {dist_size} random variates",fontsize=11) out2.write(fig1) if dist_type=='Beta': data = np.random.beta(1,3,size=dist_size) ax1.hist(data,bins=20,edgecolor='k',color='blue') ax1.set_title(f"Histogram of Beta Distribution \nwith {dist_size} random variates",fontsize=11) out2.write(fig1) if dist_type=='Exponential': data = np.random.exponential(0.5,size=dist_size) ax1.hist(data,bins=20,edgecolor='k',color='blue') ax1.set_title(f"Histogram of Exponential Distribution \nwith {dist_size} random variates",fontsize=11) out2.write(fig1)