【プログラムTips】Plotly.js(javascript)を利用して、Webブラウザ上にグラフを描画する

グラフを書きたいとき

構造設計をしていてEXCELでグラフを書く機会はよくあると思います。EXCELは非常に便利なツールですが、大量のグラフを作成したいときや少し複雑な計算結果をグラフ化したいときには不便なときもあります。そういった場合の選択肢として活用できる、「Plotly」というサービスを紹介します。

簡単なサンプル（javascript）

Plotlyは以下で提供されているライブラリです。
https://plot.ly/python/
Pythonやjavascriptなど様々な言語で利用できますが、今回は環境構築が不要なjavascriptを例にとりたいと思います。

通常のプログラミング言語は、言語を解釈するためのコンパイラやインタプリタと呼ばれるものを用意してPCにインストールする必要があります。 一方、JavaScriptはWebブラウザがインストールされていれば実行できるため、環境構築不要です。JavaScriptはもともとWebサイトを構築するために用いられる言語であるため、Webブラウザで実行できるような環境が整えられています。 ただし、インストールして環境構築するほかの言語と違って、セキュリティ上の理由で制約が設けられている部分もあり、実現したい内容によっては不向きな場合もあります。

簡単に試してみる

以下は実際のコード例です。 実行するには以下のような手順が必要です。

1. 以下のソースコードをhtmlファイルとして保存します。
2. 保存したファイルをダブルクリックで起動します。
3. 既定のWebブラウザ（Internet Explorer※, Microsoft Edge, Google Chrome, Firefoxなど）が起動し、画面にグラフが表示されるはずです。

※バージョンが古いInternet Explorerではグラフが表示できないことがあります。
ソースコード

以下のようなグラフが表示されたでしょうか。

活用例

RC部材のせん断耐力式である荒川Mean式をグラフを書いてみます。 荒川Mean式は以下のような式です。数式としては変数が多く、それぞれの値がどの程度耐力に対する感度があるのか簡単にはわかりません。そこで、Plotlyを使ってグラフを書いてみたいと思います。

• : 0.068
• : 引張鉄筋比(%)
• : 大梁の幅
• : 大梁引張鉄筋の中心から圧縮縁までの距離
• : せん断補強筋比(実数)
• : せん断補強筋強度
• : 7/8d
• : せん断スパン比(1≦M/Qd≦3)

実際にグラフを書いて、引張鉄筋比とM/Qdの感度を確認してみます。 書いてみると、引張鉄筋比よりもM/Qdの影響が非常に大きいことがわかります。このように、簡単に数式を可視化するという点ではEXCELより手軽な場合もあります。

まとめ

今回はPlotlyというサービスを使ってグラフを書いてみる方法について説明しました。今回は簡単に試せる、という観点でJavaScriptを用いましたが、ローカルPCのファイルを使ってグラフを書くなどより高度な目的のためには、プログラミング言語PythonのPlotlyライブラリも用意されていますのでそちらをご活用いただく選択肢もあります。Pythonのライブラリ活用については今後記事にしていきたいと思います。