Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

C4c6c7b4fdf9285bcf12c5caa58c8d53?s=47 Yamaguchi Takahiro
December 16, 2021
Science
0
230

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

C4c6c7b4fdf9285bcf12c5caa58c8d53?s=128

Yamaguchi Takahiro

December 16, 2021
Tweet

More Decks by Yamaguchi Takahiro

See All by Yamaguchi Takahiro
3分でMLアプリを作る 〜推論コードにちょっとのStreamlitを添えて〜
C4c6c7b4fdf9285bcf12c5caa58c8d53?s=48 nyk510
1
550
CORSをちゃんと理解する atmaバックエンド勉強会#4
C4c6c7b4fdf9285bcf12c5caa58c8d53?s=48 nyk510
0
220
pythonで気軽にパッケージを作るのは良いという話。
C4c6c7b4fdf9285bcf12c5caa58c8d53?s=48 nyk510
15
8.1k
RestAPIのページネーション atma バックエンド勉強会 #3
C4c6c7b4fdf9285bcf12c5caa58c8d53?s=48 nyk510
0
160
AWS CPU Credit を完全に理解する
C4c6c7b4fdf9285bcf12c5caa58c8d53?s=48 nyk510
0
65
atmaCup#8 Opening
C4c6c7b4fdf9285bcf12c5caa58c8d53?s=48 nyk510
0
140
オンサイトデータコンペの魅力: 関わる全員が楽しいコンペ設計のための取り組み
C4c6c7b4fdf9285bcf12c5caa58c8d53?s=48 nyk510
3
4k
atmaCup#5 solutionまとめ
C4c6c7b4fdf9285bcf12c5caa58c8d53?s=48 nyk510
1
790
atmaCup_5__review-meeting.pdf
C4c6c7b4fdf9285bcf12c5caa58c8d53?s=48 nyk510
0
61

Other Decks in Science

See All in Science
抵抗にあったっていいじゃないか、にんげんだもの / Principles of Human Resistance
055e63a40190884fdc17b918c6f6aa7e?s=48 aki_moon
0
520
Text Gestalt: Stroke-Aware Scene Text Image Super-Resolution
59d6ec9d4308628a6009b2ec5bc6d2d8?s=48 sansan_randd
1
890
2020年京都大学_電磁気学
Afcf52f6df4e2856cc0fce598c4af4e1?s=48 kamakiri1225
0
550
Attentive Heterogeneous Graph Embedding for Job Mobility Prediction
A2cac4b3dcb2bc0b87917ddc034ef708?s=48 sansandsoc
0
1.1k
OpenFAOM_pisoFoamによる2次元円柱周りの解析
Afcf52f6df4e2856cc0fce598c4af4e1?s=48 kamakiri1225
0
440
20220121_バスケットボール周りの流れ
Afcf52f6df4e2856cc0fce598c4af4e1?s=48 kamakiri1225
0
240
Освобождение Европы
793807265f3579fc43408e1e5a1dec77?s=48 vika97
0
100
2020年京都大学_量子力学
Afcf52f6df4e2856cc0fce598c4af4e1?s=48 kamakiri1225
0
380
ROS再入門 -Lidarセンサーを触ってみた-
4b2f3a64637b51e81813accbe8a98083?s=48 miura55
0
230
Vaccine Information
9e301e7ea0c63e925e0dd48ca180a280?s=48 yoshimine77
0
110
Legal NLP - Breaking the Legal Language Barrier ?
0f2a473c07602f3dd53c5ed0de0c56b5?s=48 danielkatz
PRO
0
1.7k
Kernel Approximation for Offline Quantum-Enhanced Machine Learning
Cad23af0aaa59ed6f44b54872eee1baf?s=48 travissch
0
150

Featured

See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
268
11k
The Illustrated Children's Guide to Kubernetes
0438ae60cde4c7add6f9da48f28c15cc?s=48 chrisshort
14
35k
Why Our Code Smells
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
54k
In The Pink: A Labor of Love
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
130
21k
Atom: Resistance is Futile
7fa6101cd43067653cf4ac6c7ca54305?s=48 akmur
255
20k
No one is an island. Learnings from fostering a developers community.
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
9
1.1k
Documentation Writing (for coders)
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
48
2.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
119
28k
The Straight Up "How To Draw Better" Workshop
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
225
120k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
Rebuilding a faster, lazier Slack
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
62
7.2k

Transcript

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

    Takahiro

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

    Kaggle Master kaggle.com/nyk510 2

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

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

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

  6. 硬派で真面目? • データサイエンスで利用するようなやつ • 統計的な情報が見れるものが良い ◦ 例えば histogram や boxplot

    などに デフォルトで対応してほしい

  7. JavaScript のライブラリ・色々ある Chart.js • 無料・日本で人気・ゆるふわ系 GoogleChart • 無料・スプシ連携などならでは感ある機能つき • それ故データの渡し方に癖

    (DataFrameを合わせて作らないと駄目) HightChart • 世界で人気・見た目は硬派 • 商用利用はお金がかかる & 統計系のグラフはあるが代表点計算が必要だったりで面倒 D3.js • 無料・SVGベース • 自由度高い・めっちゃきれいなグラフのサンプルがたくさんあるので見てて楽しい • ドキュメントがわかりにくい & 記述方法が独特 (個人的見解) でしんどい

  8. javascript のライブラリ・色々ある Chart.js • 無料・日本で人気・ゆるふわ系 GoogleChart • 無料・スプシ連携などならでは感ある機能つき • それ故データの渡し方に癖

    (DataFrameを合わせて作らないと駄目) HightChart • 世界で人気・見た目は硬派 • 商用利用はお金がかかる & 統計系のグラフはあるが代表点計算が必要だったりで面倒 D3.js • 無料・SVGベース • 自由度高い・めっちゃきれいなグラフのサンプルがたくさんあるので見てて楽しい • ドキュメントがわかりにくい & 記述方法が独特 (個人的見解) でしんどい どれも微妙

  9. javascript のライブラリ・色々ある Chart.js • 無料・日本で人気・ゆるふわ系 GoogleChart • 無料・スプシ連携などならでは感ある機能つき • それ故データの渡し方に癖

    (DataFrameを合わせて作らないと駄目) HightChart • 世界で人気・見た目は硬派 • 商用利用はお金がかかる & 統計系のグラフはあるが代表点計算が必要だったりで面倒 D3.js • 無料・SVGベース • 自由度高い・めっちゃきれいなグラフのサンプルがたくさんあるので見てて楽しい • ドキュメントがわかりにくい & 記述方法が独特 (個人的見解) でしんどい 良い感じの 硬派で真面目なのないの?

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

  11. Plotly.js / いいところ! 1 APIがシンプルでわかりやすい • DOM/Data/Layoutを渡すシンプル設計 • dataが超絶直感的・ヤバイ ◦

    x: 値/type: グラフ種類/name: 系列名 統計系のplotに対応 • バイオリンplot/ヒストグラム/箱ひげ図など 箱ひげ図を描くときにデータ点だけ(!!)渡せば良い • 代表点計算等はplotly側がやってくれる • ヤバイ 代表点計算要らずで超直感的にboxplotが出来る。痺れる。

  12. Plotly.js / いいところ! 2 リファレンスが死ぬほど丁寧・わかりやすい • グラフ種類ごとにサンプルがたくさんある • 加えてdata/layoutの隅々まできっちりドキュ メントがあり、したいことで調べるとちゃんと

    設定方法がわかる。感動。 • ただでさえ直感的なのにいたれりつくせり 出力グラフの操作パネルがデフォルトでついてくる • 拡大縮小や画像として保存まである。地味に便 利。 どの階層に記載すべきか・何が起こるかが丁寧に記載されている https://plotly.com/javascript/reference/layout/xaxis/

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

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