How to build a real-time interactive animated chart with React Native and D3

In this workshop we will learn how to build a mobile application with React Native. We will create a custom interactive chart using D3, react-native-svg, react-native-gesture-handler, react-native-reanimated and Relay - the GraphQL client. The goal is to show how a simple but yet powerful application can be quickly built using cutting edge tool set from React. Additionally, we will showcase how to render specific chart designed to best fit custom data.

Requirements

This workshop is NOT available on the VirtualBox appliance.

Make sure you have these services installed on your laptop:

• Node v14
• NPM

Additionaly, find the 'Expo Go' mobile application and install it on your mobile phone.

Then prepare the project before workshop starts:

• Install 'Expo CLI' globally
  • $ npm install -g expo-cli
• Clone the repo:
  • https://github.com/mblenton/websc-rn-chart-graphql-server
• Clone the repo:
  • https://github.com/mblenton/websc-rn-chart-expo
• Install dependencies in both repos