JavaScriptの数値計算ライブラリmathjsを使う(3) Plotlyを併用して関数をグラフ表示する。ココログでもグラフ表示できるようになった。

さて今回は3回目。数値計算の例に進む前にグラフ表示したいな、、、と思ったらmath.jsの例題にあった。

https://mathjs.org/examples/browser/plot.html.html

Plotly.jsというのを使うのか。これは便利そう。

https://plotly.com/javascript/

では早速やってみる。

ソースコードはこんな感じにして（例題とはちょっと変えている。あとevent.preventDefault()を使わないとグラフがすぐ消えた）。

テキストボックスに式を入力してボタンを押すとグラフを描いてくれる。

テキストでもソース置いときます。

<div>

  <label for="eq1208">描画したい式:</label>

  <input type="text" id="eq1208" value="4 * sin(x) + 5 * cos(x/2)">

  <button id="submit1208">描画</button>

</div>

<div id="plot1208"></div>

<script src="https://unpkg.com/mathjs@11.4.0/lib/browser/math.js"></script>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<script>

  const button1208 = document.querySelector("#submit1208")

  button1208.addEventListener('click',draw1208)

  function draw1208(event) {

    event.preventDefault()

    const expression = document.querySelector('#eq1208').value

    const expr = math.compile(expression)

    const xValues = math.range(-10, 10, 0.1).toArray()

    const yValues = xValues.map(function (x) {

        return expr.evaluate({x: x})

        })

      const trace1 = {

        x: xValues,

        y: yValues,

        type: 'scatter'

      }

      const data = [trace1]

      Plotly.newPlot('plot1208', data)

    }

</script>

でココログでこれが使えるようにしたのが以下。好きな式を書いて描画ボタンを押してみよう。

描画したい式: 描画

過去のもの

JavaScriptの数値計算ライブラリmathjsを使う(1)　まずは行列演算。LU分解で一次方程式を解き、逆行列と行列式を求める。このココログで直接計算できる機能も付けた。 JavaScriptの数値計算ライブラリmathjsを使う(2)　次は複素数演算。四則演算や平方根、べき乗、expなどが簡単にできる。このココログで直接計算できる簡易電卓を作ってみた。