flotでグラフ描画 (1)

JavaScript

Javascriptのライブラリのflotを使ってグラフを描いてみる。図の見栄えはともかく、インタラクティブに図の大きさを変えたりできるのがいいかもしれない。

テストとして、ローレンツ・アトラクタの計算と描画を行う。
下のようにhtmlを記述し、ブラウザで読み込んだだけ。時間積分法はオイラー陽解法でざっくり行い、x-y平面へプロットする。描くだけなら簡単だな。
久しぶりすぎて、Firebugの使い方を忘れている自分に気づく...。

x-z平面だとこんな感じ。

y-z平面だとこう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <!--[if IE]><script language="javascript" type="text/javascript" src="js/excanvas.pack.js"></script><![endif]-->
  <script language="javascript" type="text/javascript" src="../jquery.js"></script>
  <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<div id="placeholder" style="width:600px;height:600px"></div>

<script id="source" language="javascript" type="text/javascript">
$(function () {
       var pconst = 10.0;
       var rconst = 28.0;
       var bconst = 8.0/3.0;
       var ncont = 50000;
       var xval = 1.0;
       var yval = 1.0;
       var zval = 1.0;
       var dt = 0.002;
       var d1 = [];
       for (var i=0; i<ncont; i+= 1) {
           xval += dt*(-pconst*xval + pconst*yval);
           yval += dt*(-xval*zval + rconst*xval - yval);
           zval += dt*(xval*yval - bconst*zval);
           d1.push([xval, yval]); 
       }
	$.plot($("#placeholder"),[ d1 ]);
});
</script>

</body>
</html>