現在のプロジェクトで、グラフ描画にPlotlyを使用しているので、
業務で開発を行う前に少しだけ基本を理解してみました。
Plotlyとは？
Plotly は、 インタラクティブなデータ可視化 を簡単に作成できるライブラリです。Python、JavaScriptなど複数の言語に対応しており、Webブラウザ上で動的なグラフを表示 できます。
さらに3D・地図・統計グラフなど種類が豊富で、シンプルなコードで書くことができ、モデルの結果可視化など機械学習にも活用されているのが特徴です。
今のプロジェクトでは、ダッシュボード画面でリアルタイムでグラフ表示を行うのにPlotlyが使用されています。
Plotlyの基本
どのようなコードを書けば、グラフ表示を行えるか簡単に紹介していきます。
【開発環境】
・フレームワーク：ASP.NET (MVC)
・使用言語：フロントエンド：JavaScript / バックエンド：C#
・OS：Mac (個人) / Windows (業務)
・エディタ・IDE：VS Code (個人) / Visual Studio (業務)
グラフ表示
まず初めに簡単なグラフを表示してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plotly</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myPlot" style="width: 100%; max-width: 700px; height: 400px;"></div>
<script>
const trace1 = {
x: [1, 2, 3, 4, 5],
y: [10, 15, 7, 12, 17],
type: 'scatter',
mode: 'lines+markers',
name: 'データ1'
};
const layout = {
title: '折れ線グラフ',
xaxis: { title: 'X軸' },
yaxis: { title: 'Y軸' }
};
Plotly.newPlot('myPlot', [trace1], layout);
</script>
</body>
</html>
基本ソースコード解説
①Plotly のライブラリを読み込む
Plotly の最新バージョンを読み込み、Plotlyを使用できるようにする。
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
②グラフ描画エリアの作成
・グラフを表示するための div 要素を追加
・id="myPlot" グラフ描画のためのid指定
・ style で最大幅700px、高さ400pxに紹介用で設定
<div id="myPlot" style="width: 100%; max-width: 700px; height: 400px;"></div>
③データ作成
const trace1 = {
x: [1, 2, 3, 4, 5],
y: [10, 15, 7, 12, 17],
type: 'scatter',
mode: 'lines+markers',
name: 'データ1'
};
x: X軸のデータ (1, 2, 3, 4, 5)y: Y軸のデータ (10, 15, 7, 12, 17)type: 'scatter': グラフの種類を設定mode: 'lines+markers': 描画方法を設定name: 'データ1': 出力グラフのラベル
④レイアウトの設定
const layout = {
title: '折れ線グラフ',
xaxis: { title: 'X軸' },
yaxis: { title: 'Y軸' }
};
title: グラフのタイトルxaxis.title: X軸のラベルyaxis.title: Y軸のラベル
⑤グラフの描画
Plotly.newPlot('myPlot', [trace1], layout);
Plotly.newPlot(id, データ, レイアウト)'myPlot': 描画するdivの ID[trace1]: グラフのデータ (複数設定可)layout: グラフの見た目設定
Plotlyで描画可能なグラフの種類
Plotlyでは数十種ほどのグラフを描画できるそうです。
その中でよく見るものや興味がるものを
いくつかグラフを紹介してみたいと思います。
グラフ毎のソースコードを載せて、
簡単な説明と使用例についても記載しておきます。
よく使用されるグラフ
棒グラフ（Bar Chart）
const trace2 = {
x: ['カテゴリ1', 'カテゴリ2', 'カテゴリ3', 'カテゴリ4', 'カテゴリ5'],
y: [10, 15, 7, 12, 17],
type: 'bar',
name: '棒グラフデータ'
};
カテゴリごとのデータを棒で表現するグラフで
カテゴリ間の比較を視覚的にわかりやすく示すことができます。
- 製品別の売上や数量の比較
- 地域ごとの人口や学業成績の比較
散布図（Scatter Plot）
const trace3 = {
x: [1, 2, 3, 4, 5],
y: [10, 15, 7, 12, 17],
mode: 'markers',
type: 'scatter',
name: '散布図データ'
};
２つの変数の関係性を点で示すグラフで、データ間の相関関係を視覚的に把握できます。
- 収入と支出、身長と体重などの関係性
- 科学実験におけるデータポイントの分布
円グラフ（Pie Chart）
const trace4 = {
labels: ['カテゴリ1', 'カテゴリ2', 'カテゴリ3', 'カテゴリ4'],
values: [10, 20, 30, 40],
type: 'pie',
name: 'パイチャートデータ'
};
円グラフはよく使用されているイメージがあります。
全体に対する各カテゴリの比率を直感的に理解できるのが特徴です。
- 市場シェアや投票結果の割合
- 売上の構成比や予算配分
も記載しておきます。
興味があるグラフ
ヒートマップ（Heatmap）
const trace5 = {
z: [
[1, 20, 30, 40],
[50, 60, 70, 80],
[90, 100, 110, 120]
],
type: 'heatmap',
colorscale: 'Viridis',
name: 'ヒートマップデータ'
};
ヒートマップは、色を使ってデータの強さや密度を示すグラフです。
色が濃いほど値が高く、色が薄いほど値が低いことを示せます。
「温度」や「強度」などを示すときに使用されるイメージです。
- ウェブサイトの「ヒートマップ解析」：ユーザーが最もよくクリックした場所やスクロールしたエリアを可視化する。
- 地図で「どの地域が一番暑いか」を示すとき。
レーダーチャート（Radar Chart）
const trace6 = {
r: [10, 20, 30, 40, 50],
theta: ['A', 'B', 'C', 'D', 'E'],
type: 'scatterpolar',
mode: 'lines+markers',
name: 'レーダーチャートデータ'
};
いくつかの異なる項目を放射状に並べたグラフです。各項目の評価を、外側に向かって線でつなぎ、比較しやすくします。
筋トレにおいて、種目毎の得意不得意などの比較に使えそうですね。
- スポーツ選手をスピードや力などの異なる能力で比較するとき。
- 製品の特徴（価格、品質、機能など）を一度に評価するとき。
３D系のグラフ
3D散布図（3D Scatter Plot）
const trace7 = {
x: [1, 2, 3, 4, 5],
y: [10, 15, 7, 12, 17],
z: [5, 3, 4, 8, 6],
mode: 'markers',
type: 'scatter3d',
marker: {
size: 8,
color: 'rgb(23, 190, 207)',
opacity: 0.8
},
name: '3D散布図データ'
};
const layout7 = {
title: '3D散布図',
scene: {
xaxis: { title: 'X軸' },
yaxis: { title: 'Y軸' },
zaxis: { title: 'Z軸' }
}
};
Plotly.newPlot('scatter3DChart', [trace7], layout7);
3D散布図は、3つの異なる軸（X軸、Y軸、Z軸）を使って、3次元空間上にデータをプロットするグラフです。
データポイントの位置が立体的に表示されるため、複雑な関係性を空間的に理解することができます。
- 科学的データ（例えば、分子構造や物理現象）を視覚化する場面など
3D表面グラフ（3D Surface Plot）
コードは少し長くなってしまうので、一部抜粋して記載しておきます。
const trace8 = {
x: x,
y: y,
z: z,
type: 'surface',
colorscale: 'YlOrBr',
opacity: 0.95
};
const layout8 = {
title: {
text: '3D表面グラフ',
font: { size: 24, color: '#333' }
},
scene: {
xaxis: { title: 'X軸', showgrid: false, backgroundcolor: "rgba(0,0,0,0)" },
yaxis: { title: 'Y軸', showgrid: false, backgroundcolor: "rgba(0,0,0,0)" },
zaxis: { title: '標高 (m)', showgrid: false, backgroundcolor: "rgba(0,0,0,0)" },
aspectratio: { x: 1, y: 1, z: 0.5 },
camera: { eye: { x: 1.5, y: 1.5, z: 0.6 } },
bgcolor: "rgba(0,0,0,0)"
}
};
3D表面グラフは、3つの変数（X, Y, Z）を使って3次元空間でデータの表面を視覚化するためのグラフです。
X軸とY軸は平面上でデータをプロットし、Z軸でその高さを表現します。
・aspectratio: グラフの縦横比を調整
x: 1, y: 1, z: 0.5 は、Z軸がX軸とY軸に比べて半分の高さになることを意味します。
・camera: グラフの視点（カメラ）を設定
eye: 視点の位置を決定します。x: 1.5, y: 1.5, z: 0.6 は、視点を3D空間の特定の位置に設定しています。これにより、グラフの表示角度が決まります。
- 地形の視覚化（標高や山岳地形のデータなど）
業務で実装しているPlotlyグラフ
簡単なデータを作成して、グラフ表示を行ってもあまり面白くないので、
Stack Overflowの開発者調査結果（https://survey.stackoverflow.co/）から、
１年間で仕事で使用した言語について、年ごとにデータを参照しグラフ化してみました。
※年ごとによって、CSVファイル内の項目名が異なるので、
今回は学習用として、似たような項目名を一つのグラフに示しています。
【折れ線グラフ】
【箱ひげ図】
業務ではこのような感じで、複数のデータに対して、それぞれグラフの表示色を設定し
凡例に項目の一覧を表示するように設定しています。
ソースコードの紹介するには、少し多すぎるので、控えておきます。
まとめ
今回はPlotlyを使用して、グラフの基本的な実装方法と、グラフの種類の一部を紹介しました。
今後業務でPlotlyを技術選定として使用し、このようなグラフを実装する機会があるかどうかはわからないですが、
Plotlyに限らず、Web上で様々なグラフを描けるということだけでも、知っておいて損はないのかな感じました。
マーケティング面でのデータ分析や機械学習の分野に個人的に興味があるので、
最終的にはこういった分野で活用できるように、今後も学習を進めてみたいと思います。
コメント