React + TypeScript + Plotly で3次元グラフ サンプルコード付き

はじめに

Plotlyは3次元グラフも作れて表示後も拡大や画像出力も対応している便利ライブラリだったので、Angularで使っていたのですがReactでも使いたいシーンが出てきました。
その際に、どのライブラリをインストールしたらいいか調べたり、こと3次元グラフにおいてサクッとコピペで動かしつついじって覚える良さげなコードが転がってなかったので、記事にしてみました。

ちなみに今回の3次元グラフの動機に関しては、なんかすごいね、と思わせたい意図で導入しただけでこんなのは飾りです。偉い人にはそれがわからんのです。

個人的にはグラフ表示をする際は「ひと目でわかりやすい」を大事にして欲しいと思います。
・・・が、偉い人にはそれがわk

そして大好きなTypeScriptの旨みを生かすためにも、
せっかくの型サポートの恩恵を受けられるように、ここに型指定しておくといいんじゃない？
という意味でサンプルコードを書いています。

結論的手順

前提としてReact/Typescriptの環境は整っているものとします。

インストール

ライブラリのインストールと型のインストール

npm i plotly.js react-plotly.js
npm i --save-dev @types/plotly.js @types/react-plotly.js

サンプルコード

ソースコードを読めばわかるのですが、ミソとしてはデータ用の変数にPlotData型を指定をすると型サポートが効いて、設定できるプロパティ（グラフ表示の設定項目）がわかるので便利ってことです。（で、ここまでくれば詰まった際のドキュメントも読みやすいはず）

ThreeGraph.tsx

import React from 'react';
import Plot from 'react-plotly.js';
import {Layout, PlotData} from "plotly.js";

type Props = {}

const ThreeGraph: React.FC<Props> = () => {

  // データの型指定でPartial<PlotData>をつけておくと型サポート使えて便利です
  // データ群1
  const data1:Partial<PlotData> = {
    type: 'scatter3d',
    x: [1,5,9,7],
    y: [-9,4,3,0],
    z: [2,2,2,2],
    marker:{symbol:'circle', opacity:1, size:3},
    mode: 'markers',
    text: ['A', 'B', 'C', 'D'],
    name: 'Group_1',
  }
  
  // データ群2 ちなみに群1と群2は自動で色分けしてくれる。便利！
  // 手動で設定したいなら marker:{color:***}
  const data2:Partial<PlotData> = {
    type: 'scatter3d',
    x: [-6,5,3,-2],
    y: [-4,9,4,6],
    z: [-2,-2,-2,-2],
    marker:{symbol:'circle', opacity:1, size:3},
    mode: 'markers',
    text: ['E', 'F', 'G', 'H'],
    name: 'Group_2',
  }
  
  // 以下はXYZの軸が欲しかったので無理矢理作った
  const lineX:Partial<PlotData> = {
    type: 'scatter3d',
    x:[-10,10],
    y:[0,0],
    z:[0,0],
    mode: 'lines',
    line:{color:'black'}
  };
  
  const lineY:Partial<PlotData> = {
    type: 'scatter3d',
    x:[0,0],
    y:[-10,10],
    z:[0,0],
    mode: 'lines',
    line:{color:'black'}
  };
  
  const lineZ:Partial<PlotData> = {
    type: 'scatter3d',
    x:[0,0],
    y:[0,0],
    z:[-10,10],
    mode: 'lines',
    line:{color:'black'}
  };
  
  const layout1:Partial<Layout> = { title: '３次元グラフ'};
  
  // 下にある<Plot data = {}> のdataの型は Partial<PlotData>[]
  // サンプルとしてわかりやすいように型を書いています
  const allData:Partial<PlotData>[] = [data1, data2, lineX, lineY, lineZ]
  
  return (
    <Plot data={allData} layout={layout1} />
  );
};

export default ThreeGraph;

上記コンポーネントで下記のようなグラフが出ます。（スクショですいません）
実際のブラウザ上ではぐりぐり回せます。

あとは触りながらドキュメント読んで更新していきましょうー

ちなみに余談ですが、
ソースコード自体Partial使った型指定をしていますが、もし仮にPartialでオプション化してなかったら元々のプロパティを全て記述しなければいけません。つまり地獄。

Partialってなんぞ、という方はこちら