如何在web上绘制科学光栅数据,并访问底层数据的像素和尺寸?

我想把音频片段的小光谱图绘制成RGB图像 在网页上 ,还允许用户访问RGB渲染背后的基本物理维度值。例如

• 当用户点击图像上的一个像素时,我的网页应该打印出来
  • 像素的 Y 以赫兹为单位的值
  • 它的 十、 以秒为单位的轴,以及
  • 音频在该像素处的振幅值。
• 显示在渲染旁边对齐的y轴(Hz)和x轴(秒),理想情况下不只是作为PNG本身的一部分静态渲染它们。

(我可以想象其他科学数据的类似使用情况,其中每个像素上有不止一个数据值。例如:在任何给定像素上暴露卫星图像中所有可视波段的实际反射率值。)

这个应用程序目前正在React中,但如果有现成的东西,我愿意让其他网络技术发挥作用,这样我就不必自己维护画布绘画之类的东西了。此外,我知道我需要从后端公开的不仅仅是一个普通的PNG,这样才能显示实际的数据值,所以我非常愿意接受关于它应该是什么样子的建议(NetCDF?)

有没有库或模式可以满足web的这种需求?