This project is the work in progress for the practical part of my masters thesis.
The engine code is based on https://github.com/piellardj/water-webgpu.
![image](https://private-user-images.githubusercontent.com/9071970/260730027-231d7902-a07d-4849-8642-3e8fbdff098e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNzc2ODYsIm5iZiI6MTcyMTI3NzM4NiwicGF0aCI6Ii85MDcxOTcwLzI2MDczMDAyNy0yMzFkNzkwMi1hMDdkLTQ4NDktODY0Mi0zZThmYmRmZjA5OGUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MThUMDQzNjI2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YWRjNmI1OTFhNGRlOTE3Zjc1YTFjNDNlZmZiZDJmMTZkMDViOGZkNGExNDZlN2Q3YmU3MTE4MWQ4ZjA2N2QwMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.bgj1kB0ThaBiICSMwN-4bKL6ijuo7ZsD8OFav48pooM)
The data format is CSV. Use the file picker to select a csv file from your computer. After selecting the parsing begins. You can press the save button to store a direct copy of the csv file inside the browser file system. This is handy if you want to use a dataset multiple times.
![image](https://private-user-images.githubusercontent.com/9071970/260728792-d78f11a6-be90-48dc-b5e9-6bf978cd8b47.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNzc2ODYsIm5iZiI6MTcyMTI3NzM4NiwicGF0aCI6Ii85MDcxOTcwLzI2MDcyODc5Mi1kNzhmMTFhNi1iZTkwLTQ4ZGMtYjVlOS02YmY5NzhjZDhiNDcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MThUMDQzNjI2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZTY5NWRkZDhmODc2MjIwZGRhMDk0MTU3Zjg5NDE1ZjcyOGRhNTQ5ZDk5ODdlNDhkOTg5M2UyYzUxNDVhMGZkYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.1_l2luavox6olZ2ALZ1ZCr5OOfZhva9Nfl-wTMqNZzY)
The GPU simulation uses euler integration. The basic principle is that for each frame, a number of physic iterations are computed. A single iteration uses the time delta specified in the time settings. During one frame the specified number of substeps will happen.
The radius scaling is a normalized scaling factor between 0 and 1 that determines the actual point radius used in the GPU computation. This is handy when the points are too close together to see a correlation.
- Click an axis
- Select spaghetti as layout
- Select a column
- The selected axis will be the primary axis where the unique line attributes will be shown and the other axis is the time axis
![image](https://private-user-images.githubusercontent.com/9071970/260727789-687cc0cf-b9c1-4cbf-a130-a3c84b77e1a6.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNzc2ODYsIm5iZiI6MTcyMTI3NzM4NiwicGF0aCI6Ii85MDcxOTcwLzI2MDcyNzc4OS02ODdjYzBjZi1iOWMxLTRjYmYtYTEzMC1hM2M4NGI3N2UxYTYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MThUMDQzNjI2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NTdjOThmNGYxYmNkYWQ1ODZhZGUxZWY3MjVmNzNiOTQ5MTQ3YThkNjJhOWQ5NGU0MTQ3ZjY3NTBjOGE2MGFjMSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.4UobGNo3HQzbeXVZXGpeYsEirbuXasCA0TI9m2XYR2o)
- Either click an axis or the UMAP symbol on the top (this determines if UMAP will be 1 dimensional or 2 dimensional)
- Select UMAP as layout
- Select a set of features you want to project
![image](https://private-user-images.githubusercontent.com/9071970/260728672-dda2968a-368f-4b88-a74a-ecc514e2fe56.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNzc2ODYsIm5iZiI6MTcyMTI3NzM4NiwicGF0aCI6Ii85MDcxOTcwLzI2MDcyODY3Mi1kZGEyOTY4YS0zNjhmLTRiODgtYTc0YS1lY2M1MTRlMmZlNTYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MThUMDQzNjI2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NWMzNmFhMTAxY2IwOTNlMGEwMGZlNTFiZDFkYmQ0YzA4MThmZDMyYjM1YzYzYjZlY2E2ZTUyNzU1Y2Y4ODhlMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.sAPzM8l9xagnKRJDFl-RmKrEiRWgmG6guRQEQfdKA_M)
- Click an axis
- Select group by as layout
- Select a column
- The points are grouped along the axis
![image](https://private-user-images.githubusercontent.com/9071970/260730187-468089b3-7c47-4e59-bc34-089598212b8f.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNzc2ODYsIm5iZiI6MTcyMTI3NzM4NiwicGF0aCI6Ii85MDcxOTcwLzI2MDczMDE4Ny00NjgwODliMy03YzQ3LTRlNTktYmMzNC0wODk1OTgyMTJiOGYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MThUMDQzNjI2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NDVlNjJmOWQxYjYyM2UwM2M3ZDZiNmVhNjkzOWQ5MWQzMzU3ZmI4YTk5MjAwYmZjNDFlZTQ2NTVjOTM3ZTNmNiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.KejihSqDWWk3PkNtXOEySl5_EoNeXHlrSCwG_xA2G1E)