Andrew Cooke | Contents | Latest | RSS | Previous | Next

C[omp]ute

Welcome to my blog, which was once a mailing list of the same name and is still generated by mail. Please reply via the "comment" links.

Always interested in offers/projects/new ideas. Eclectic experience in fields like: numerical computing; Python web; Java enterprise; functional languages; GPGPU; SQL databases; etc. Based in Santiago, Chile; telecommute worldwide. CV; email.

Personal Projects

Choochoo Training Diary

Last 100 entries

Surprise Paradox; [Books] Good Author List; [Computing] Efficient queries with grouping in Postgres; [Computing] Automatic Wake (Linux); [Computing] AWS CDK Aspects in Go; [Bike] Adidas Gravel Shoes; [Computing, Horror] Biological Chips; [Books] Weird Lit Recs; [Covid] Extended SIR Models; [Art] York-based Printmaker; [Physics] Quantum Transitions are not Instantaneous; [Computing] AI and Drum Machines; [Computing] Probabilities, Stopping Times, Martingales; bpftrace Intro Article; [Computing] Starlab Systems - Linux Laptops; [Computing] Extended Berkeley Packet Filter; [Green] Mainspring Linear Generator; Better Approach; Rummikub Solver; Chilean Poetry; Felicitations - Empowerment Grant; [Bike] Fixing Spyre Brakes (That Need Constant Adjustment); [Computing, Music] Raspberry Pi Media (Audio) Streamer; [Computing] Amazing Hack To Embed DSL In Python; [Bike] Ruta Del Condor (El Alfalfal); [Bike] Estimating Power On Climbs; [Computing] Applying Azure B2C Authentication To Function Apps; [Bike] Gearing On The Back Of An Envelope; [Computing] Okular and Postscript in OpenSuse; There's a fix!; [Computing] Fail2Ban on OpenSuse Leap 15.3 (NFTables); [Cycling, Computing] Power Calculation and Brakes; [Hardware, Computing] Amazing Pockit Computer; Bullying; How I Am - 3 Years Post Accident, 8+ Years With MS; [USA Politics] In America's Uncivil War Republicans Are The Aggressors; [Programming] Selenium and Python; Better Walking Data; [Bike] How Fast Before Walking More Efficient Than Cycling?; [COVID] Coronavirus And Cycling; [Programming] Docker on OpenSuse; Cadence v Speed; [Bike] Gearing For Real Cyclists; [Programming] React plotting - visx; [Programming] React Leaflet; AliExpress Independent Sellers; Applebaum - Twilight of Democracy; [Politics] Back + US Elections; [Programming,Exercise] Simple Timer Script; [News] 2019: The year revolt went global; [Politics] The world's most-surveilled cities; [Bike] Hope Freehub; [Restaurant] Mama Chau's (Chinese, Providencia); [Politics] Brexit Podcast; [Diary] Pneumonia; [Politics] Britain's Reichstag Fire moment; install cairo; [Programming] GCC Sanitizer Flags; [GPU, Programming] Per-Thread Program Counters; My Bike Accident - Looking Back One Year; [Python] Geographic heights are incredibly easy!; [Cooking] Cookie Recipe; Efficient, Simple, Directed Maximisation of Noisy Function; And for argparse; Bash Completion in Python; [Computing] Configuring Github Jekyll Locally; [Maths, Link] The Napkin Project; You can Masquerade in Firewalld; [Bike] Servicing Budget (Spring) Forks; [Crypto] CIA Internet Comms Failure; [Python] Cute Rate Limiting API; [Causality] Judea Pearl Lecture; [Security, Computing] Chinese Hardware Hack Of Supermicro Boards; SQLAlchemy Joined Table Inheritance and Delete Cascade; [Translation] The Club; [Computing] Super Potato Bruh; [Computing] Extending Jupyter; Further HRM Details; [Computing, Bike] Activities in ch2; [Books, Link] Modern Japanese Lit; What ended up there; [Link, Book] Logic Book; Update - Garmin Express / Connect; Garmin Forerunner 35 v 230; [Link, Politics, Internet] Government Trolls; [Link, Politics] Why identity politics benefits the right more than the left; SSH Forwarding; A Specification For Repeating Events; A Fight for the Soul of Science; [Science, Book, Link] Lost In Math; OpenSuse Leap 15 Network Fixes; Update; [Book] Galileo's Middle Finger; [Bike] Chinese Carbon Rims; [Bike] Servicing Shimano XT Front Hub HB-M8010; [Bike] Aliexpress Cycling Tops; [Computing] Change to ssh handling of multiple identities?; [Bike] Endura Hummvee Lite II; [Computing] Marble Based Logic; [Link, Politics] Sanity Check For Nuclear Launch; [Link, Science] Entropy and Life

© 2006-2017 Andrew Cooke (site) / post authors (content).

[Programming] React plotting - visx

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

Comment on this post