C[omp]ute

From: andrew cooke <andrew@...>

Date: Thu, 10 Dec 2020 17:25:49 -0300

Thought I'd share experience / a recommendation for a library for plotting
with React.

Unfortunately the React wrapper for Sencha / Ext (which is what Mihaela demoed
last Thursday) is not available for free (AFAICT).

So if you're working on the cheap you need to look at options like Recharts,
react-vis, or nivo.  I tried those and Recharts seemed best, but they were all
'opinionated' high-level libraries aimed more at business infographics than
displaying 'scientific' information (IMHO).  And because they are high level
it's difficult to adjust them if your aims are elsewhere.  For example, with
Recharts it was difficult to get an auto-scaling linear axis with 'nice'
intervals - it has much better support for data in groups.

In the end, then, I ended up with visx, which is a lower-level library.  There
is no API for a 'plot' or 'chart' - you need to piece things together from
lines, axes, etc.  But it works well and appears to be reliable.

One problem with a lower-level library is that you describe everything in
pixel coordinates.  Which can be a problem in a responsive context where the
size is not known when React runs

The solution is to use a React hook that provides the width of a component and
then iterate (so render blank, get called again via the hook, and render with
the known width).  This is not trivial - if the new render changes the width
you get an infinite loop - but can be made to work (in fact, this was a bug in
nivo, which I didn't understand until the same logic was made explicit in
visx).  I used useDimensions from react-recipes.

[Edit:] It turns out that visx has a component (ParentSize) that does exactly
this, so I dropped react-recipes/useDimensions and used that.

Documentation for visx is good, but not perfect.  There's an API guide and a
lot of examples but nothing inbetween - nothing to tell you what to do.  This
means that you need to read the code, which put me off at first, but turned
out to be a good thing.  It's nicely written code and includes useful
patterns.  The API guide seems to (I may have overlooked something or be
confused) assume that you understand what attributes are passed through to SVG
elements.

Anyway, the end result was a declarative, interactive (you can move a slider
to change the display), responsive (using MUI breakpoints) plot.  Happy.

Finally, note that most of these libraries are SVG-based (nivo includes canvas
support but it was buggy for me) so not suitable for huge amounts of data.

https://airbnb.io/visx/docs
https://github.com/craig1123/react-recipes/blob/master/docs/useDimensions.md

https://recharts.org/en-US/
https://uber.github.io/react-vis/
https://nivo.rocks/

Andrew