$30 off During Our Annual Pro Sale. View Details »

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

Yamaguchi Takahiro
December 16, 2021
Science
0
310

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

Yamaguchi Takahiro

December 16, 2021
Tweet

More Decks by Yamaguchi Takahiro

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

Other Decks in Science

See All in Science
20221005_AI勉強会
ecoopnet
0
220
blasé: An interpretable transfer learning approach to cool star échelle spectroscopy
gully
0
100
Atlas User Interfaces to Accelerate Data Access
ngehlenborg
0
140
なぜ人はRNA-Seqのリードカウントを負の二項分布に従うと考えるのか
cakkby
0
190
SNLP2022:What does the sea say to the shore? A BERT based DST style approach for speaker to dialogue attribution in novels
yukizenimoto
0
150
機械学習を用いた効果検証~傾向スコアとX-Learner~
s1ok69oo
1
440
機械学習における評価指標~AUC&C-index~
taka88
0
440
ベイズ統計学入門 〜頻度主義からベイズ主義へ〜
ueniki
0
1k
Attention
nariaki3551
0
410
The ACM Web Conference 2022 国際会議報告
ynakano
1
150
SIGNATE 　ソニーグループ合同データ分析コンペティション（for Recruiting）　 3rd Place Solution
yayaya
1
260
Unicorn: Reasoning about Configurable System Performance through the Lens of Causality
pjamshidi
0
110

Featured

See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
107
5.8k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
Atom: Resistance is Futile
akmur
256
24k
Learning to Love Humans: Emotional Interface Design
aarron
262
38k
What the flash - Photography Introduction
edds
64
10k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
3
490
Git: the NoSQL Database
bkeepers
PRO
417
60k
Support Driven Design
roundedbygravity
87
8.8k
A Tale of Four Properties
chriscoyier
149
21k
How STYLIGHT went responsive
nonsquared
86
4.1k
A better future with KSS
kneath
228
16k
For a Future-Friendly Web
brad_frost
166
7.7k

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!