Hypocube

React library for authoring charts

Free, open-source

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.