Hypocube

Composable, responsive, React-based data visualization

Why?

I've worked with a few great, battle-tested React data-vis libraries, including Formidable, Nivo and React-Vis. 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.

Quick Start

Add Hypocube to your existing React project:

npm i --save hypocube

Create a component:

import { Chart, XAxis, YAxis, BarVerticalSeries } from 'hypocube';

const MyChart = () => (
  <Chart
    height={100}
    // the bounds of the chart, relative to the actual data:
    view={[0, 0, 4, 5]}
    isCanvas={false}
    chartStyle={{
      dataBoxFill: 'blue',
      // makes the width of the boxes dependent on the total width available:
      dataBoxThickness: ({ pxWidth }) => pxWidth / 10,
    }}
  >
    <XAxis />
    <YAxis />
    <BarVerticalSeries
      data={[
        [1, 3],
        [2, 2],
        [3, 5],
      ]}
    />
  </Chart>
);

And render your chart with:

<MyChart />

or

ReactDOM.render(<MyChart />, document.getElementById('root'));

Now: get familiar with some of our Core Concepts.