# hypocube

> Composable, responsive React-based data visualization.

Latest version **0.1.0** (published 2024-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install hypocube
pnpm add hypocube
yarn add hypocube
bun add hypocube
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2024-04-24 |
| First published | 2021-02-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16.0.0 |
| Dependencies | 7 |
| Unpacked size | 447.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | @CAYdenberg |
| Maintainers | caseyy |

## Links

- npm: https://www.npmjs.com/package/hypocube
- Repository: https://github.com/CAYdenberg/hypocube
- Homepage: https://github.com/CAYdenberg/hypocube#readme
- Issues: https://github.com/CAYdenberg/hypocube/issues
- npm.io page: https://npm.io/package/hypocube

## Dependencies (7)

- [d3-ease](https://npm.io/package/d3-ease.md) ^2.0.0
- [d3-scale](https://npm.io/package/d3-scale.md) ^3.2.3
- [d3-shape](https://npm.io/package/d3-shape.md) ^2.0.0
- [d3-delaunay](https://npm.io/package/d3-delaunay.md) ^5.3.0
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [color-interpolate](https://npm.io/package/color-interpolate.md) ^1.0.5
- [@use-gesture/react](https://npm.io/package/@use-gesture/react.md) ^10.1.6

## Recent versions

- 0.1.0 (latest) — 2024-04-24
- 0.0.18 — 2022-11-02
- 0.0.17 — 2022-11-02
- 0.0.16 — 2022-11-02
- 0.0.15 — 2022-01-21
- 0.0.14 — 2021-12-06
- 0.0.13 — 2021-11-30
- 0.0.12 — 2021-11-14
- 0.0.11 — 2021-11-05
- 0.0.10 — 2021-11-05
- 0.0.9 — 2021-10-20
- 0.0.8 — 2021-10-14
- 0.0.7 — 2021-10-01
- 0.0.6 — 2021-09-29
- 0.0.5 — 2021-09-23
- … 4 more at https://npm.io/package/hypocube/versions

## README

# Hypocube

Composable, responsive React-based data visualization.

[Read the docs.](https://hypocube.livingpixel.io/)

## Motivation

The visual presentation of quantitative data has always been a challenge on the web, and how to adapt to the world of responsive design is still unclear. During the COVID-19 pandemic, many of us spent too much time consulting graphs and charts that were either hard to use, misleading/inaccurate, or both. The smaller the screen, the more frustrating to the user.
Adapting a chart to a screen of unknown size might seem an impossible task - but interactivity gives us an added dimension to create data experiences which are just as content-rich, and just as accurate, regardless of the pixels available.

Hypocube is partly a distillation of a few years publishing scientific papers, and a few more as a freelance frontend developer serving research organizations. It is lessons learned from working at the interface of science and the web. It is also a passion project I started in the dark pandemic winter of 2020-21. In a time when we've never had access to more data, how we present that data matters more than ever.

## Quick Start

Add Hypocube to your existing React project:

```bash
npm i --save hypocube
```

Create a component:

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

const MyChart = () => (
  <Chart
    width={300}
    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:

```jsx
<MyChart />
```

or

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

---
_Source: https://npm.io/package/hypocube · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._