From 5866642bfdbe714ef9225e88bc6198b44bc090ba Mon Sep 17 00:00:00 2001
From: Abdul-Razak
- HDF5 Data Visualization
+ HDF5 Data Visualization - ReactJS and Python
IRUBIS HDF5 files visualized in react programmatically
+A data pipeline built with python as backend for data wrangling and reactjs for visualization
[](https://badge.fury.io/js/react) [](https://www.python.org/downloads/release/python-360/) This HDF5 visualization project written with Flask web framework(Python) as backend and React (Javascript) as frontend is served in Docker containers. HDF5 format is a hierarchical data structure, consists mainly of the following components: attributes, groups and data sets. Attributes are used for storing meta-data. Groups and data sets could be considered as folders and files, respectively, in classical file system - https://en.wikipedia.org/wiki/Hierarchical_Data_Format. -Structure of IRUBIS HDF5 files Attributes: +Structure of HDF5 files Attributes used in this project: - wavenumbers, array: Wx1, with W - number of data samples - From here you can extract wavenumbers, which are commonly used as x-axis (horizontal) for plotting spectra. Groups: @@ -30,12 +29,14 @@ measurement - floats, size NxW, with N - number of data samples, W - number of w glucose - floats, size Nx1, with N - number of data samples, consists of glucose values that were calculated based on corresponding measurement spectra. -The goal of this task is to programmaticaly extract data from files and plot two graphs. One graph should contain glucose data points and the second, the corresponding spectrum. +when the Frontend first renders, data is programmatically loaded from the dataset folder and immediately available to the frontend. +There is the possibility to choose one or two files for comparison. +The first graph should contain glucose data points. Onclick of a data point in the first graph plots the corresponding spectrum in the second graph. ## Demo Check out the live app, running on Netlify: -[Demo](https://irubis-dashboard.netlify.app/) +[Demo](https://hdf5-dashboard.netlify.app/) # [📖 Docs] diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico index a11777cc471a4344702741ab1c8a588998b1311a..85d6e23706bb1d76f9bd97fc843eaee5d7759c62 100644 GIT binary patch literal 15406 zcmeHO2~-qE8g36xoyXdq2S42nM5Hqg^ <7E%2bGPX?l_wd4j)_OUSAy$Jmj#h78yyKc0EqFNfCVqt`;bU;C_ei zj=0?EISjE)*f@==rS{j>G#+2i(`n-1g%b~_1+PpU#bW>~ TQOu>L0yzMith?W2BP)HL$TjKU3>DHb|psFY%6N{z7_Db i4Wc4Wo=iFjBGp?+hLR=XCs&Hap#wE1jq&*2sX_RMRo5I( |ZsBF^IUMZ+$0D^54q zj7}aY-@KV(?0?8AH3(;H^4z oC(v -mMAn5`)Kd9n^G-Iuw;s z`V0ozz}u-dnnv@j{AH(B&3(ZW4c5kt$t{Yc2A^LIYPcap=?&hT; Pi?ker3W|h(mx#M@&7g<&{tj)i=!#qFwzBYsywpOfo5A>R@`%i^ z`RIwc7pnsr9*+~LCro1kW%)~A%Q#!8JJ $G{W|U4Z#-Fli>_3!50Lo)5>hr^{tA?h zpC{{Uwdu4~%HMN!3cNn?lwR?L+O6wfZx68d0LW9gc22chONOXg1wIDMIR2fHwFo)i zpyL0i;$P8x>=p91Sv_O{@wmw6qAxz*(e{pVf3Csfjv?&29`^VzMp=07-Ni$^4?bXa zxsJ=fqT*kj5PPQo#rURpGpy~2wAFK0_Zk}3>*#0ytFunse`D12ZOiVoGYh!QFUX2G zr^DKpnYa6lMlE{sGHlsTPxgQ83EB CTMf+&%jO=L@Ml`;9ZXl&Uhy>Nbz;P;R zRsENruLc@?ZvSU@WdERUOJk1@^u7~yt7ziN!a&NUEjt!Fh4owt$;(&2OoN=c79i_Y z8{G1;$p9$A%&>Qs$0hr0Ih;16*{FZ9@anQPZ_jNokO8Fyn}>8rgB)ItLv`A6q^|We z!#-PAH1VRXN{BXR4X6z?J0_e&8e~|TEF->85P YU(lv!rMuy-7&Pj70IoFPkUIgg_noTHi^t_<1tB zTVWrrl}(c`YIH%k