[Plotly] 3D座標軸をカスタム線で"強調表示"する : 見やすい3Dグラフのための軸デザイン

Qiit記事
https://qiita.com/Tadataka_Takahashi/items/9ff4fd490f836430377e

Transcript

1. TECHNICAL GUIDE Plotly 3D座標軸を カスタム線で する 見やすい3Dグラフのための軸デザイン  目的 3D軸を太く・色付きにして、方向や空間認識を明確化  手段 Scatter3d(mode="lines") ＋ Cone を使用したカスタム軸の実装  効果 データの分布や広がりが一目で直感的に分かるようになる  Sample Environment: Google Colab / Jupyter Notebook "強調表示" R/G/B Color System
2. PROBLEM & SOLUTION 課題: デフォルト3D軸は 方向が直感的でない  軸が細く背景に埋もれやすい グリッド線と混ざり、軸の存在感が薄い  XYZの向きが瞬時に判断できない どの方向がX/Y/Zなのか視覚的な手がかりが不足  軸そのものを線描画する 太さ・色・長さを自由に制御できるカスタム軸を作成  XYZカラー（R/G/B）で統一 X=赤、Y=緑、Z=青のルールで方向を直感的に SOLUTION 見づらい・方向不明 見やすい・方向明確 Default (Before) Custom (After)
3. 基本: Scatter3d(lines)で軸線を引く 見づらいデフォルト軸の代わりに、線オブジェクト（Scatter3d）で軸を描画  mode="lines"  width=6〜8  XYZカラー app.py # カスタム軸（線）を追加 fig.add_trace(go.Scatter3d( x=xr, y=[0,0], z=[0,0], # X軸の範囲 mode="lines", line=dict(color="red", width=8), name="X-axis" )) # Y軸（緑）、Z軸（青）も同様に追加 fig.add_trace(go.Scatter3d( x=[0,0], y=yr, z=[0,0], mode="lines", line=dict(color="green", width=8), name="Y-axis" )) X Y Z Execution Result X-axis Y-axis Z-axis
4. X Y Z XYZカラーで直感的に: R/G/B = X/Y/Z 色のルールを統一することで、どの軸がどの方向か一瞬で判断できる X RED X-Axis Y GREEN Y-Axis Z BLUE Z-Axis 実装のポイント 凡例（Legend）にも "X-axis", "Y-axis" と明記すると、グラフを見た瞬間に色 が表す意味が伝わりやすくなります。  Accessibility 色覚への配慮 色だけでなく「太さ」を変える、ある いは「破線」を併用するなどして、色 だけに頼らない区別をつけると、より 多くの人に伝わります。
5. データ中心に軸を通すと分布が読みやすい 軸の交点をデータの重心 (mean) に設定することで、分布の偏りや方向性を明確化  原点 = 平均値  偏りが一目瞭 然  PCA/分析に最 適 center_axis.py # データの中心（重心）を計算 cx, cy, cz = x.mean(), y.mean(), z.mean() # X軸（赤）: データ中心を通るように配置 fig.add_trace(go.Scatter3d( x=[xmin, xmax], y=[cy, cy], z=[cz, cz], mode="lines", line=dict(color="red", width=6), name="X-axis" )) # Y軸も同様に中心を通す fig.add_trace(go.Scatter3d( x=[cx, cx], y=[ymin, ymax], z=[cz, cz], X Y Z Center-Aligned Axes X-axis Y-axis Z-axis
6. 矢印ヘッド: Coneで軸の正方向を明示 PlotlyのConeオブジェクトを使用して、軸の終端に矢印を追加し方向を明確化  go.Coneを使 用  anchor="tail"  色を軸と統一 cone_arrow.py # 軸の端に矢印（Cone）を追加 fig.add_trace(go.Cone( x=[xr[1]], y=[cy], z=[cz], # X軸の終端位置 u=[1], v=[0], w=[0], # X方向ベクトル sizemode="absolute", sizeref=2, anchor="tail", # 矢印の尻尾基準 colorscale=[[0, "red"], [1, "red"]], showscale=False )) # Y軸(Green), Z軸(Blue)も同様に追加... fig.add_trace(go.Cone( x=[cx], y=[yr[1]], z=[cz], u=[0], v=[1], w=[0], X Y Z Execution Result X-axis + Cone Y-axis + Cone Z-axis + Cone
7. 背景・軸設定で視認性を最大化 明るい背景色と適切なアスペクト比設定で、グラフの読みやすさを劇的に改善  背景色を明 色に  aspectmode="data"  コントラスト 向上 layout_settings.py # 背景色とアスペクト比を設定 fig.update_layout( title="Optimized View", scene=dict( # 軸の背景色を明るいグレーに（コントラスト確保） xaxis=dict(backgroundcolor="rgb(245,245,245)"), yaxis=dict(backgroundcolor="rgb(245,245,245)"), zaxis=dict(backgroundcolor="rgb(250,250,250)"), # データの比率を維持（歪み防止） aspectmode="data" ) ) X Y Z Optimized Layout Result Active Settings: Background: rgb(245,245,245) Aspect Mode: data
8. まとめと次の一歩 見やすい3Dグラフデザインの要点振り返り  カスタム軸で強調 Scatter3d(mode="lines")を使い、太さと色を自由に制御して見やすくする  データ中心配置 軸の原点をデータの中心(mean)に合わせることで、分布の解釈を容易にす る  Coneで方向明示 軸の終端に円錐（Cone）を追加し、3D空間での方向性を直感的に伝える  背景・視認性設定 明るい背景色と aspectmode="data" でコントラストと正確な形状を確保 Start Practice コードを実際に動かして確認しましょう  Google Colab Notebook 今回紹介した全コードがそのまま実行可能なノートブッ クを用意しました。  ノートブックを開く  Video Tutorial [Plotly] 3D座標軸をカスタム線で"強調 [Plotly] 3D座標軸をカスタム線で"強調… …