'Sympy plot in a pyscript environment not showing on web screen

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?

htmlprintingsympymathjaxpyscript


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 FredMaster

Related Questions