はじめに
以前、こちらの記事（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的には色を変えながら追加していくだけなので、簡単にできます。（ご要望があったらコメントください。）