H5Web is a collection of React components to visualize and explore data. It consists of two main packages:
-
@h5web/lib
: visualization components built with react-three-fiber (this library). -
@h5web/app
: a stand-alone, web-based viewer to explore HDF5 files.
While used in @h5web/app
with HDF5 files, @h5web/lib
visualization
components are not tied to HDF5 and can be used to visualize data from any
source.
For more information, visit the Storybook documentation site.
The react
and react-dom
dependencies must be installed in your project. Note
that as of version 10, @h5web/lib
requires React 18.
This package supports TypeScript out of the box without the need to install a
separate @types/
package.
npm install @h5web/lib three @react-three/fiber ndarray
import '@h5web/lib/dist/styles.css';
import React from 'react';
import ndarray from 'ndarray';
import { HeatmapVis, getDomain } from '@h5web/lib';
// Initialise source 2D array
const values = [
[0, 1, 2],
[3, 4, 5],
];
// Flatten source array
const flatValues: number[] = values.flat(Infinity);
// Convert to ndarray and get domain
const dataArray = ndarray(flatValues, [2, 3]);
const domain = getDomain(dataArray);
function MyApp() {
return (
<div style={{ display: 'flex', height: '30rem' }}>
<HeatmapVis dataArray={dataArray} domain={domain} />
</div>
);
}
export default MyApp;
If your bundler supports it (e.g. webpack 5), you may be able to shorten the stylesheet import path as follows:
import '@h5web/lib/styles.css';
The following code sandboxes demonstrate how to set up and use @h5web/lib
with
various front-end development stacks:
H5Web works out of the box on Firefox 78 ESR. Support for Firefox 68 ESR is
possible by polyfilling the ResizeObserver
API. Older versions of Firefox are
not supported.