Sympy plot in a pyscript environment not showing on web screen

397 Views Asked by At

Python Sympy running in a pyscript environment is not displaying init_printing(use_unicode=True) characters, for example a √ symbol", nor integrated sympy "plot" function.

I've added py-env statements for matplotlib and numpy libraries, but still getting a blank screen. The browser console log doesn't show any run-time error messages.

Something seems to be missing in the Javascript libraries to activate Latex "MathJax", or HTML5 "mathml" visualization in order to print expressions with graphical math notation and visual output similar to Jupyter. I'm using Chrome Beta browser Version 101.0.4951.34 for Linux and tested it with "MathJax" (.js) and the "print_mathml" (sympy) printing command.

My code sample:

    <html>
  <head>
    <title>Math Notation with Sympy</title>
    <meta charset="utf-8">

    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
   
    <py-env>
- sympy
- matplotlib         
    </py-env>
    </head>
    <body>
      <div id="sym"></div>
      <py-script output="sym">  
# docu for printing: https://docs.sympy.org/latest/tutorial/printing.html  
# error: output does not show as formated Latex, or Unicode notation            
from sympy import *       
x, t, z, nu, pi = symbols('x t z nu pi')
init_printing()
Integral(sqrt(1/x), x) 
# pi # same error as above         
# pprint(N(sqrt(2)*pi)) # same error as above          
      </py-script>       
    </body>
</html>

I've updated the to latest Chrome browser beta at Version 102.0.5005.40 (Official Build) beta (64-bit) - Linux Ubuntu, using your code snippet getting an output, but without a valid math formatting. The output shown is somehow truncated, like this: / | | ___ | / 1 | / - dx | / x | / At the developer console I see an ASCII formatted output being written into the "sym" div. Would be nice if there is a way to redirect into a MathML or MathJax procedure which produces a well formatted math notation. Below the inspect:

<div id="sym" class="mathjax"><div id="sym-1">...</div>
<div id="sym-2">
</div><div id="sym-3">$$\int \sqrt{\frac{1}{x}}\, dx$$</div>
<div    id="sym-4">
</div></div>

Wonder why the id="sym-3" div section generated by pyscript is not rendering any LATEX math notation at the Chrome browser, even after loading the MathJax script. It might be related to a Div section inside another Div?

1

There are 1 best solutions below

1
On BEST ANSWER

Using pprint it works for me (Chrome 101.0.4951.54).

EDIT: It does look prettier in jupyter notebook, however.

<html>
    <head>
      <title>Math Notation with Sympy</title>
      <meta charset="utf-8">
  
      <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
      <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

      <py-env>
- sympy
- matplotlib         
      </py-env>
      </head>
      <body>
        <div id="sym"></div>
        <py-script output="sym">  
from sympy import symbols, init_printing, Integral, sqrt, pprint    
x, t, z, nu, pi = symbols('x t z nu pi')
pprint(Integral(sqrt(1/x), x))
        </py-script>       
      </body>
  </html>