２次元・３次元格子データのグラフ描画クラス「Graph.js」

文責：遠藤理平
公開日：2016年03月23日
最終更新日：2016年03月25日

グラフの例

「Graph.js」の概要

「Graph.js」は、多重配列で与えた２次元格子／３次元格子上の値を２次元カラーマップや３次元グラフ、３次元カラーマップとして、ウェブブラウザ上で可視化することのできるライブラリです。以下の書籍を元に開発を行いました。
・three.jsによるHTML5 3Dグラフィックス　〈上〉
・three.jsによるHTML5 3Dグラフィックス　〈下〉

動作環境

HTML5が動作する最新ウェブブラウザ。ただし、一部の機能は「Google Chrome」のみで動作。
◎ Google Chrome 48（全機能動作）
◎ Opera 26（全機能動作）
◯ Mozilla Firefox 32（動画生成不可）
△ Internet Explorer 11（動画生成不可・画像ダウンロード不可）

ライセンス

MIT licenseの元、変更、再配布、商用利用などによる利用を認めます。
Copyright (c) 2016 Rihei Endo
Released under the MIT license
http://opensource.org/licenses/mit-license.php

対応グラフ描画の一覧

２次元カラーマップ描画用「Colormap2Dクラス」

２次元格子上のスカラー量を色で表現するのが２次元カラーマップです。

２次元カラーマップの例

三角関数の積　「z = sin(x) × cos(y)」　の描画結果です。

※実際のサンプルはこちらをご覧ください

２次元カラーマップの描画例の動画

※実際のサンプルはこちらをご覧ください

３次元カラーマップ（Colormap3Dクラス）

３次元空間に分布した量をグラフ化する場合、通常２次元平面断面の２次元カラーマップや量の大きさをz値で表す３次元グラフ等で表現します。 本クラスでは、３次元格子上の各点のスカラー量を色で表現する３次元カラーマップを実現するために、３次元空間上に配置した３枚の２次元平面に、スカラー量に応じた描画色を与える形で表現されます。

３次元カラーマップの例

水素原子の電子３D軌道を３次元カラーマップ表示した結果です。

※実際のサンプルはこちらをご覧ください

３次元カラーマップの描画例の動画

※実際のサンプルはこちらをご覧ください

２次元格子上データの３次元描画（Graph3Dクラス）

２次元カラーマップは２次元格子上のスカラー量を色で表現しましたが、３次元描画では２次元格子上スカラー値をz値として３次元表現した図です。

２次元格子上データの３次元描画の例

三角関数の積　「z = sin(x) × cos(y)」　の描画結果です。

※実際のサンプルはこちらをご覧ください

２次元格子上データの３次元描画の動画

※実際のサンプルはこちらをご覧ください

３次元グラフ描画（Plot3Dクラス）

３次元グラフ描画は、２次元格子上スカラー値をz値として３次元グラフで表現した図です。

２次元格子上データの３次元グラフ描画の例

三角関数の積　「z = sin(x) × cos(y)」　の描画結果です。

※実際のサンプルはこちらをご覧ください

３次元グラフ描画の動画

※実際のサンプルはこちらをご覧ください

２次元格子上ベクトル場描画（VectorField2Dクラス）

掲載準備中。

ダウンロード

■Graph.js.zip

実装方法

• ■２次元カラーマップ
• ■３次元カラーマップ
• ■２次元格子上データの３次元描画
• ■３次元グラフ描画