はじめに

こんにちは！今日はデータ可視化ライブラリの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の基本を学びました。さらに練習して探求を続けることで、もっと印象的な可視化を作成できるようになります。頑張ってください！