WebGLによる3次元グラフの描画例
1948年～2012年の年齢別人口推計データを3次元グラフ化しています。
データを3次元に視覚化することで、大量・複雑なデータの全体像や相関関係などをより直感的に把握しやすくなります。
また、この処理はクライアントPCのWebブラウザ上で、Javascriptによる「人口推計データ読込 ～ 3次元オブジェクト生成」を動的に行っています。
Javascriptを利用することで、（サーバと通信することなく）ユーザのブラウザへの入力に基づいて3次元オブジェクトを動的に生成して表示する、という処理も可能となります。
- X軸（赤）は、1948年～2012年までの各年次。
- Y軸（緑）は、0歳～70歳までの各歳ごとの人口。
- Z軸（青）は、人口数を示す。なおZ軸は、初期画面で垂直方向としている。
操作モード
「視点はマウスで移動」の場合の操作方法
- マウス左ボタンをクリックしたままのドラッグ：視点の角度操作
（視点の位置は維持したまま、視点の角度を上下左右に動かす） - マウス右ボタンをクリックしたままのドラッグ：視点の平行移動
（視点の角度は維持したまま、視点の位置を上下左右に平行移動する） - マウスのホイール回転：視点の前後移動
（視点の位置を前後に移動する／ズーム操作）
※現在の処理は「対象」ではなく「視点」を動かすロジックとなっているため、操作に若干違和感があると思いますが、ご了承ください。
※「視点はマウスで移動」の場合でも、照明位置は自動で回転させています。
