Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native and D3JS

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.


Harry Wolff

July 15, 2016


  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/

  5. None
  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

  15. None
  16. None
  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/

  33. None
  34. What are we making?

  35. None
  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

  49. None
  50. https://developer.forecast.io/

  51. None
  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

  60. None
  61. None
  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

  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. None
  89. None
  90. None
  91. None
  92. None
  93. None
  94. None
  95. None
  96. None
  97. None
  98. React Native and D3JS hswolff @hswolff https://speakerdeck.com/hswolff/react-native-and-d3js