はじめに
3Dの点群の分布状況をさくっと見たいなと思って、ちょっとググってみたものの、そういうサービスが意外と見つからない。有料サービスだったり、ソフトだったり。２次元だったらExcelで見れるけど、３次元は見つけられない。
大したものは求めてないんだよ、JavaScriptでできるんじゃないのー？
というわけで、作ってみました。
作ったもの
CSVを入力すると、JavaScriptで絵を描いてくれる。
デモサイト
https://yo16.github.io/scatter_3d_js/
ソース
特徴
- ブラウザで動作します。ドラッグでぐりぐり動かせます。
- 自分で用意したCSVのデータも描けます。
- htmlと必要なJavaScriptをダウンロードすれば、ローカルでも動きます。
- データの収集等はしていませんのでご安心を。
- JavaScriptがわかる人なら、自分のサイトに組み込めます。
- 別記事の「グラフの軸は意外と難しい」で書いた、グラフの軸の範囲を適切（適当？）に決めるロジックが入ってます。
中身のこと
1) three.js
three.jsを初めて使ってみました。基本的には、素材情報（Material）と幾何情報（Geometry）を別に作って、合わせてMeshを作るという形。Materialは使いまわせるけど、Geoは１粒ずつインスタンス化するから、どうしてもメモリを使う印象。特に点群表示なんて、いかにもたくさんの要素が生まれそうなもの。どう作るのが最適なのかよくわからなかったです。
透過しないとかそういう細かい工夫を積み重ねるんだろうなとは思いますが、今回の目的は「さくっと点群が見たい」だし、初心者なのでスルーさせていただきました。（大量の点群を突っ込むと固まるよ、ごめんなさい、の言い訳）
2) requestAnimationFrame関数
JavaScriptの関数です。（MDNドキュメント）
描画関数の中で、このrequestAnimationFrame関数を非同期で呼び出して、もう一度描画関数を実行する、という再帰っぽい方法で描画をぐるぐる回すのが今の描画方法だそうです。知らなかった。
でも今回の私のツールのようなものは、大体の時間は止まっててCPU負荷がもったないないので、ドラッグしていない間はぐるぐるしない方法をちょっとだけトライしてみました。でもうまくいかず断念。いい方法があれば、改善のネタです。
止めたかった理由はCPU負荷もあるけど、もう１つ別のCanvasにグラフを描くと、あっちでもこっちでもぐるぐるするので、うまく動かなかったんです。（変数のスコープのせいかもしれないけど。。）というわけで、ちょっとそこは課題を感じてます。
3) 軸・・・
しつこいですが、軸を自動で決めるのが難しいです。まだバグがある。（軸の数値がおかしくなるのをたまに目撃する。）
グラフの軸は意外と難しい
おわりに
ちょっと見たい、というくらいであれば、十分耐えられるものを作れたのではないでしょうか。ちょっと見たいときに使ってみてください。
ちなみに私は、いい感じの分布のカラーパレットを作りたくてRGBを３次元と見立てた分布を見たかったです。適度に離れてるかなーとか、使ってない色はないかなーとかそういう風に。
そういう意味では十分使えるものができたし、とても勉強になって面白かったです。three.jsは、d3.js同様に、何かの情報をインタラクティブに見せたいときに使う道具の１つになりうるなと思いました。
空間図形が好きな人とか、３次元データ系のお仕事の人は、これ作ってみるといいかもしれない。