radioactive decay (lambda)

by pedritomelenas

HTML

<!-- Include JSXGraph -->
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<!-- Include MathJax -->
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.js"></script>

<!--change width at your will; now set to 50% of the text area-->
<div id="jxgbox" class="jxgbox" style="width:80%; aspect-ratio:1/1; margin: auto; border: 0pt solid black;">
</div>

JavaScript

// Enable MathJax for all JSXGraph elements!
// Use '\\( ... \\)' or '\\[ ... \\]` for LaTeX math text
JXG.Options.text.useMathJax = true;
function decay_lambda(divID){
  const board = JXG.JSXGraph.initBoard(divID, {
      boundingbox: [-12, 120, 200, -30],
      axis: true,
      showCopyright: false,
      keepaspectratio: true,
      showNavigation: false,
      defaultAxes: {
          x: { name:"\\(x\\)", withLabel:"true", label: {position: 'rt', offset: [-15, 10], anchorX: 'right'}, ticks: { visible: true, majorHeight: 5 } },
          y: { withLabel: true, name: '\\(y\\)', label: { position: 'rt', offset: [20, -15], anchorX: "right", anchorY: 'top' }, ticks: { visible: true, majorHeight: 5 } }
      },
      pan: { enabled: true },      // Disable pan for 3D view
      zoom: { enabled: true }      // Disable zoom for 3D view
  });

  const zero = board.create('point', [0, 0], { name: 'O', size: 3, color: 'black', visible: false });
  const positivey = board.create('segment', [[0, 0], [0, 120]], {visible: false });
  const glambda = board.create('segment', [[20, -25], [60, -25]], {visible: true });

  const pointa = board.create('glider', [0, 60,positivey], { name: "\\(N_0\\)", size: 3, color: 'red', showInfobox: false});
  const pointb = board.create('glider', [21.8, 20,glambda], { name: '\\(\\lambda\\)', size: 3, color: 'red', showInfobox: false});

  const pointc = board.create('glider', [0, 30,positivey], { name: "", size: 3, color: 'red', showInfobox: false});


  let lambda=()=>(pointb.X()-20)/80;

  const decay = board.create("functiongraph",[(x)=>pointa.Y()*Math.exp(-lambda()*x),0,200], {strokeColor:'black', strokeWidth:2, name:()=>"\\(N(t)="+pointa.Y().toFixed(2)+"\\ e^{-"+lambda().toFixed(3)+"t}\\)", withLabel:true,
      label: {
          // anchorX: 'middle',
          // anchorY: 'middle',
          offset: [30, 30],
          fontSize: 14,
          distance: 0.5,
          position: '60% right'
      }
...