はじめに
こんにちは！今日はデータ可視化ライブラリのPlotlyについて学んでいきましょう。初心者の方でも理解できるよう、20の章に分けて解説します。
1. Plotlyとは
Plotlyは、インタラクティブなグラフやチャートを作成するためのJavaScriptライブラリです。ウェブアプリケーションでのデータ可視化に最適です。
2. セットアップ
まず、HTMLにPlotlyライブラリを含めます：
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
3. 基本的な折れ線グラフ
簡単な折れ線グラフから始めましょう：
var trace = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var data = [trace];
Plotly.newPlot('myDiv', data);
4. 棒グラフ
次に、棒グラフを作成します：
var trace = {
x: ['寿司', 'ラーメン', '天ぷら'],
y: [20, 14, 23],
type: 'bar'
};
var data = [trace];
Plotly.newPlot('myDiv', data);
5. 円グラフ
比率を表示するには円グラフが適しています：
var data = [{
values: [30, 40, 30],
labels: ['抹茶', '煎茶', '玉露'],
type: 'pie'
}];
Plotly.newPlot('myDiv', data);
6. 散布図
散布図は関係性を示すのに適しています：
var trace = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
mode: 'markers',
type: 'scatter'
};
var data = [trace];
Plotly.newPlot('myDiv', data);
7. ヒストグラム
データの分布を表示するには：
var trace = {
x: [1, 2, 2, 3, 3, 3, 4, 4, 5],
type: 'histogram'
};
var data = [trace];
Plotly.newPlot('myDiv', data);
8. ボックスプロット
データの分布と外れ値を示すには：
var trace = {
y: [1, 2, 3, 4, 4, 4, 8, 9, 10],
type: 'box'
};
var data = [trace];
Plotly.newPlot('myDiv', data);
9. ヒートマップ
色を使ってデータを可視化します：
var data = [{
z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
type: 'heatmap'
}];
Plotly.newPlot('myDiv', data);
10. 3D表面プロット
3D表面プロットを作成します：
var data = [{
z: [[1, 2, 3], [3, 2, 1], [2, 1, 3]],
type: 'surface'
}];
var layout = {scene: {aspectmode: "manual", aspectratio: {x: 1, y: 1, z: 0.5}}};
Plotly.newPlot('myDiv', data, layout);
11. 複数のトレース
1つのチャートに複数のトレースを組み合わせます：
var trace1 = {x: [1, 2, 3], y: [4, 5, 6], type: 'scatter'};
var trace2 = {x: [1, 2, 3], y: [2, 3, 4], type: 'scatter'};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);
12. レイアウトのカスタマイズ
カスタムレイアウトでチャートを強化します：
var data = [{x: [1, 2, 3], y: [2, 3, 4], type: 'scatter'}];
var layout = {
title: '私のチャート',
xaxis: {title: 'X軸'},
yaxis: {title: 'Y軸'}
};
Plotly.newPlot('myDiv', data, layout);
13. 注釈の追加
わかりやすさのためにチャートに注釈を付けます：
var data = [{x: [1, 2, 3], y: [2, 3, 4], type: 'scatter'}];
var layout = {
annotations: [{
x: 2,
y: 3,
text: '重要なポイント',
showarrow: true
}]
};
Plotly.newPlot('myDiv', data, layout);
14. レスポンシブチャート
チャートをレスポンシブにします：
var data = [{x: [1, 2, 3], y: [2, 3, 4], type: 'scatter'}];
var layout = {
autosize: true,
margin: {l: 0, r: 0, b: 0, t: 0, pad: 4}
};
var config = {responsive: true};
Plotly.newPlot('myDiv', data, layout, config);
15. チャートの更新
チャートを動的に更新します：
Plotly.newPlot('myDiv', [{y: [1, 2, 3]}]);
setInterval(function() {
Plotly.extendTraces('myDiv', {y: [[Math.random()]]}, [0]);
}, 1000);
16. サブプロット
1つの図に複数のチャートを作成します：
var trace1 = {x: [1, 2], y: [1, 2], type: 'scatter'};
var trace2 = {x: [1, 2], y: [2, 1], type: 'scatter', xaxis: 'x2', yaxis: 'y2'};
var data = [trace1, trace2];
var layout = {grid: {rows: 1, columns: 2, pattern: 'independent'}};
Plotly.newPlot('myDiv', data, layout);
17. カスタムカラースケール
チャートでカスタムカラーを使用します：
var data = [{
z: [[1, 20, 30], [20, 1, 60], [30, 60, 1]],
type: 'heatmap',
colorscale: [
['0.0', 'rgb(165,0,38)'],
['0.5', 'rgb(255,255,255)'],
['1.0', 'rgb(49,54,149)']
]
}];
Plotly.newPlot('myDiv', data);
18. 図形の追加
チャートに図形を追加して強化します：
var data = [{x: [1, 2, 3], y: [2, 3, 4], type: 'scatter'}];
var layout = {
shapes: [{
type: 'rect',
x0: 1,
y0: 2,
x1: 2,
y1: 3,
line: {color: 'rgba(55, 128, 191, 1)'},
fillcolor: 'rgba(55, 128, 191, 0.6)'
}]
};
Plotly.newPlot('myDiv', data, layout);
19. アニメーション
アニメーションつきのチャートを作成します：
var trace = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var data = [trace];
Plotly.newPlot('myDiv', data).then(function() {
Plotly.animate('myDiv', {
data: [{y: [17, 13, 15, 10]}],
traces: [0],
layout: {}
}, {
transition: {duration: 500},
frame: {duration: 500, redraw: false}
});
});
20. チャートのエクスポート
ユーザーがチャートをダウンロードできるようにします：
var data = [{x: [1, 2, 3], y: [2, 3, 4], type: 'scatter'}];
var config = {
toImageButtonOptions: {
format: 'png',
filename: 'my_plot'
}
};
Plotly.newPlot('myDiv', data, {}, config);
これでPlotlyの基本を学びました。さらに練習して探求を続けることで、もっと印象的な可視化を作成できるようになります。頑張ってください！