[blocks新着] d3によるフーリエ級数の視覚化

jinroh氏によるhttp://bl.ocks.org/への投稿です。
[Fourier series visualisation with d3.js.]

フーリエ級数は級数展開の一種で、ある(複雑な)関数を単純な関数の和として表す方法です。理系の学生なら大学一年生次に出会って悩まされるはずです(悩まない人もいるでしょうけど私は悩みました)。

jinroh氏のサンプルはd3を使ってこの級数展開を視覚化したものです。以下は同サンプルの6つの例のスナップショットです。元サイトでは実際にこれが動いていますので、ぜひご覧になってフーリエ級数を視覚的に理解しましょう。

[square(矩形)]

[triangle(三角)]

[sawtooth(のこぎり)]

[fibonacci(フィボナッチ)]

[pulse(パルス)]

同ページ下部にはソースコードも掲載されていますので、D3自体に興味のある人は追っかけてみるか、そのまま index.html にコピペしていじってみるとよいと思います。表示には(D3だから当然ですが) html5 対応のモダンブラウザが必要です。下記のようにコントロールの form/input タグに html5 の number/range タイプが使われています。

  <input id="size" type="number" value="6" min="1" max="40" step="1">
  <input id="freq" type="range" value="0.3" min="0.01" max="0.5" step="0.01">

また、変数にユニコード文字( πやτ )も使われていますので、ファイルのエンコードはutf-8にしないと動作しないと思います。

  (function() {
  "use strict";

  var π = Math.PI
  var τ = 2 * Math.PI

charset も utf-8 指定です。

  <meta charset="utf-8">

D3らしく、関数オブジェクトをガンガン投げ合ったりクロージャを使ってますので、コードを追うのは多少骨が折れるでしょう。私は早々にあきらめました(^ε^)

  function toggle(callback) {
   // 関数内の変数はすべて関数オブジェクト
   var tran;
   tran = (draw === drawGraph) ? hTransform : gTransform;
   draw = (draw === drawGraph) ? drawHisto : drawGraph;
   coeff().transition()
      …
      .each("end", once(callback));
   }

   function once(fn) {
      var exec = false;
      return function() {
         if (exec) return;
         exec = true,
         fn && fn();
       };
   }


コメントを残す


− 3 = 二