Plotly.js サンプル集

初心者から上級者まで、30個のインタラクティブなデータ可視化サンプル

Plotly.js v2.27.0 30 サンプル 単一HTMLファイル コピペで使える
1

初心者レベル

基本的なグラフの作成方法を学びます

01
基本的な折れ線グラフ
Plotly.jsで最もシンプルな折れ線グラフを作成
02
基本的な棒グラフ
カテゴリ別のデータを棒グラフで表示
03
基本的な円グラフ
データの割合を円グラフで可視化
04
散布図
2つの変数の関係を散布図で表示
05
複数データの折れ線グラフ
複数のデータセットを同じグラフに表示
06
横棒グラフ
水平方向の棒グラフでランキングを表示
07
ドーナツチャート
中央に穴が開いた円グラフ
08
エリアチャート
折れ線グラフの下側を塗りつぶし
09
積み上げ棒グラフ
複数カテゴリを積み上げて表示
10
バブルチャート
3つの変数をX軸、Y軸、サイズで表現
2

中級レベル

より高度なグラフタイプと機能を学びます

11
サブプロット
1つの画面に複数のグラフを配置
12
ヒートマップ
データの密度や強度を色で表現
13
箱ひげ図
データの分布を箱ひげ図で可視化
14
ヒストグラム
データの度数分布を表示
15
等高線図
2次元データの等高線を描画
16
3D散布図
3次元空間にデータポイントを配置
17
3D曲面図
3次元曲面を描画（回転可能）
18
レーダーチャート
複数の指標を放射状に配置
19
ツリーマップ
階層データを面積で表現
20
サンキーダイアグラム
フローや変換を可視化
3

上級レベル

インタラクティブ機能と高度なカスタマイズを学びます

21
アニメーション
Plotly.animateを使用したグラフアニメーション
22
カスタムボタン
グラフ内にボタンを配置してデータを切り替え
23
スライダー
スライダーでデータを切り替え
24
ドロップダウン
ドロップダウンメニューでデータやビューを切り替え
25
リアルタイム更新
setIntervalとextendTracesでリアルタイム更新
26
複合グラフ
折れ線+棒グラフを2軸で表示
27
地理マップ
世界地図上にデータを色で表現
28
カスタムホバー
ホバー時のツールチップをカスタマイズ
29
イベントハンドリング
クリック、選択、ホバーイベントを処理
30
ダッシュボード
複数グラフを組み合わせたダッシュボード