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
420
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
580
Benchpress your Legacy Applications With React
hswolff
0
260
Reach for the Stars with Apollo
hswolff
0
170
React Native and D3JS
hswolff
3
9.8k
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
220
Other Decks in Programming
See All in Programming
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
Introduction to kotlinx.rpc
arawn
0
630
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
Grafana Cloudとソラカメ
devoc
0
140
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
DROBEの生成AI活用事例 with AWS
ippey
0
130
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
『品質』という言葉が嫌いな理由
korimu
0
160
時計仕掛けのCompose
mkeeda
1
280
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
Featured
See All Featured
BBQ
matthewcrist
86
9.5k
How GitHub (no longer) Works
holman
313
140k
What's in a price? How to price your products and services
michaelherold
244
12k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Producing Creativity
orderedlist
PRO
343
39k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Unsuck your backbone
ammeep
669
57k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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