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
410
硬派で真面目なグラフを描く
Yamaguchi Takahiro
December 16, 2021
Tweet
Share
More Decks by Yamaguchi Takahiro
See All by Yamaguchi Takahiro
コンペを気楽に開催しよーぜ!@関西Kaggler会
nyk510
0
710
Django のセキュリティリリースを見る
nyk510
0
26
3分でMLアプリを作る 〜推論コードにちょっとのStreamlitを添えて〜
nyk510
1
960
CORSをちゃんと理解する atmaバックエンド勉強会#4
nyk510
0
330
pythonで気軽にパッケージを作るのは良いという話。
nyk510
14
9.2k
RestAPIのページネーション atma バックエンド勉強会 #3
nyk510
1
710
AWS CPU Credit を完全に理解する
nyk510
0
390
atmaCup#8 Opening
nyk510
0
190
オンサイトデータコンペの魅力: 関わる全員が楽しいコンペ設計のための取り組み
nyk510
3
5k
Other Decks in Science
See All in Science
構造設計のための3D生成AI-最新の取り組みと今後の展開-
kojinishiguchi
0
280
AI科学の何が“哲学”の問題になるのか ~問いマッピングの試み~
rmaruy
1
1.9k
最適化超入門
tkm2261
11
2.9k
汎用原子シミュレータMatlantis のご紹介
matlantis
0
270
qeMLパッケージの紹介
bob3bob3
0
1.2k
A Theory of Scrum Team Effectiveness 〜『ゾンビスクラムサバイバルガイド』の裏側にある科学〜
bonotake
15
6.2k
Science of Scienceおよび科学計量学に関する研究論文の俯瞰可視化_LT版
hayataka88
0
710
Endocannabinology 101
drbonci
PRO
0
300
「国と音楽」 ~spotifyrを用いて~ #muana
bob3bob3
2
390
Celebrate UTIG: Staff and Student Awards 2024
utig
0
200
【論文紹介】DocTr_ Document Transformer for Structured Information Extraction in Documents / iccv2023-doctr
yuya4
3
680
PRML Chapter 9
snkmr
1
130
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Bash Introduction
62gerente
607
210k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Infographics Made Easy
chrislema
238
18k
Git: the NoSQL Database
bkeepers
PRO
423
64k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
Making Projects Easy
brettharned
111
5.7k
Building Applications with DynamoDB
mza
89
5.8k
GraphQLとの向き合い方2022年版
quramy
36
13k
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!