Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
React Native and D3 Workshop
Harry Wolff
January 19, 2017
Programming
1
370
React Native and D3 Workshop
Harry Wolff
January 19, 2017
Tweet
Share
More Decks by Harry Wolff
See All by Harry Wolff
hswolff
1
150
hswolff
0
98
hswolff
0
110
hswolff
3
8.8k
hswolff
5
860
hswolff
0
3.6k
hswolff
0
160
hswolff
0
180
Other Decks in Programming
See All in Programming
akatsukinewgrad
0
220
bkuhlmann
4
630
maito1201
0
570
fkubota
1
400
azdaroth
0
100
muttsu_623
0
570
pdone
0
220
adoranwodo
0
270
bkuhlmann
4
260
nbkouhou
0
1.1k
mfunaki
1
520
aratayokoyama
0
250
Featured
See All Featured
keavy
106
14k
tammielis
237
23k
dotmariusz
94
5.1k
bryan
30
3.3k
lara
172
9.5k
lauravandoore
11
1.3k
mthomps
39
2.3k
productmarketing
5
660
wjessup
338
16k
marktimemedia
6
340
tanoku
86
8.5k
aarron
257
36k
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