React Native and D3JS

Example code: https://github.com/hswolff/BetterWeather

D3 lets you create beautiful charts and graphs. React Native lets you create iOS and Android applications with React. Did you know that you can put these two powerful technologies together? Come learn how you can create beautiful and reusable d3 charts for your React Native applications. Create a graph once and let it power iOS and Android at the same time.

Transcript

1. React Native and D3JS hswolff @hswolff
2. Harry Wolff Senior UI Engineer @ MongoDB.com Blog @ hswolff.com Twitter @ hswolff GitHub @ hswolff
3. What do I know about React Native?
4. Chartbeat iOS http://blog.chartbeat.com/2016/04/07/say-hello-to-the-all-new-chartbeat-ios-app/
6. What is React Native?
7. A framework for building native apps with React
8. “React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.” https://facebook.github.io/react-native/
9. https://facebook.github.io/react-native/
10. What is D3JS?
11. “a JavaScript library for manipulating documents based on data” https://d3js.org/
12. “D3 helps you bring data to life using HTML, SVG, and CSS.” https://d3js.org/
13. https://d3js.org/
14. D3 4.0 Now Modular
17. 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.”
18. d3-scale https://github.com/d3/d3-scale
19. 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
20. d3-scale https://github.com/d3/d3-scale
21. d3-shape https://github.com/d3/d3-shape
22. d3-shape https://github.com/d3/d3-shape “line generator can then be used to compute the d attribute of an SVG path element”
23. 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.”
24. d3-shape https://github.com/d3/d3-shape
25. d3-scale https://github.com/d3/d3-shape
26. How does D3JS work with React Native?
27. ART https://github.com/sebmarkbage/art “ART is a retained mode vector drawing API”
28. ART https://github.com/sebmarkbage/art
29. ART https://github.com/sebmarkbage/art
30. 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.”
31. React ART https://github.com/reactjs/react-art
32. React Native ART https://github.com/facebook/react-native/tree/master/
34. What are we making?
36. Open Sourced https://github.com/hswolff/ BetterWeather
37. Let’s Build
38. Link ART https://facebook.github.io/react-native/docs/linking- libraries-ios.html#manual-linking
39. WeatherPage.js
40. WeatherPage.js
41. WeatherGraph.js
42. WeatherGraph.js
43. WeatherGraph.js
44. WeatherGraph.js
45. WeatherGraph.js
46. WeatherGraph.js
47. WeatherGraph.js
48. WeatherGraph.js
50. https://developer.forecast.io/
52. WeatherGraph.js
53. WeatherGraph.js
54. graph-utils.js
55. graph-utils.js
56. graph-utils.js
57. graph-utils.js
58. graph-utils.js
59. graph-utils.js
62. graph-utils.js
63. graph-utils.js
64. graph-utils.js
65. WeatherGraph.js
66. WeatherGraph.js
67. WeatherGraph.js
68. WeatherGraph.js
69. WeatherGraph.js
70. Let’s Animate
71. WeatherGraph.js WeatherPage.js
72. WeatherPage.js WeatherGraph.js
73. WeatherGraph.js WeatherPage.js
74. WeatherGraph.js WeatherPage.js
75. WeatherGraph.js WeatherPage.js
76. WeatherGraph.js WeatherPage.js
77. WeatherGraph.js WeatherPage.js
78. WeatherGraph.js WeatherPage.js
79. WeatherGraph.js WeatherPage.js
80. WeatherGraph.js
81. WeatherGraph.js
98. React Native and D3JS hswolff @hswolff https://speakerdeck.com/hswolff/react-native-and-d3js