search

ucscXena / ucsc-xena-client

Functional genomics browser
Apache License 2.0
57 stars 42 forks source link

Determine React Charting Library - Review Short List #275

Open NoopDog opened 6 years ago

NoopDog commented 6 years ago

Possible Libraries

  1. https://formidable.com/open-source/victory/docs/
  2. https://github.com/recharts/recharts
  3. https://uber.github.io/react-vis/
  4. https://github.com/kristw/react-vega
  5. https://github.com/kristw/react-vega-lite

craft [8:42 AM] I'm a little skeptical about vega/vega-lite, because it mutates data in-place, and wants every data point to be an object.

I chatted with another react dev, who was enthusiastic about victory charts, but I haven't actually tried any of them, yet.

Try to reuse Max's code

Examine for Violin Chart Custom Scatter Plot - needs to be fast. Try to be D3 Free

madhavmk commented 5 years ago

I have been researching about which charting library is suitable for your needs and have shortlisted it down to a few libraries below I have summarized the main points about the the top contenders. (I found that this post quite useful https://mux.com/blog/so-we-redid-our-charts-part-ii-graphing-react-ing-and-maybe-a-little-crying/ ) 1) Recharts (link to website): Top rated react-native library with advanced features and great performance. Great demos and documentation. It also has a very little D3 dependency and has good compatibility with SVG. It also has customizable react components and can be used to create the requested Violin chart feature from modifying the histogram chart. 2) Victory (link to website): This is also a very well rated library similiar and comparable to Recharts. It is also highly customizable as seen in these demos (https://formidable.com/open-source/victory/guides/custom-components/). One drawback was that there was relatively less documentation and demos as compared to Recharts. 3) chart.js (react-chartjs-2) : It is not a native react library and is a just a wrapper for react. I feel there is no advantage to shift to this, as it will have the same problems and no advantage comapred to Highcharts which is also not a native react library. 4)plotly.js(react-plotly.js) : This has a huge number of highly customizable out-of-the-box ready to use graph types of which Violin plot is one of them (https://plot.ly/javascript/violin/). There is an option of using this library exclusively for the Violin chart only.

I believe that that Victory is a great choice for the project (very similar to Recharts, but Recharts has D3 dependency).

For the Violin plot, we have 2 choices 1)We could create our own chart type or customize the histogram in Victory. 2)We could use plotly.js(react-plotly.js) exclusively for the Violin plot since it has a ready-made implementation of it (https://plot.ly/javascript/violin/).

What option do you suggest I use to build the Violin chart?