JSFiddle - React, Tailwind, and code Playground

by turtaniumx

HTML

<link rel="stylesheet" href="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<script src="https://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox"></div>

CSS

#jxgbox {
    width: 500px;
    height: 500px;
}

JavaScript

var brd = JXG.JSXGraph.initBoard('box', 
	{axis: false, 
  boundingbox: [-8,8,8,-8], 
  keepaspectratio: true, 
  zoom: {factorX: 1.05,factorY: 2,wheel: true,needshift: true, min: 1, max: 6},
  zoomY: 3,
  showCopyright:false
  });

var a = brd.create('axis', [[0, 0], [1, 0]], {ticks: {scale: 1*Math.PI, scaleSymbol: 'π;'}});
var a = brd.create('axis', [[0, 0], [0, 1]], {ticks: {scale: 1}});

var f = brd.jc.snippet(
    // the function term
    'sin(x)',
    // wrap a function around it
    true,
    // the parameters to the function
    'x'
);

brd.create('plot', [f]);