Can i visualize data georeferenced like Panoply?

[hazemmahmoud88]

Hello I am trying to visualize netcdf data like Panoply. can you please advise if this option available?

Thanks!
Hazem

[axelboc]

Hi @hazemmahmoud88 we're not very familiar with NetCDF, and we don't know Panoply at all. Could you please be more specific about what you mean by "this option", it's not clear to me in the screenshot. Thanks! 😉

[axelboc]

Would you be able to share a file with georeferenced data so we can get a better idea of how it is currently displayed in H5Web and how you expect it to be displayed?

[coliveir-aer]

I have an example site here that was recently developed that has a link to load up this satellite data in h5web via myhdf5 : https://coliveir-aer.github.io/goes-data-explorer/

There is a good python example here of how the metadata in the .nc files can be used to plot the data with cartopy https://geonetcast.wordpress.com/2019/08/02/goes-16-goes-17-plot-with-cartopy/

I'm not super familiar with how this would normally be done in js but it must be possible to do something similar so that the raster data can be overlaid onto some map canvas if we can produce the lat/lons from the metadata. It would be really neat to just be able to select a recent date / time and product and get it to display on an integrated map canvas on the data explorer site. There are sites like https://rammb-slider.cira.colostate.edu/ that pre-tile the data and host the page but it would be neat to have a fully client-side solution for viewing individual scenes.

[axelboc]

Awesome 🤩

Thanks for sharing, it's really cool.

I'll start by pointing out that H5Web is, at its core, a library of visualization components. So it's totally possible right now to develop a custom React application with @h5web/lib that renders a HeatmapVis component along with a raster image layer (which could take the form of an img element inside an Annotation, for instance). In pseudo-code:

function MyApp() {
  return (
    <HeatmapVis 
      aspect="equal"
      dataArray={array}
      domain={domain}
    >
      <Annotation x={x} y={y}>
        <img src={imgSrc} />
      </Annotation>
    </Heatmap>
  )
}

In order to consider implementing this feature of displaying a static map layer behind a heatmap in the H5Web viewer, we would need:

• for the raster (or vectorial) map image to be stored within the HDF5 file, most likely as an opaque dataset — H5Web being a generic viewer, we cannot possibly decide which base map to use (world vs smaller region, borders, colours ...);
• for a standard format to define how to structure the HDF5 file so the viewer knows when to show this visualization, where to look for the raster/vectorial image in the file, and how to position/scale the image on the heatmap if needed.