この記事で学べること#

  • Plotly.jsの基本的な使い方
  • CDNからのPlotly.jsライブラリ読み込み方法
  • 3D scatter/lineプロットの実装方法
  • JSBSimシミュレーションデータ（x, y, z座標）の可視化
  • scene設定による3D空間のカスタマイズ

対象読者#

  • JavaScript基礎知識がある方
  • JSBSimシミュレーションデータを可視化したい方
  • Plotly.js（JavaScript版）の情報を探している方
  • WebブラウザでインタラクティブなGraphを作りたい方

Web上にはPython版Plotly（plotly.py）の情報は豊富にありますが、JavaScript版（Plotly.js）の日本語情報は少ないのが現状です。

本記事では、JSBSimシミュレーションデータを例に、Plotly.jsで3D軌道プロットを作成する基本的な方法を解説します。

Plotly.jsとは？#

オープンソースのインタラクティブグラフライブラリ#

Plotly.jsは、インタラクティブな2D/3DグラフをWebブラウザ上に描画するJavaScriptライブラリです。MIT ライセンスで公開されており、商用・非商用問わず無料で利用できます。

マウス操作で回転・拡大・縮小が可能なため、データの可視化に非常に有効です。

Python版Plotlyとの違い#

Python版Plotly（plotly.py）は、Pythonでグラフを作成し、HTMLとして出力します。一方、Plotly.jsはJavaScriptで直接グラフを作成します。

Webアプリケーションに組み込む場合や、ブラウザ上でリアルタイムにデータを可視化する場合は、Plotly.jsが適しています。

Plotly.jsのセットアップ#

CDNからのライブラリ読み込み#

Plotly.jsを使用するには、HTMLの<head>タグ内にCDNリンクを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Plotly.js 3D軌道プロット</title>
    <!-- Plotly.jsライブラリをCDNから読み込み -->
    <script src="https://cdn.plot.ly/plotly-2.26.0.min.js"></script>
</head>
<body>
    <!-- グラフを表示するdiv要素 -->
    <div id="plot3d"></div>

    <!-- JavaScriptコードは後述 -->
    <script>
        // ここにPlotly.jsのコードを記述
    </script>
</body>
</html>

ポイント:

  • CDNを使用することで、ローカルにファイルをダウンロードせずに利用できます
  • バージョン番号（例: 2.26.0）は、最新版に適宜更新してください
  • グラフを表示するための<div id="plot3d"></div>を用意します

3D scatter plotの基本実装#

traceデータの定義#

Plotly.jsでは、trace（トレース）と呼ばれるデータオブジェクトでグラフの内容を定義します。

// サンプルデータ（JSBSimシミュレーション結果を想定）
const xs = [0, 10, 20, 30, 40, 50];  // Y座標 (m)
const ys = [0, 5, 10, 15, 20, 25];   // X座標 (m)
const zs = [100, 105, 110, 108, 102, 95];  // 高度 (m)

// 3D scatter traceの定義
const trace3d = {
    x: xs,  // X軸データ
    y: ys,  // Y軸データ
    z: zs,  // Z軸データ
    mode: 'lines+markers',  // 線とマーカーの両方を表示
    type: 'scatter3d',  // 3Dプロットタイプ
    line: {
        color: 'blue',  // 線の色
        width: 3  // 線の太さ
    },
    marker: {
        size: 4,  // マーカーのサイズ
        color: 'red'  // マーカーの色
    }
};

重要な設定項目:

  • type: 'scatter3d' - 3Dプロットを指定
  • mode: 'lines+markers' - 線とマーカーの両方を表示（'lines' のみ、'markers' のみも可能）
  • x, y, z - 3次元座標データ（配列）

layoutの設定#

layout（レイアウト）で、グラフ全体の見た目を設定します。

const layout3d = {
    title: '3D 軌道プロット',  // グラフタイトル
    scene: {
        xaxis: {
            title: 'Y (m)',  // X軸ラベル
            showgrid: true,  // グリッド線を表示
            gridcolor: '#cfd8dc'  // グリッド線の色
        },
        yaxis: {
            title: 'X (m)',  // Y軸ラベル
            showgrid: true,
            gridcolor: '#cfd8dc'
        },
        zaxis: {
            title: 'Altitude (m)',  // Z軸ラベル
            showgrid: true,
            gridcolor: '#cfd8dc'
        }
    },
    height: 700  // グラフの高さ（ピクセル）
};

scene設定のポイント:

  • 3Dプロットでは、sceneオブジェクト内に軸設定を記述します
  • xaxis, yaxis, zaxis で各軸の見た目をカスタマイズ
  • showgrid でグリッド線の表示/非表示を切り替え

Plotly.newPlot()でグラフを描画#

// グラフを描画
Plotly.newPlot('plot3d', [trace3d], layout3d);

Plotly.newPlot()の引数:

  1. 'plot3d' - グラフを表示する<div>要素のID
  2. [trace3d] - traceデータの配列（複数のtraceを重ねて表示可能）
  3. layout3d - layoutオブジェクト

JSBSimデータの可視化例#

実際のシミュレーションデータを使用#

JSBSimシミュレーション結果のCSVファイルから、X, Y, Z座標を読み込んで可視化する例です。

// CSVファイルから読み込んだデータ（例）
const simulationData = {
    time: [0.0, 0.1, 0.2, 0.3, 0.4],  // 時刻 (s)
    xs: [0, 1.5, 3.2, 5.1, 7.3],  // Y座標 (m)
    ys: [0, 0.5, 1.1, 1.8, 2.6],  // X座標 (m)
    zs: [100, 101, 102, 103, 104]  // 高度 (m)
};

// 時刻でカラーマップを作成
const trace3d = {
    x: simulationData.xs,
    y: simulationData.ys,
    z: simulationData.zs,
    mode: 'lines+markers',
    type: 'scatter3d',
    line: {
        color: simulationData.time,  // 時刻で色分け
        colorscale: 'Viridis',  // カラーマップ
        width: 4,
        colorbar: {
            title: 'Time (s)'  // カラーバーのタイトル
        }
    },
    marker: {
        size: 2
    }
};

const layout3d = {
    title: 'JSBSim 3D軌道',
    scene: {
        xaxis: { title: 'Y (m)' },
        yaxis: { title: 'X (m)' },
        zaxis: { title: 'Altitude (m)' }
    },
    height: 700
};

Plotly.newPlot('plot3d', [trace3d], layout3d);

カラーマップの活用:

  • line.color に数値配列を指定すると、値に応じた色分けが可能
  • colorscale で配色を選択（‘Viridis’, ‘Jet’, ‘Hot’ 等）
  • colorbar でカラーバーの設定が可能

アスペクト比の調整#

3D空間のアスペクト比を調整することで、データの見え方を改善できます。

const layout3d = {
    title: '3D 軌道（等尺表示）',
    scene: {
        xaxis: { title: 'Y (m)', range: [0, 100] },
        yaxis: { title: 'X (m)', range: [0, 100] },
        zaxis: { title: 'Altitude (m)', range: [0, 150] },
        aspectmode: 'manual',  // 手動でアスペクト比を設定
        aspectratio: {
            x: 1,  // X軸の相対的な長さ
            y: 1,  // Y軸の相対的な長さ
            z: 1.5  // Z軸の相対的な長さ（1.5倍）
        }
    },
    height: 700
};

aspectmodeの設定:

  • 'auto' - 自動調整（デフォルト）
  • 'cube' - 立方体
  • 'data' - データ範囲に基づく
  • 'manual' - aspectratioで手動設定

マウス操作によるインタラクティブな表示#

Plotly.jsで作成したグラフは、以下のマウス操作が可能です。

  • ドラッグ: 視点の回転
  • スクロール: ズームイン/アウト
  • ダブルクリック: リセット
  • 右上のツールバー: ズーム、パン、リセット等のツール

これにより、データを様々な角度から観察できます。

まとめ#

本記事では、Plotly.jsを使った3D軌道プロットの基本的な実装方法を解説しました。

重要なポイント:

  • CDNから簡単にPlotly.jsを読み込める
  • traceでデータ、layoutで見た目を定義
  • type: 'scatter3d'で3Dプロットを作成
  • Plotly.newPlot()で描画
  • マウス操作でインタラクティブに表示

次のステップとして、アニメーション機能（Frames API）を使った軌道の時系列表示に挑戦してみましょう。

参照資料#

本記事の執筆にあたり、以下の資料を参照しました [@plotly_js_docs_3d_scatter_2025; @plotly_js_github_2025]。