Gobble up pudding

プログラミングの記事がメインのブログです。

MENU

JavaScriptで使えるグラフ描画ライブラリとその有効活用例について

スポンサードリンク

f:id:fa11enprince:20200327025625j:plain ふとニュースなどをみていて、新型コロナウィルスの感染状況のグラフのサイトを見つけて、お、綺麗だしシンプルでいいなと思ったのがここ。
よくある質問の部分も、一見、グラフを眺めていて、ん???と思う疑問点が書かれてあって良い。

「具体的な基準はMITライセンスに準拠します」とさらりと書いてあるだけなのがクール。もちろんGitHubへのリンクもあります。 これ厳密に従うとちょっと面倒なんですよね。とはいえ、数あるライセンスの中でも緩い縛りのMITライセンス。
単なるリンクまたはiframeであれば著作権表示はいらないのですが、せっかくなのでスクリーンショットを拝借しました。
ということで厳密に対応してみました。ただ、ライセンスファイルはブログの関係上置けないので、貼り付けました。 f:id:fa11enprince:20200327031353p:plain https://github.com/kaz-ogiwara/covid19/

MIT License

Copyright (c) 2020 Kazuki OGIWARA / 荻原 和樹

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

一応これは何だっていうのを解説しておくと要はMITの場合

  • このソフトウェアを誰でも無償で無制限に扱って良い。ただし、著作権表示および本許諾表示をソフトウェアのすべての複製または重要な部分に記載しなければならない。
  • 作者または著作権者は、ソフトウェアに関してなんら責任を負わない。

という2点が大事です。

本題とはそれますが、こういうのって、いかにデータを集めるかというのが大変ですよね・・・。

Chart.jsいいなと思って、ふとグラフ描画ライブラリって何がいいんだろうなーとふと思いました。 自分が使ったことあるのはPlotly.js。d3.jsを拡張していてインタラクティブで綺麗で、きめ細かい設定が簡単にできて仕事で使ってました。 PythonでもJavaScriptでも使えるし。 が、このChart.jsもいいなと。あと有償ですが有名どころだとHighcharts.jsもありますよね。

代表的なグラフライブラリのリンク

https://www.chartjs.org/
https://plotly.com/javascript/
https://www.highcharts.com/

比較

https://tech.willgate.co.jp/entry/2018/03/20/141000
https://www.npmtrends.com/chart.js-vs-highcharts-vs-plotly.js-vs-taucharts
Chart.js強いなーという感じです。

僕はPlotly.js推しです(というかそれしか使ったことない)。 リファレンスもまぁまぁ充実しているし、細かいことをやろうと思うと、ソースコードを読めば、 あ、これも設定できるんだとわかるし。よかったです。 あれなんですよね。等高線(コンター)図で綺麗なのを描きたかったり、場合によっては3Dにしたいなと思ったので…前回はそれを選んだのかな。 でも、周りでChart.jsのこともよく聞くので、今度使ってみようかなと思いました。