In the dark pandemic winter of 2020-21, I got sick of case-count charts on the web with terrible user experience. I decided to take some of what I'd learned from years of building interactive visualizations with React and put it into a general purpose library. The intent is to stand a corner-stone for future work, and to enable other developers to do the same.
There are already a few great, battle-tested React data-vis libraries, including Formidable, Nivo and React-Vis. Why did I build another one? While these are often enough to produce beautiful charts with very few lines of code, they have limitations when attempting to integrate with more complicated data-centered apps.
Some of the things I struggled with were:
- applying responsive design principles to alter text or visual design depending on screen size
- rescaling axes in response to user interaction or container size
- supporting non-mouse events that modern users expect, like swipe and pinch gestures
- seemlessly interconverting between SVG (server-side rendering!) and canvas (animations! performance!)
- using component-centric engineering to mix chart types or create new types
Hypocube introduces a layer of indirection between the "data", as mapped on a Cartesian plane, and the "design", authored in units of pixels. A base Chart component manages the scaling and passes it down via context. Hypocube uses several parts of d3 to manipulate drawing instructions, but takes a React-based approach to managing the DOM - and the canvas context.