硬派で 真面目な グラフを描く atma Web Tech LT #0 2021/12/17 Yamaguchi Takahiro

Hello! 山口貴大 twitter @nyker_goto atma(アートマ)株式会社 取締役 フロントエンド・機械学習・バックエンド・PM担当 京都大学大学院 最適化数理卒 SGDが好き😆 Kaggle Master kaggle.com/nyk510 2

機械学習とかやるので 統計っぽい真面目グラフをまあまあ描きます (基本は python です。)

基本は python ですが、 なんやかんやで可視化結果を フロント(ブラウザ)でインタラクティブに 出したいときがあります。

フロントエンドでも、硬派で真面目なグラフ をかきたい! のです。

硬派で真面目? ● データサイエンスで利用するようなやつ ● 統計的な情報が見れるものが良い ○ 例えば histogram や boxplot などに デフォルトで対応してほしい

JavaScript のライブラリ・色々ある Chart.js ● 無料・日本で人気・ゆるふわ系 GoogleChart ● 無料・スプシ連携などならでは感ある機能つき ● それ故データの渡し方に癖 (DataFrameを合わせて作らないと駄目) HightChart ● 世界で人気・見た目は硬派 ● 商用利用はお金がかかる & 統計系のグラフはあるが代表点計算が必要だったりで面倒 D3.js ● 無料・SVGベース ● 自由度高い・めっちゃきれいなグラフのサンプルがたくさんあるので見てて楽しい ● ドキュメントがわかりにくい & 記述方法が独特 (個人的見解) でしんどい

javascript のライブラリ・色々ある Chart.js ● 無料・日本で人気・ゆるふわ系 GoogleChart ● 無料・スプシ連携などならでは感ある機能つき ● それ故データの渡し方に癖 (DataFrameを合わせて作らないと駄目) HightChart ● 世界で人気・見た目は硬派 ● 商用利用はお金がかかる & 統計系のグラフはあるが代表点計算が必要だったりで面倒 D3.js ● 無料・SVGベース ● 自由度高い・めっちゃきれいなグラフのサンプルがたくさんあるので見てて楽しい ● ドキュメントがわかりにくい & 記述方法が独特 (個人的見解) でしんどい どれも微妙

javascript のライブラリ・色々ある Chart.js ● 無料・日本で人気・ゆるふわ系 GoogleChart ● 無料・スプシ連携などならでは感ある機能つき ● それ故データの渡し方に癖 (DataFrameを合わせて作らないと駄目) HightChart ● 世界で人気・見た目は硬派 ● 商用利用はお金がかかる & 統計系のグラフはあるが代表点計算が必要だったりで面倒 D3.js ● 無料・SVGベース ● 自由度高い・めっちゃきれいなグラフのサンプルがたくさんあるので見てて楽しい ● ドキュメントがわかりにくい & 記述方法が独特 (個人的見解) でしんどい 良い感じの 硬派で真面目なのないの?

あります! / Plotly.js ● d3.jsをベースとした可視化ライブラリ・無料! ● python/Rからも使える (分析界隈だとpython のライブラリとして有名)

Plotly.js / いいところ! 1 APIがシンプルでわかりやすい ● DOM/Data/Layoutを渡すシンプル設計 ● dataが超絶直感的・ヤバイ ○ x: 値/type: グラフ種類/name: 系列名 統計系のplotに対応 ● バイオリンplot/ヒストグラム/箱ひげ図など 箱ひげ図を描くときにデータ点だけ(!!)渡せば良い ● 代表点計算等はplotly側がやってくれる ● ヤバイ 代表点計算要らずで超直感的にboxplotが出来る。痺れる。

Plotly.js / いいところ! 2 リファレンスが死ぬほど丁寧・わかりやすい ● グラフ種類ごとにサンプルがたくさんある ● 加えてdata/layoutの隅々まできっちりドキュ メントがあり、したいことで調べるとちゃんと 設定方法がわかる。感動。 ● ただでさえ直感的なのにいたれりつくせり 出力グラフの操作パネルがデフォルトでついてくる ● 拡大縮小や画像として保存まである。地味に便 利。 どの階層に記載すべきか・何が起こるかが丁寧に記載されている https://plotly.com/javascript/reference/layout/xaxis/

DEMO Plotly.js + Vuetify2(Vue.js)

まとめ 硬派で真面目なグラフを手軽にかける plotly.js は良いYo!