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
モダンWebフロントエンド環境で作る Jupyter Widget
Search
Yosuke Onoue
January 21, 2017
Technology
2
970
モダンWebフロントエンド環境で作る Jupyter Widget
PyData Osaka Meetup #3での発表資料です。
Yosuke Onoue
January 21, 2017
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
ネットワーク可視化の世界
likr
7
6k
Think About Front-end Web Development with Rust
likr
2
500
Yewにおけるoff-the-main-thread
likr
1
720
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
210
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
24
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.6k
Introduction to Graph Drawing
likr
0
470
20190707Ionic_Meetup.pdf
likr
0
400
About the end of the web
likr
2
500
Other Decks in Technology
See All in Technology
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
Bounded Context: Problem or Solution?
ewolff
1
210
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
君も受託系GISエンジニアにならないか
sudataka
2
370
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
230
データの品質が低いと何が困るのか
kzykmyzw
6
1k
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
「海外登壇」という 選択肢を与えるために 〜Gophers EX
logica0419
0
500
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Designing Experiences People Love
moore
139
23k
The Invisible Side of Design
smashingmag
299
50k
KATA
mclloyd
29
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
GraphQLとの向き合い方2022年版
quramy
44
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Transcript
モダンWebフロントエンド環境で作る Jupyter Widget おのうえ (@_likr) PyData Osaka Meetup #3
⾃自⼰己紹介 • おのうえ (@_likr) • 京都⼤大学 学際融合教育研究推進センター 政策のための科学ユニット 特定助教 •
ng-kyotoオーガナイザー、GDG神戸スタッフ 関⻄西フロントエンドUG、Kobe.py • 可視化、最適化、アルゴリズムの研究
前回のあらすじ NetworkXのグラフ描画はもうちょっと なんとかなるんじゃないかと思った 「NetworkXによるグラフの分析と可視化」@PyData Osaka Meetup #1
⽬目的 • JupyterとWebベースのグラフ描画ライブラリを 使って対話的なグラフ可視化を⾏行行う • widget-cookiecutterを使⽤用 • トランスパイラとモジュールバンドラを 使ったモダンなフロントエンド開発スタイルを採⽤用 •
グラフ描画ライブラリはWebComponentsとして提供
Jupiter Widget • http://jupyter.org/widgets.html • https://ipywidgets.readthedocs.io/en/latest/ • Jupyter Notebookに対話的な要素を追加する •
対話的なデータ可視化 • Ipyleaflet、bplot、pythreejs • ZMQとWebSocketを使ったPython-JS間の値同期
WebComponents • https://www.webcomponents.org/ • 独⾃自の振る舞いをするHTML要素を作成し 配布、再利利⽤用する仕組み • 4つのWeb標準規格の総称 • CustomElements、HTML
Templates、 Shadow DOM、HTML Imports • WebComponentsを便便利利にするフレームワーク • Polymer、X-Tag、SkateJS、Bosonic
EgRenderer • ⾃自作グラフ描画ライブラリ • canvasベース • トランジションを頑張る • めっちゃ作りかけ •
WebGL対応したい • OGDFのレイアウトをサポートしたい • Emscripten (asm.js & WebAssembly) • https://likr.github.io/eg-renderer-canvas/
HTML API 1 <!DOCTYPE html> 2 <html> 3 <head> 4
<meta charset="utf-8"/> 5 <title>EgRenderer Example</title> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/ webcomponents.min.js"></script> 7 <link rel="import" href="../../eg-renderer.html"> 8 </head> 9 <body> 10 <eg-renderer 11 width="600" 12 height="400" 13 data='{ 14 "vertices": [ 15 {"u":0, "d": {"text": "source"}}, 16 {"u":1, "d": {"text": "target"}} 17 ], 18 "edges": [ 19 {"u": 0, "v": 1, "d": {}} 20 ] 21 }' 22 transition-duration="500" 23 layout="hierarchy"> 24 </eg-renderer> 25 </body> 26 </html>
JS API 1 <!DOCTYPE html> 2 <html> 3 <head> 4
<meta charset="utf-8"/> 5 <title>EgRenderer Example</title> 6 <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/1.0.0/fetch.min.js"></script> 7 <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/ webcomponents.min.js"></script> 8 <link rel="import" href="../../eg-renderer.html"> 9 </head> 10 <body> 11 <eg-renderer 12 width="600" 13 height="400" 14 transition-duration="500" 15 layout="hierarchy"> 16 </eg-renderer> 17 <script> 18 fetch('data.json') 19 .then((response) => response.text()) 20 .then((data) => { 21 const renderer = document.querySelector('eg-renderer') 22 renderer.setAttribute('data', data) 23 renderer 24 .layout() 25 .center() 26 }) 27 </script> 28 </body> 29 </html>
widget-cookiecutter • cookiecutter • https://github.com/audreyr/cookiecutter • プロジェクトテンプレート • Python製 •
widget-cookiecutter • Jupyter Widget⽤用テンプレート • PyPI、npmへの配布が容易易 $ pip install cookiecutter $ cookiecutter https://github.com/jupyter/widget-cookiecutter.git
Development • Pythonコードはpyegrenderer(プロジェクト名)以下 • JSコードはjs以下 • npmでモジュール管理理 • webpackで開発 $
git clone https://github.com/likr/pyegrenderer.git $ cd pyegrenderer $ pip install -e . $ jupyter nbextension install --py --symlink --sys-prefix pyegrenderer $ jupyter nbextension enable --py --sys-prefix pyegrenderer
トランスパイラとモジュールバンドラ • トランスパイラ • JSの機能を拡張、古いブラウザへの対応 • Babel、TypeScript • モジュールバンドラ •
複数のJSファイル等を単⼀一のファイルにまとめる • Node.jsスタイルのプログラミング(CommonJS) • Webpack • widget-cookiecutterに標準搭載 • loaderでトランスパイルも可能
js/webpack.config.js 6 var loaders = [ 7 { 8 test:
/\.js$/, 9 include: [ 10 path.resolve(__dirname, 'src'), 11 path.resolve(__dirname, 'node_modules/eg-renderer-canvas') 12 ], 13 loader: 'babel-loader', 14 query: { 15 presets: ['latest'], 16 plugins: [ 17 'transform-custom-element-classes' 18 ] 19 } 20 }, 21 { 22 test: /\.json$/, 23 loader: 'json-loader' 24 } 25 ]
js/src/example.js 25 // Custom View. Renders the widget model. 26
const HelloView = widgets.DOMWidgetView.extend({ 27 render: function () { 28 this.model.on('change:data', () => { 29 const data = this.model.get('data') 30 this.component.setAttribute('data', data) 31 }) 32 33 this.model.on('change:layout_method', () => { 34 const layoutMethod = this.model.get('layout_method') 35 this.component.setAttribute('layout', layoutMethod) 36 }) 37 38 this.component = document.createElement('eg-renderer') 39 this.component.setAttribute('auto-update', '') 40 this.component.setAttribute('auto-centering', '') 41 this.component.setAttribute('transition-duration', '500') 42 this.component.setAttribute('width', '1000') 43 this.component.setAttribute('height', '750') 44 this.component.setAttribute('data', this.model.get('data')) 45 this.component.setAttribute('layout', this.model.get('layout_method')) 46 this.el.appendChild(this.component) 47 } 48 })
pyegrenderer/example.py 1 import json 2 import ipywidgets as widgets 3
from traitlets import Unicode 4 5 6 @widgets.register('hello.Hello') 7 class EgRenderer(widgets.DOMWidget): 8 """""" 9 _view_name = Unicode('HelloView').tag(sync=True) 10 _model_name = Unicode('HelloModel').tag(sync=True) 11 _view_module = Unicode('pyegrenderer').tag(sync=True) 12 _model_module = Unicode('pyegrenderer').tag(sync=True) 13 data = Unicode('{"vertices": [], "edges": []}').tag(sync=True) 14 layout_method = Unicode('hierarchy').tag(sync=True) 15 16 def render(self, graph): 17 vertices = [{'u': u, 'd': {'text': graph.node[u]['label']}} 18 for u in graph.nodes()] 19 edges = [{'u': u, 'v': v, 'd': {}} 20 for u, v in graph.edges()] 21 self.data = json.dumps({'vertices': vertices, 'edges': edges})
デモ • https://youtu.be/0RvD9TlIrSo
まとめ • グラフ可視化するJupyter Widget作った • https://github.com/likr/pyegrenderer • widget-cookiecutterが便便利利だった • モダンなフロントエンドフレームワークの利利⽤用も可能
• 今後も真⾯面⽬目に作るかは未定 • 既に本格的なグラフ可視化Widgetもあるよ! • https://github.com/cytoscape/jupyter-cytoscape