Как построить научные растровые данные в Интернете и предоставить доступ к пикселям и размерам базовых данных?

#html #css #reactjs #raster #spectrogram

#HTML #CSS #реагирует на #растр #спектрограмма

Вопрос:

Я хочу отобразить небольшие спектрограммы аудиоклипов в виде изображений RGB на веб-странице, а также предоставить пользователю доступ к базовым значениям физических размеров, лежащим в основе визуализации RGB. Например,

  • Когда пользователь нажимает на пиксель на изображении, моя веб-страница должна печатать
    • значение y пикселя в Гц
    • его ось x в секундах, и
    • значение амплитуды звука в этом пикселе.
  • Покажите оси y (Гц) и x (секунды), выровненные рядом с визуализацией, в идеале не просто статически отображая их как часть самого PNG.

(Я могу представить себе аналогичные случаи использования с другими научными данными, когда в каждом пикселе содержится более одного значения данных. Например: выставьте фактические значения коэффициента отражения всех визуальных полос на спутниковом изображении в любом заданном пикселе.)

Веб-приложение, в котором это будет работать, в настоящее время находится в React, но я был бы готов заставить работать другие веб-технологии, если есть что-то готовое, чтобы мне не приходилось самому заниматься рисованием на холсте или чем-то подобным. Кроме того, я знаю, что мне нужно будет предоставить больше, чем обычный PNG из бэкэнда, чтобы присутствовали фактические значения данных, поэтому я очень открыт для предложений о том, как это должно выглядеть (NetCDF?)

Существуют ли библиотеки или шаблоны, которые позволили бы выполнить такое требование для Интернета?