GettingStarted.stories.mdx

import { Meta } from '@storybook/react';

H5Web Component Library

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.

Getting started

1. Make you sure you have react and react-dom v16 or greater installed.

2. Install the library and its peer dependencies:

   npm install @h5web/lib three @react-three/fiber

3. Install ndarray and, if you use TypeScript, its types package:

   npm install ndarray
   npm install --save-dev @types/ndarray

4. 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);

5. 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;
   }

6. 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>
     );
   }

7. Import the library's styles before any other import:

   import '@h5web/lib/dist/style.css';
   
   import { HeatmapVis, getDomain } from '@h5web/lib';
   
   // ...

Using the low-level building blocks

H5Web's low-level building blocks can be used to create custom visualizations.

Here is a list of CodeSandbox examples to get you started:

• Multiple curves
• HeatmapVis with horizontal color bar and tooltip