« JavaScriptの数値計算ライブラリmathjsを使う(2) 次は複素数演算。四則演算や平方根、べき乗、expなどが簡単にできる。このココログで直接計算できる簡易電卓を作ってみた。 | トップページ | 分数パズルで1を超えてるはずなのに子供がはまる組み合わせを見つけたというのを見て、大人げなく「くもんのはじめての分数パズル」に入っているピースで一番1を超えて一番1に近い組み合わせをPythonで探した。1261/1260=1.000793651が最高。 »

2022年12月 9日 (金)

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

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

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

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

https://plotly.com/javascript/

では早速やってみる。

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

Mathjs12081

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

Mathjs12082

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

<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などが簡単にできる。このココログで直接計算できる簡易電卓を作ってみた。

« JavaScriptの数値計算ライブラリmathjsを使う(2) 次は複素数演算。四則演算や平方根、べき乗、expなどが簡単にできる。このココログで直接計算できる簡易電卓を作ってみた。 | トップページ | 分数パズルで1を超えてるはずなのに子供がはまる組み合わせを見つけたというのを見て、大人げなく「くもんのはじめての分数パズル」に入っているピースで一番1を超えて一番1に近い組み合わせをPythonで探した。1261/1260=1.000793651が最高。 »

パソコン・インターネット」カテゴリの記事

学問・資格」カテゴリの記事

日記・コラム・つぶやき」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

« JavaScriptの数値計算ライブラリmathjsを使う(2) 次は複素数演算。四則演算や平方根、べき乗、expなどが簡単にできる。このココログで直接計算できる簡易電卓を作ってみた。 | トップページ | 分数パズルで1を超えてるはずなのに子供がはまる組み合わせを見つけたというのを見て、大人げなく「くもんのはじめての分数パズル」に入っているピースで一番1を超えて一番1に近い組み合わせをPythonで探した。1261/1260=1.000793651が最高。 »

最近の記事

最近のコメント

2023年2月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28        
フォト
無料ブログはココログ