rn-art-d3-examples

Intro

This is a proof of concept exercise to compare/contrast creating react-native charts (very simple ones) using react-native-pathjs-charts vs using a combination of react-native ART & d3 & d3-shape

The approach here is to take the example app included in react-native-pathjs-charts and reproduce the same charts using "the alternate approach" (rn-art + d3 + d3-shape).

I started with the pie chart and the experience creating that chart gave me enough of a feel for using "the alternate approach", so the pie chart is probably the only chart type I will reimplement with "the alternate approach".

Installation / Running

After cloning this project, running the example should simply be a matter of:

npm install
react-native run-ios

Influences from others

I didn't even realize "the alternate approach" was a possible approach until I read a couple of really great articles (and studied their corresponding github repos):

React Native ART and D3 by Harry Wolff
Animated Charts in React Native using D3 and ART by David Vacca

What's next?

Given that using d3 with react-native is a viable possibility, I wondered if others had created derivative charting libraries based on d3. After some quick googling, I quickly came across c3 which is really interesting looking. So, now I'm wondering, "So, why reinvent the wheel creating chart generators using d3 when c3 has already done that?". The immediate next thought was, "I wonder if anyone has created a react-native or react lib that wraps c3" and sure enough I came across this 2 year old project.

So, now I'm thinking that it would be nice to have a react-native-c3 library to make it super-simple to create react-native charts. I may try this out some day. Needless to say, this whole experience has made me realize that there are actually a number of different ways of creating react-native charts (yet another way I didn't mention above was using victory-native)

Update (12/29/2016): c3.js is a web/browser-based library that doesn't produce raw svg data like d3 does. So, c3js isn't immediately reusable in react-native. Maybe there's a place for react-native-pathjs-charts or victory-native or a brand new d3-based variant of one of the two to provide a resuable chart library compatible with react-native akin to c3js?

rockyxiansheng / rn-art-d3-examples Goto Github PK