Integration of Plotly, Mathjax and p5.js in a web page

by

There are a lot of powerful Javascript library to use in a web application. I usually use Plotly.js, Mathjax.js, Math.js and p5.js in a web page. Here is how to integrate them to a web page together. All of them are free and open source code. The first step is to load the library in the web page.

<script src='js/plotly-latest.min.js'></script> 
<script id="MathJax-script" async src="js/tex-mml-chtml.js"></script>
<script  src="js/jquery-3.5.0.min.js"></script>
<script  src="js/math.js"></script>
<script  src="js/p5.min.js"></script>

Plotly.js

It is built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps. Here is the main steps,

  • Create a div layer with a id as a container of the figure.
  • Prepare the layout information to set the size, axis and title.
  • Prepare the corresponding traces.
  • Plot the traces by calling the Plotly.react method.
function plot(data){
	var layout = {
	uirevision:'true',
	width: 700,
	height:500,

	xaxis: {title:"z(mm)",autorange: true},
	yaxis: {title:"V(z)", autorange: true}
};
	 data= {
  x: data.t,
  y: data.v,
  name:"vlasov",
  type: 'scatter'
};

Plotly.react("div_id", [data],layout,{displaylogo: false});
}

Mathjax.js

MathJax is an open-source JavaScript display engine for LaTeX, MathML, and AsciiMath notation that works in all modern browsers, with built-in support for assistive technology like screen readers. The default configuration is enough to use. It renders the Latex maths automatically when the page is loaded. When it is necessary to render them again, call MathJax.typeset() methed.

p5.js

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! The main steps to integrate are

  • Create a div layer as a container for the plot.
  • Create a sketch object for this library.
  • Create a p5 object. The setup function is called when create the p5 object.
  • Re-draw the figure by calling setup method.
  var sketch = function(p) {
    p.setup = function(){
      p.createCanvas(500, 500);
	  
      p.background(0);
	  p.circle(250,250,window.R*10);
	 
    }
  };


if(p5s){
p5s.setup();
}else
{
p5s=new p5(sketch, 'container');
p5s.noLoop();
}

If there is only one p5 canvas, it is much simpler:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p5.js in a Div</title>
    <!-- Include the p5.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
</head>
<body>
    <div id="container1">This is container 1</div>
    <div id="canvasContainer">This is where the p5.js canvas will go</div>
    <div id="container2">This is container 2</div>

    <script>
        function setup() {
            // Create a canvas of size 400x400 pixels
            let canvas = createCanvas(400, 400);
            // Place the canvas inside the div with id "canvasContainer"
            canvas.parent('canvasContainer');
        }

        function draw() {
            background(220);
            ellipse(mouseX, mouseY, 50, 50);
        }
    </script>
</body>
</html>

Formula builder

Formula builder is a power tool to realize the physical formula. The basic routines are covered in the main program. Here is the guide to integrate p5 or plotly.

  • Fill the lib field with p5, plotty or p5 | plotly
  • Write a javascript file whose name is the file field in the userjs directory
  • Realize the plot() function or sketch function

Leave a Comment