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
React Native and D3 Workshop
Search
Harry Wolff
January 19, 2017
Programming
1
430
React Native and D3 Workshop
Harry Wolff
January 19, 2017
Tweet
Share
More Decks by Harry Wolff
See All by Harry Wolff
Evergreen Legacy Applications
hswolff
1
610
Benchpress your Legacy Applications With React
hswolff
0
290
Reach for the Stars with Apollo
hswolff
0
180
React Native and D3JS
hswolff
3
9.9k
Going Native with React Native
hswolff
5
1.2k
From Closure To Angular
hswolff
0
3.7k
EmberJS Hacker Hours - Ghost
hswolff
0
190
Getting Hacking With Ghost
hswolff
0
230
Other Decks in Programming
See All in Programming
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
4
480
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
270
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
470
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
250
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.2k
Goで作る、開発・CI環境
sin392
0
240
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
960
すべてのコンテキストを、 ユーザー価値に変える
applism118
4
1.4k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
600
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
Producing Creativity
orderedlist
PRO
346
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
How GitHub (no longer) Works
holman
314
140k
Optimizing for Happiness
mojombo
379
70k
Designing for Performance
lara
610
69k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Transcript
React Native, SVG, and D3 hswolff @hswolff
Harry Wolff Senior UI Engineer @ MongoDB.com Blog @ hswolff.com
Twitter @ hswolff GitHub @ hswolff
What do I know about React Native?
Chartbeat iOS http://blog.chartbeat.com/2016/04/07/say-hello-to-the-all-new-chartbeat-ios-app/
None
React Native D3JS D3JS and React Native Project
Exercise
Exercise 1 Let’s install some prerequisites. https://facebook.github.io/react-native/docs/ getting-started.html Everything up
to “Testing your React Native Installation” section.
What is React Native?
A framework for building native apps with React
React Native is built on top of React
None
None
None
None
How does this work?
React Native …creates a bridge between JavaScript and Native Code
(iOS / Android) …and handles passing information between the two environments More details: http://tadeuzagallo.com/ blog/react-native-bridge/
How is React Native different than React?
JavaScript Environment
No DOM
React Native Packager https://github.com/facebook/react- native/tree/master/packager
npm friendly
Exercise
Exercise 1 1. You should have node, watchman, and either
Xcode or Android Studio installed. 2. Install React Native CLI: npm install -g react- native-cli 3. react-native init ReactNativeAndD3Workshop 4. cd ReactNativeAndD3Workshop/ 5. react-native run-ios (or react-native run-android)
Exercise 1
What is SVG?
SVG XML-based vector image format
SVG • XML: markup language • Human and machine readable
• Vector image: use of polygons to represent images • Can be resized without losing quality
SVG Elements • Root element: SVG • Creates an SVG
fragment, own viewport and coordinate system • Graphic elements: <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use>
Exercise
Exercise 2 https://codepen.io/hswolff/pen/ZLpgzy
SVG <path> https://developer.mozilla.org/en-US/docs/Web/SVG/ Tutorial/Paths “Paths create complex shapes by combining
multiple straight lines or curved lines” “The shape of a path element is defined by one attribute: d.”
SVG <path> Create graphics using line commands Move to x
10, y 10 Horizontal line of 90 Vertical line of 90 Horizontal line of 10 Line to x 10, y 10
SVG <path>
What is D3JS?
“a JavaScript library for manipulating documents based on data” https://d3js.org/
“D3 helps you bring data to life using HTML, SVG,
and CSS.” https://d3js.org/
https://d3js.org/
D3 4.0 Now Modular
None
None
d3-scale https://github.com/d3/d3-scale “Continuous scales map a continuous, quantitative input domain
to a continuous output range.” Continuous Scales “Given a value from the domain, returns the corresponding value from the range.”
d3-scale https://github.com/d3/d3-scale
d3-scale https://github.com/d3/d3-scale “Time scales are a variant of linear scales
that have a temporal domain: domain values are coerced to dates rather than numbers" Time Scales
d3-scale https://github.com/d3/d3-scale
d3-shape https://github.com/d3/d3-shape
d3-shape https://github.com/d3/d3-shape “line generator can then be used to compute
the d attribute of an SVG path element”
d3-shape https://github.com/d3/d3-shape
d3-shape https://github.com/d3/d3-shape
Exercise
Exercise 3 https://codepen.io/hswolff/pen/qRaGOE
Exercise 3 Answer https://codepen.io/hswolff/pen/egdqbL
How does D3JS work with React Native?
ART https://github.com/sebmarkbage/art “ART is a retained mode vector drawing API”
ART https://github.com/sebmarkbage/art
ART https://github.com/sebmarkbage/art
React ART https://github.com/reactjs/react-art “React ART is a JavaScript library for
drawing vector graphics using React.” “It provides declarative and reactive bindings to the ART library.”
React ART https://github.com/reactjs/react-art
React Native ART https://github.com/facebook/react-native/tree/master/
None
Exercise
Exercise 4 Let’s get React Native ART working!
Link ART https://facebook.github.io/react-native/docs/linking- libraries-ios.html#manual-linking
Exercise 4 Link React Native ART: http://facebook.github.io/react- native/docs/linking-libraries-ios.html $ open
node_modules/react-native/Libraries/ART $ react-native run-ios
Exercise 4 Use the React Native ART Component
Exercise 4
Exercise 4
Exercise 4
Project
None
None
index.ios.js js/ Page.js Graph.js Part 1: App structure
index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js Part 2: Graph
index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js Part 3: X Axis
index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js Part 4: Y Axis
index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js ControlButton.js Part 5: Buttons
index.ios.js js/ Page.js Graph.js fixtures.js graph-utils.js ControlButton.js Part 6: Animate!
Full featured app
None
Open Sourced https://github.com/hswolff/ BetterWeather
Resources https://speakerdeck.com/hswolff/react-native- and-d3js https://d3js.org/ http://hswolff.com/blog/react-native-art-and-d3/ https://github.com/hswolff/BetterWeather
React Native, SVG, and D3 hswolff @hswolff https://speakerdeck.com/hswolff/react-native-and-d3js