Plotlyを使ってグラフを動かそう

はじめまして。
今年9月、エンジニアとして入社しました、田川です。

みなさんはプレゼンの資料を作成する時、「グラフをその場で条件変更して表示したいなー」「グラフ内の特定のデータをその場で拡大したいなー」と思ったことはありませんか?
グラフを画像として張り付けると、その場でグラフをいじる事はできません。

今回は「Plotly」を用い、グラフをグイングイン動かしたいと思います。





Plotlyとは

Plotlyとはオンライングラフ作成、分析、統計ツールです。
Python、R、MATLAB、Perl、JavaScriptなどのグラフ作成ライブラリとして提供されており、また作成したグラフをパワーポイントにも埋め込む事ができます。

https://plotly.com/

下のグラフは実際に作成したものです。これは日本の海岸線と震源地の座標(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」でお会いしましょう。

関連記事

プロジェクトストーリー

おすすめ記事

技術

コメント

この記事へのコメントはありません。

カテゴリー

TOP
TOP