はじめに

以前、こちらの記事（3Dの散布図をさくっと見るツールを作ってみた）で、three.jsを使って結構頑張って作ったのですが、Plotly(JavaScript版)というライブラリがあって、それを使うと簡単に作れちゃうという噂を聞き、試してみました。
すごく簡単です。（涙）
そしてきれい。（涙）

いいんだ。前のはThree.jsの勉強になったからいいんだ。

作ったもの

初期データとしてサンプルのウサギの点群が入ってますが、ファイルを選択すればお手元のCSVを表示できます。
- このウサギは、ポリゴン業界(?)で有名なStanfordのbunnyから拝借しました。
- 向きがちょっとアレですが、元データのまま、あえて編集してません。

デモサイト
https://threed-scatter-app.onrender.com/

ソース

特徴

ブラウザで動作します。ドラッグでぐりぐり動かせます。
自分で用意したCSVのデータも描けます。
htmlと必要なJavaScriptをダウンロードすれば、ローカルでも動きます。
- データの収集等はしていませんのでご安心を。
JavaScriptがわかる人なら、自分のサイトに組み込めます。
↑ 以前のと同じです。
上に出るメニューから、PNG保存や、回転･パンの片手操作ができます。
- 水平の角度を調整したいときは、中心から少し外れた位置をつかんで、中心を囲むような円を描く操作をするといいです。（この手の3D操作のコツの１つ）

plotly.jsの使い方

グラフを描画するためには、この１文だけです。
x,y,zの値のとこはそれぞれ配列にする必要があるので、この前の処理で元のCSVの形式（x,y,zで１データ）から加工して、data_x、data_y、data_zを作っていますが。

/src/js/plotly_3d_scatter_main.js(10-40)

    Plotly.newPlot(
        'myGraph',
        [
            {
                x: data_x,
                y: data_y,
                z: data_z,
                mode: 'markers',
                marker: {
                    color: 'rgb(27,27,256)',
                    size: 3,
                    symbole: 'circle',
                    line: {
                        color: 'rgb(204,204,204)',
                        width: 1
                    },
                    opacity: 0.8
                },
                type: 'scatter3d'
            }
        ],
        {
            margin: {
                l: 0,
                r: 0,
                b: 0,
                t: 0
            }
        }
    );

なんて簡単・・・。プロパティもわかりやすい。

おわりに

plotlyは、ほかのグラフもたくさん描ける上に、JavaScript版以外にもPython版･R版などがあって、すごく良いです。グラフが必要になったらこれ使うと楽だなぁと思います。

あ、自分の作ってみたものの感想で言うと、青い〇のほかに、別の系列･色を追加したくなるなぁとは思いました。私自身が必要ではないので、今回は作りませんでしたが、JavaScript的には色を変えながら追加していくだけなので、簡単にできます。（ご要望があったらコメントください。）