Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
硬派で真面目なグラフを描く
Search
Yamaguchi Takahiro
December 16, 2021
Science
0
520
硬派で真面目なグラフを描く
Yamaguchi Takahiro
December 16, 2021
Tweet
Share
More Decks by Yamaguchi Takahiro
See All by Yamaguchi Takahiro
コンペを気楽に開催しよーぜ!@関西Kaggler会
nyk510
0
1.3k
Django のセキュリティリリースを見る
nyk510
0
100
3分でMLアプリを作る 〜推論コードにちょっとのStreamlitを添えて〜
nyk510
1
1.1k
CORSをちゃんと理解する atmaバックエンド勉強会#4
nyk510
0
410
pythonで気軽にパッケージを作るのは良いという話。
nyk510
14
9.7k
RestAPIのページネーション atma バックエンド勉強会 #3
nyk510
1
980
AWS CPU Credit を完全に理解する
nyk510
0
470
atmaCup#8 Opening
nyk510
0
270
オンサイトデータコンペの魅力: 関わる全員が楽しいコンペ設計のための取り組み
nyk510
3
5.5k
Other Decks in Science
See All in Science
動的トリートメント・レジームを推定するDynTxRegimeパッケージ
saltcooky12
0
200
データベース08: 実体関連モデルとは?
trycycle
PRO
0
940
01_篠原弘道_SIPガバニングボード座長_ポスコロSIPへの期待.pdf
sip3ristex
0
690
データベース06: SQL (3/3) 副問い合わせ
trycycle
PRO
1
640
My Little Monster
juzishuu
0
110
データマイニング - グラフ構造の諸指標
trycycle
PRO
0
190
Agent開発フレームワークのOverviewとW&B Weaveとのインテグレーション
siyoo
0
350
KH Coderチュートリアル(スライド版)
koichih
1
47k
CV_3_Keypoints
hachama
0
210
AIによる科学の加速: 各領域での革新と共創の未来
masayamoriofficial
0
150
機械学習 - pandas入門
trycycle
PRO
0
320
データベース14: B+木 & ハッシュ索引
trycycle
PRO
0
470
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
What's in a price? How to price your products and services
michaelherold
246
12k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Speed Design
sergeychernyshev
32
1.1k
How GitHub (no longer) Works
holman
315
140k
Docker and Python
trallard
46
3.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Gamification - CAS2011
davidbonilla
81
5.5k
4 Signs Your Business is Dying
shpigford
185
22k
Transcript
硬派で 真面目な グラフを描く 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!