essay-split

// Slide 1
My name is Ken Wheeler, I work at Formidable and I’m here to talk about charts. Specifically, creating charts with React & React Native

// Slide 2
At formidable, we’ve historically done our data viz with d3. Then this hot new super cool “view library” called React came out, and it was time to figure out how to built our charts in its ecosystem.

// Slide 3
Naturally, we wanted to continue using d3, so we had to figure out how to integrate it with React. There are two main ways to do this.

// Slide 4
The first way is via manual DOM mutation, letting d3 own its portion of the DOM, where you can do it by rendering an element, and then using d3 to format and render a chart into it in using lifecycle methods. We weren’t keen on this approach because we like React to own our DOM and manage updating it.

// Slide 5
[step through code]

// Slide 6
The second way to do this is by using react to render data as elements. This way React controls all the DOMs, We use the math from d3, derived from props, and then render that data using SVG. We chose this method because we saw greater flexibility in having control over our renderables. In fact, we liked it so much that we wrote a library around it.

// Slide 7
We call it Victory.

Victory is a collection of composable data viz components that let you easily and flexibly create data visualizations in React. Lets check it out.

Whats the only thing better than charts? ANIMATED CHARTS.

// Slide 8
In this example, you can see some of the basic chart types we provide. We have bars, lines, pies, scatter plots and area charts. We wrote a custom animation component for victory that uses d3 interpolate under the hood, so we are able to animate svg paths, as you can see here.

// Slide 9
We designed Victory to be friendly. Our components come with data by default to help you get started, and you can add your own later on. As you can see here, you don’t even need data, you can provide functions and we’ll chart that.

// Slide 10

[ show default data, functional data, styling ]

//Slide 11

We also designed Victory to be flexible. Every aspect of your data viz is customizable from styles to renderables, so if you wanted to render function based emoji cat scatter charts, we got you covered.

// Slide 12

[ Explain emoji, turn into cat snake monster ]

// Slide 13

Lastly we designed Victory to be composable. We provide several base components that you can then compose into more complicated visualizations. The skys the limit.

// Slide 14

[ compose a bunch of chart elements together ]

// Slide 15

So what about native? 

Turns out having control over our renderables was a good call. When we wanted to use the victory components that we already use on the web for react native, we were able to keep the vast majority of our logic, and simply switch out our svg renderables with ones from react-native-svg. 

// Slide 16

As you can see here, the API is almost at exact parity

// Slide 17

In this video, you can see victory native components rendering in react native, with idential behavior and APIs to the components we use on the web.

Thanks so much!