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
510
硬派で真面目なグラフを描く
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
93
3分でMLアプリを作る 〜推論コードにちょっとのStreamlitを添えて〜
nyk510
1
1.1k
CORSをちゃんと理解する atmaバックエンド勉強会#4
nyk510
0
400
pythonで気軽にパッケージを作るのは良いという話。
nyk510
14
9.6k
RestAPIのページネーション atma バックエンド勉強会 #3
nyk510
1
960
AWS CPU Credit を完全に理解する
nyk510
0
460
atmaCup#8 Opening
nyk510
0
260
オンサイトデータコンペの魅力: 関わる全員が楽しいコンペ設計のための取り組み
nyk510
3
5.5k
Other Decks in Science
See All in Science
baseballrによるMLBデータの抽出と階層ベイズモデルによる打率の推定 / TokyoR118
dropout009
1
530
システム数理と応用分野の未来を切り拓くロードマップ・エンターテインメント(スポーツ)への応用 / Applied mathematics for sports entertainment
konakalab
1
370
データベース03: 関係データモデル
trycycle
PRO
1
240
07_浮世満理子_アイディア高等学院学院長_一般社団法人全国心理業連合会代表理事_紹介資料.pdf
sip3ristex
0
550
論文紹介 音源分離:SCNET SPARSE COMPRESSION NETWORK FOR MUSIC SOURCE SEPARATION
kenmatsu4
0
280
生成検索エンジン最適化に関する研究の紹介
ynakano
2
1.2k
06_浅井雄一郎_株式会社浅井農園代表取締役社長_紹介資料.pdf
sip3ristex
0
580
白金鉱業Meetup Vol.16_数理最適化案件のはじめかた・すすめかた
brainpadpr
4
1.9k
機械学習 - SVM
trycycle
PRO
1
870
深層学習を用いた根菜類の個数カウントによる収量推定法の開発
kentaitakura
0
170
データマイニング - グラフ構造の諸指標
trycycle
PRO
0
150
機械学習 - K-means & 階層的クラスタリング
trycycle
PRO
0
1k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
A designer walks into a library…
pauljervisheath
207
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
For a Future-Friendly Web
brad_frost
179
9.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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!