javascriptのepochを使用してsin波をリアルタイムプロットする #JavaScript

目的

いろんな関数をリアルタイムプロットする

使ったもの

・epoch (javascriptライブラリ: https://epochjs.github.io/epoch/)
この公式サイトからzipファイルをダウンロードして、その中に含まれるtests/real-timeというフォルダに存在するline.htmlをベースに作成しました

結果

時間を変数として動きます

今回使用したコード

realtime_plot.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../css/tests.css">
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
        <script src="../../../dist/js/epoch.js"></script>
        <link rel="stylesheet" type="text/css" href="../../../dist/css/epoch.css">

        <script>
            var nextTime = (function() {
                var currentTime = parseInt(new Date().getTime() / 1000);
                return function() { return currentTime++; }
            })();
        </script>
    </head>
    <body>
        <h1>Real-time Line Plot Test</h1>
        <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> &raquo; Real-time Line</p>
        <ol>
            <li><a href="#test-6">Multi Seires Stream</a></li>
        </ol>

        <!-- Test 6 ------------------------------------------------------------------------->
        <div id="test-6" class="test">
            <h2>6. Multi Seires Stream</h2>
            <p>
                Correctly play / pause a multi series stream of values over the following plots:
                <ul>
                    <li><code>sin(x)</code></li>
                    <li><code>sin(2x)</code></li>
                    <li><code>sin(3x)</code></li>
                </ul>
            </p>
            <div class="epoch"></div>
            <p><button>Play</button></p>
        </div>

        <script>
        // ネットで見つけた正規分布に従う乱数を発生させる関数
        /**
          * 正規分布乱数関数 参考:http://d.hatena.ne.jp/iroiro123/20111210/1323515616
          * @param number m 平均μ
          * @param number s 分散σ^2
          * @return number ランダムに生成された値
         */
        function seiki(m, s) {
          var a = 1 - Math.random();
          var b = 1 - Math.random();
          var c = Math.sqrt(-2 * Math.log(a));
          if(0.5 - Math.random() > 0) {
            return c * Math.sin(Math.PI * 2 * b) * s + m;
          }else{
            return c * Math.cos(Math.PI * 2 * b) * s + m;
          }
        }


        //-------グラフ描写--------------------------------------------
        $(function draw_plot(){
            var data = [
                    {label: 'A', values: []},
                    {label: 'B', values: []},
                    {label: 'C', values: []}
                ],
                length = 40,
                nextIndex = length,
                scale = 0.1,
                playing = false,
                interval = null;

            for (var i = 0; i < length; i++) {
                var x = (i+1) * scale,
                    time = nextTime();
                data[0].values.push({time: time, y:Math.sin(1*time/(2*Math.PI))});
                data[1].values.push({time: time, y:Math.sin(2*time/(2*Math.PI))});
                data[2].values.push({time: time, y:Math.sin(3*time/(2*Math.PI))});
            }

            var chart = $('#test-6 .epoch').epoch({
                type: 'time.line',
                data: data,
                axes: ['right', 'bottom']
            });

            var pushPoint = function() {
                var x = (nextIndex +1) * scale,
                    time = nextTime();
                chart.push([
                    { time: time, y:Math.sin(1*time/(2*Math.PI))},
                    { time: time, y:Math.sin(2*time/(2*Math.PI))},
                    { time: time, y:Math.sin(3*time/(2*Math.PI))}
                ]);
                nextIndex++;
            };

            $('#test-6 button').on('click', function(e) {
                if (playing) {
                    $(e.target).text('Play');
                    clearInterval(interval);
                }
                else {
                    $(e.target).text('Pause');
                    interval = setInterval(pushPoint, 1000);
                    pushPoint();
                }
                playing = !playing;
            });
        })
        </script>
      </body>
  </html>

次回

ロジスティック方程式あたりを書かせてみます
微分方程式を自由に扱えるようになると楽しそうです

参考

D3.jsベースのEpochを使ってリアルタイムチャートを描いてみる
http://4009.jp/post/2015-11-19-realtimechart/