硬派で真面目なグラフを描く

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. DEMO
    Plotly.js + Vuetify2(Vue.js)
    

    View Slide

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

    View Slide