import { Meta } from '@storybook/react';
H5Web is a web-based viewer to explore HDF5 files. It is built with React and uses react-three-fiber for visualizations.
The H5Web Component Library provides data visualization components and utilities from H5Web for use in other front-end web applications.
The components are organised in three categories:
- 🎨 Visualizations: the top-level visualization components — i.e. the components you will most likely need.
- 🧱 Building Blocks: the low-level components used by the visualization components — for advanced uses only.
- 🧰 Toolbar: the responsive toolbar and toolbar controls.
-
Make you sure you have
react
andreact-dom
v16 or greater installed. -
Install the library and its peer dependencies:
npm install @h5web/lib three @react-three/fiber
-
Install
ndarray
and, if you use TypeScript, its types package:npm install ndarray npm install --save-dev @types/ndarray
-
Convert your source array to
ndarray
and find its domain:import ndarray from 'ndarray'; import { getDomain } from '@h5web/lib'; // Initialise source 2D array const values = [ [0, 1, 2], [3, 4, 5], ]; // Flatten source array const flatValues = values.flat(Infinity) as number[]; // Convert to ndarray and get domain const dataArray = ndarray(flatValues, [2, 3]); const domain = getDomain(dataArray);
-
Import the visualization component and render it inside an element styled with
display: flex
and a height, for example:import { HeatmapVis, getDomain } from '@h5web/lib'; // ... function MyApp() { return ( <div className="my-container"> <HeatmapVis dataArray={dataArray} domain={domain} /> </div> ); }
.my-container { display: flex; height: 30rem; }
-
Configure the visualization as needed:
import { HeatmapVis, getDomain, ScaleType } from '@h5web/lib'; // ... function MyApp() { return ( <div className="my-container"> <HeatmapVis dataArray={dataArray} domain={domain} colorMap="Inferno" scaleType={ScaleType.Log} // ... /> </div> ); }
-
Import the library's styles before any other import:
import '@h5web/lib/dist/style.css'; import { HeatmapVis, getDomain } from '@h5web/lib'; // ...
H5Web's low-level building blocks can be used to create custom visualizations.
Here is a list of CodeSandbox examples to get you started: