This document introduces h5web, a web-based viewer for HDF5 files developed by Loïc Huder at the European Synchrotron Radiation Facility. HDF5 has become the standard format for data acquired at ESRF. H5web allows users to browse HDF5 file hierarchies, inspect metadata and attributes, and display n-dimensional datasets with interactive visualizations. Built with React and available as open-source, h5web demonstrates browsing and visualizing capabilities through a demo. Future work includes incorporating NeXus support and deploying the visualization components in other applications.

1. h5web: a web-based viewer of
HDF5 files
Loïc Huder
European Synchrotron Radiation Facility, Grenoble, France
This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No. 823852 1

2. A FEW WORDS ABOUT ESRF
International synchrotron (driven by 13
member states and 9 associate states)
Zdora M.-C. et al. (2020) highlighted in
Provides X-rays for many scientific
applications
Cultural heritage
Biology
Nanotechnologies
...
ESRF's Spotlight on Science
18/09/2020

3. HDF5 IS NOW THE STANDARD FORMAT
FOR DATA ACQUIRED AT ESRF
The HDF5 files follow , a standard for HDF5 file
structure at neutron/X-ray facilities.
Example of NeXus hierarchy
NeXus specifications

4. SWITCHING TO HDF5/NEXUS CAN BE
DIFFICULT FOR USERS
(while practical for many other reasons...)
It can be hard to retrieve/browse data as NeXus adds several levels of
hierarchy.
Data analysis/acquisition tools need to be adapted to this new
format.
→ Need for a so�ware (GUI) to easily visualise and browse HDF5 file
contents

5. THE SOFTWARE SHOULD ALLOW
Browsing the hierarchy of a HDF5 file
Inspecting the HDF5 entities (links, attributes...)
Displaying the HDF5 datasets
IT SHOULD ALSO BE
Flexible to be deployed in other applications
Performant with fast visualisations

6. PRESENTING H5WEB
A web application written in React, a component-based front-end
framework
Development started in February 2020 in the
Open-source:
Requests HDF5 metadata/data to a server-side provider (such as HSDS)
Server
HDF5 files
User
Request
Data
PaNOSC project
https://github.com/silx-kit/h5web

7. DEMO: HTTPS://H5WEB.PANOSC.EU/

8. TAKE-HOME FROM THE DEMO
✓ Browsing and inspecting
✓ Displaying n-dimensional datasets with Lines and
Heatmaps (WebGL-based visualisations with
and )
✓ Basic tools for UI: pan/zoom, colormap changes,
scale type selection...
✓ Visualisation components available as
React-three-fiber visx
npm
packages

9. NEXT STEPS
Using the WebGL-based visualisation components
outside the app:
Other web apps at ESRF, in a JupyterLab extension
NeXus support: default plots, axis labels

10. THANK YOU !
Some links:
Source:
Demo:
Component docs:
npm packages: and
This project is funded by
This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No. 823852
https://github.com/silx-kit/h5web
https://h5web.panosc.eu/
https://h5web-docs.panosc.eu/
https://www.npmjs.com/package/@h5web/lib
https://www.npmjs.com/package/@h5web/app
PaNOSC