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
400
硬派で真面目なグラフを描く
Yamaguchi Takahiro
December 16, 2021
Tweet
Share
More Decks by Yamaguchi Takahiro
See All by Yamaguchi Takahiro
Django のセキュリティリリースを見る
nyk510
0
20
3分でMLアプリを作る 〜推論コードにちょっとのStreamlitを添えて〜
nyk510
1
900
CORSをちゃんと理解する atmaバックエンド勉強会#4
nyk510
0
320
pythonで気軽にパッケージを作るのは良いという話。
nyk510
14
9.1k
RestAPIのページネーション atma バックエンド勉強会 #3
nyk510
1
640
AWS CPU Credit を完全に理解する
nyk510
0
370
atmaCup#8 Opening
nyk510
0
180
オンサイトデータコンペの魅力: 関わる全員が楽しいコンペ設計のための取り組み
nyk510
3
4.9k
atmaCup#5 solutionまとめ
nyk510
1
1.3k
Other Decks in Science
See All in Science
Science of Scienceおよび科学計量学に関する研究論文の俯瞰可視化_LT版
hayataka88
0
470
Machine Learning for Materials (Lecture 4)
aronwalsh
0
670
バックアップ『しながら』ランサムウェア検出も!? セキュリティ強化が満載 Veeam 12.1
climbteam
0
300
qeMLパッケージの紹介
bob3bob3
0
970
History towards Universal Neural Network Potential for Material Discovery
matlantis
0
150
ultraArmをモニター提供してもらった話
miura55
0
110
LCG20
lcolladotor
0
210
Running llama.cpp on the CPU
ianozsvald
0
210
勉強会資料 / “Asymptotic Statistics” Section 3.1
asymptotic_minato
0
110
2023-08-02_spatialLIBD_BioC2023_demo
lcolladotor
0
110
2023-07-18_Verge_Genomics
lcolladotor
0
110
AI(人工知能)の過去・現在・未来 —AIは人間を超えるのか—
tagtag
0
120
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
68
8.6k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Automating Front-end Workflow
addyosmani
1356
200k
Teambox: Starting and Learning
jrom
128
8.4k
How STYLIGHT went responsive
nonsquared
92
4.8k
Rebuilding a faster, lazier Slack
samanthasiow
73
8.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Bash Introduction
62gerente
604
210k
Code Review Best Practice
trishagee
55
15k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Web development in the modern age
philhawksworth
202
10k
Producing Creativity
orderedlist
PRO
337
39k
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!