Plotly.js 全チャートショーケース

Plotly.js は、内部的に D3.js と WebGL を利用して構築された、非常に高度なデータ可視化ライブラリです。Python（Pandas/Jupyter）やRといったデータサイエンスの領域で標準的に利用されている Plotly の JavaScript 実装であり、統計計算や科学技術系の表現に圧倒的な強みを持ちます。

ホバー時のツールチップ表示、矩形選択によるズームイン・アウト、パン（平行移動）、画像エクスポートなどのインタラクション機能が、特別な実装なしにすべてのグラフで標準利用可能です。

1. 折れ線・散布図 (Line & Scatter)

Plotlyでは折れ線と散布図を同一の「scatter」タイプとして扱います。モードの切り替えで点と線を自由に組み合わせ可能です。

2. 棒グラフ (Bar Chart)

カテゴリごとの値の比較。積み上げ（Stacked）やグループ化（Grouped）をレイアウト設定で簡単に切り替えられます。

3. 円グラフ (Pie Chart)

構成比の表現。ホバー時の詳細表示や、特定のセグメントをクリックして分離（Pull）させるアニメーションが標準搭載されています。

4. 箱ひげ図 (Box Plot)

データのばらつき、中央値、四分位範囲、および外れ値（アウトライアー）を表現する統計分析に必須のグラフです。

5. ヒストグラム (Histogram)

生データを渡すだけで、Plotly側で自動的にビン（階級）の幅を計算し、度数分布を可視化します。

6. バイオリンプロット (Violin Plot)

箱ひげ図にカーネル密度推定（分布の形状）を組み合わせた高度な統計グラフです。

7. ヒートマップ (Heatmap)

2次元配列の値をカラーグラデーションで表現します。相関行列やアクセスログの可視化に便利です。

8. 等高線プロット (Contour Plot)

2次元のデータマトリクスから、同じ値を持つ点を繋いだ等高線を描画します。気象データや物理シミュレーションで利用されます。

9. 3D散布図 (3D Scatter)

WebGLを用いた3D空間へのプロット。マウスドラッグで空間を自由に回転・拡大縮小できます。

10. 3D曲面プロット (3D Surface)

数学的関数や標高データなどの3次元マトリクスを、滑らかなポリゴン曲面としてレンダリングします。

11. ローソク足 (Candlestick)

金融データ（Open, High, Low, Close）の可視化。標準で下部にレンジスライダーを表示可能です。

12. サンキーダイアグラム (Sankey Diagram)

データやコストの流れ（フロー）を表現します。各ノードはマウスで上下にドラッグして配置を微調整できます。