はじめまして。
今年9月、エンジニアとして入社しました、田川です。
みなさんはプレゼンの資料を作成する時、「グラフをその場で条件変更して表示したいなー」「グラフ内の特定のデータをその場で拡大したいなー」と思ったことはありませんか？
グラフを画像として張り付けると、その場でグラフをいじる事はできません。
今回は「Plotly」を用い、グラフをグイングイン動かしたいと思います。
Plotlyとは
Plotlyとはオンライングラフ作成、分析、統計ツールです。
Python、R、MATLAB、Perl、JavaScriptなどのグラフ作成ライブラリとして提供されており、また作成したグラフをパワーポイントにも埋め込む事ができます。
下のグラフは実際に作成したものです。これは日本の海岸線と震源地の座標(2018年)を組み合わせ、三次元でプロットしたグラフになります。
実際に使ってみた
今回は環境構築などをしなくても良い、JavaScriptでPlotlyを使ってみましょう。
グラフは公式サイトにて紹介されている「Line and Scatter Plot」を用います。
htmlファイルを作成し、その中に以下のソースコードをコピーして下さい。
<head>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id="Test">
<script>
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
mode: 'markers',
type: 'scatter'};
var trace2 = {
x: [2, 3, 4, 5],
y: [16, 5, 11, 9],
mode: 'lines',
type: 'scatter'};
var trace3 = {
x: [1, 2, 3, 4],
y: [12, 9, 15, 12],
mode: 'lines+markers',
type: 'scatter'};
var data = [trace1, trace2, trace3];
Plotly.newPlot('Test', data);
</script>
</div>
</body>保存後、htmlファイルをwebブラウザで開いてみてください。
下画像のグラフが表示されたら成功です。グラフを触ってみたり、htmlファイルに張り付けたコード内の値を変更するなど、是非遊んでみて下さい。
おわりに
今回はPlotlyの紹介と、実際に作成したものを触って貰いました。作成したグラフはかなりシンプルなものでしたが、グラフが複雑になればなるほど動かせる利点が大きくなります。
例えば今後、大きな発表やライバルと差を付けたい大切なプレゼンの場で、ただ画像として張り付けるグラフではなく、動かせるグラフを使用してみてはいかがでしょうか。
それでは、いつかあるかもしれない「Plotlyを使ってグラフを動かそう Part2」でお会いしましょう。
コメント