Web公開できるグラフを4行で作ってみよう

最近バージョンアップした「なでしこ3」の3.1.16では、グラフ描画の使い勝手が大幅に改善されました。また、タートルグラフィックスにも塗り潰しの命令が追加されて描画機能が便利になりました。面白い機能として命令の語尾に簡単な敬語が使えるようになりました。今回は、より簡単に使えるようになったグラフ描画機能を使ってみましょう。

• 

  四行書くとグラフが表示される

グラフを描画してみよう

なでしこ3のグラフ描画機能は、Chart.jsというチャートライブラリを利用したものです。Chart.jsを使うと手軽にWebブラウザ上にいろいろなグラフを描画できます。なでしこでは、このChart.jsをさらに簡単に利用できるようにしました。

例えば、なでしこの簡易エディタに以下のプログラムを記述して「実行」ボタンを押してみましょう。

URL=「/v3/storage/images/7.csv」
URLにAJAX送信した時には
　　対象をCSV取得して線グラフ描画。
ここまで。

すると、わずか4行のプログラムですが次のような線グラフを表示します。これは1920年から東京の人口推移を描画したものです。

• 

  東京の人口推移グラフを描画したところ

このグラフでは項目のミュートが手軽にできるようになっており、グラフ上部のタイルをクリックすることでミュートできます。例えば、人口（総数）をミュートすることで男女別の推移のみ確認できます。

• 

  表示項目をミュートできる

プログラムを確認してみましょう。1行目では人口推移が記述されたCSVファイルを指定します。そして、2行目ではAjaxを利用してCSVファイルを取得するように指示します。3行目では読み込んだCSVファイルを「CSV取得」命令を利用して二次元配列に変換します。そして、「線グラフ描画」を指定してグラフを描画します。

Ajaxを使ったプログラムは、以下のような書式で使います。データを取得すると、変数「対象」に取得したデータが設定されます。

[書式]
URLにAJAX送信した時には
　　# ここにデータを受信した時の処理    
ここまで

Ajaxを利用するならデータを読み出すだけではなくWeb APIを使うこともできるので便利です。たった4行のプログラムで綺麗がグラフが描画されるので楽しいことでしょう。

話題のデータを素早く可視化しよう

このようにとても手軽にデータを可視化できるので、話題のデータも手軽に可視化できます。例えば、厚生労働省からダウンロードした日別PCR検査の陽性者数のグラフを描画できます。

以下のプログラムをなでしこ簡易エディタに記述して実行してみましょう。

URL=「/v3/storage/images/6.csv」
URLにAJAX送信した時には
　　対象をCSV取得して棒グラフ描画。
ここまで。

今度は、棒グラフを描画します。URLに指定したCSVファイルに基づいたデータを描画します。

• 

  PCR検査陽性者数も簡単にグラフ表示

なお、プログラム中の3行目にある「棒グラフ描画」を「線グラフ描画」に変えると、線グラフを描画するようにも指定できます。

データファイルはどのように指定する？

ところで、プログラムの1行目で指定しているURLですが、ここにはサーバーにアップしたCSVファイルのURLを指定します。ただし、ブラウザで実行するアプリは、セキュリティが厳しくアプリを設置したドメインと同じドメインのデータしか読めないというクロスドメインの制限があります。

そのため、なでしこの簡易エディタでグラフを描画したい場合、こちらのなでしこエディタでログインして素材をアップロードするか、クロスドメインからのアクセスを認めているサーバーにデータを配置します。手軽にデータが配置できるサービスには、Gistなどがあります。

CSVファイルというのはExcelの表計算ソフトなどでも作成できる汎用的なデータファイルです。列と行のある二次元のデータです。列をカンマで区切り行を改行で区切るという単純なデータです。

また、アップロードするCSVですがどんな形式でも良いわけではなく、指定のデータ形式である必要があります。例えば、Ajaxを指定せずCSVデータを直接指定してグラフを描画するプログラムは以下のようになります。

データは「-,東京,大阪
2018年,400,300
2019年,800,450
2020年,750,600
2021年,770,420」
データをCSV取得して棒グラフ描画。

プログラムを実行すると、次のように表示されます。

• 

  東京と大阪の数値比較グラフ

ここで記述したCSVデータは以下のようなものです。

-,東京,大阪
2018年,400,300
2019年,800,450
2020年,750,600
2021年,770,420

つまり、CSVの1行目にヘッダを記述します。ここには、東京や大阪などどんなデータがあるのかを指定します。そして、各行の1列目(左側)にX軸のラベルを指定し各データを記述するようにします。「棒グラフ描画」と「線グラフ描画」命令を記述する際には、上記のようなCSVデータを指定します。

円グラフを描画したい場合

なお、円グラフも描画できますが、円グラフを描画する際には、以下のようなデータを指定します。つまり各行に「ラベル,値」を記述したCSVファイルです。

データ=「東京,300
大阪,250
京都,240
名古屋,180」
データをCSV取得して円グラフ描画。

上記のプログラムを実行すると、以下のような円グラフを描画できます。

• 

  円グラフを描画したところ

なでしこエディタを使うとブログパーツも簡単に生成

ところで、なでしこエディタ(nako3storage)ですが、こちらも最近大幅にバージョンアップしています。プログラムを保存すると、閲覧用のURLを生成するだけでなく、ブログなどに貼り付けて使えるブログパーツのHTMLコードも取得できます。そのため、ブログにグラフを貼り付けたいという場合にこれを便利に利用できます。

• 

  ブログに貼り付けたところ

まとめ

以上、今回は「なでしこ」の新機能を利用してグラフを描画する方法を紹介しました。4行のプログラムで綺麗なグラフが描画できます。ちょっとデータを可視化してみたいという時に使えることでしょう。使ってみてください。また、今後も精力的になでしこの使い勝手を改善していきたいと思っています。ご期待ください。

自由型プログラマー。くじらはんどにて、プログラミングの楽しさを伝える活動をしている。代表作に、日本語プログラミング言語「なでしこ」 、テキスト音楽「サクラ」など。2001年オンラインソフト大賞入賞、2004年度未踏ユース スーパークリエータ認定、2010年 OSS貢献者章受賞。技術書も多く執筆している。直近では、「シゴトがはかどる Python自動処理の教科書(マイナビ出版)」「すぐに使える!業務で実践できる! PythonによるAI・機械学習・深層学習アプリのつくり方 TensorFlow2対応(ソシム)」「マンガでざっくり学ぶPython(マイナビ出版)」など。