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
410
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
560
Benchpress your Legacy Applications With React
hswolff
0
240
Reach for the Stars with Apollo
hswolff
0
170
React Native and D3JS
hswolff
3
9.7k
Going Native with React Native
hswolff
5
1.2k
From Closure To Angular
hswolff
0
3.7k
EmberJS Hacker Hours - Ghost
hswolff
0
180
Getting Hacking With Ghost
hswolff
0
210
Other Decks in Programming
See All in Programming
MCP with Cloudflare Workers
yusukebe
2
220
Criando Commits Incríveis no Git
marcelgsantos
2
170
The Efficiency Paradox and How to Save Yourself and the World
hollycummins
1
440
htmxって知っていますか?次世代のHTML
hiro_ghap1
0
330
testcontainers のススメ
sgash708
1
120
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
290
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
130
命名をリントする
chiroruxx
1
380
アクターシステムに頼らずEvent Sourcingする方法について
j5ik2o
4
160
Zoneless Testing
rainerhahnekamp
0
120
fs2-io を試してたらバグを見つけて直した話
chencmd
0
220
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
190
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.3k
Designing for Performance
lara
604
68k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
How to Ace a Technical Interview
jacobian
276
23k
Building an army of robots
kneath
302
44k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
810
Bash Introduction
62gerente
608
210k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
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