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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNjc5NDgsIm5iZiI6MTcyMTI2NzY0OCwicGF0aCI6Ii85MDcxOTcwLzI2MDczMDAyNy0yMzFkNzkwMi1hMDdkLTQ4NDktODY0Mi0zZThmYmRmZjA5OGUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MThUMDE1NDA4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OTNjZjgwOWM5MzU3OTBmMmY4OGI1MWNmNWE2M2E2ODc1NGU3ODI5OGVkNjU4MGRmYzQ5NWFhMmZiOWE3NWIyYSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.VHB6ZDaWGiPOMWDfKkb-UumlsF2dUYoWe_x-KmI_A7g)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNjc5NDgsIm5iZiI6MTcyMTI2NzY0OCwicGF0aCI6Ii85MDcxOTcwLzI2MDcyODc5Mi1kNzhmMTFhNi1iZTkwLTQ4ZGMtYjVlOS02YmY5NzhjZDhiNDcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MThUMDE1NDA4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NDFiNzc5ZjFkZDM3OWZjYjE1ODgzODIxNjIzZTg1MjdmYTI1N2Q0Mzg1ODUzMTI4NjdlMjQ2Nzg4MTY4N2NiMSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.OFicjQnpUsG6-STGe-u8ViC24cv2nfrl8vNC12CZDIE)
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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNjc5NDgsIm5iZiI6MTcyMTI2NzY0OCwicGF0aCI6Ii85MDcxOTcwLzI2MDcyNzc4OS02ODdjYzBjZi1iOWMxLTRjYmYtYTEzMC1hM2M4NGI3N2UxYTYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MThUMDE1NDA4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NmJmM2QwM2FhZjg5MTJkMmZkMWQ3MGRiOTkwN2I0M2JmNWU0ZGYxYzAwMmEwNDI0MjZjZmU5MzI4ODkzZTFjNyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.d543TE01d2b7p79yrRHa7ESYNAXUKSMBb1O0AjSMD2A)
- 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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNjc5NDgsIm5iZiI6MTcyMTI2NzY0OCwicGF0aCI6Ii85MDcxOTcwLzI2MDcyODY3Mi1kZGEyOTY4YS0zNjhmLTRiODgtYTc0YS1lY2M1MTRlMmZlNTYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MThUMDE1NDA4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NjY3YWY0NzI5ZGJjNGFjZWQ0MmY1ZjE3OTk5NWIyNzZlOGQxY2YxOWYzNDEyYWU5OWVlMjg0Yzc0MGJmYmY4ZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.Gi22glkOSnyCmEvWS4C26vrIaf_5iBCAYRfv-KSpVCY)
- 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.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNjc5NDgsIm5iZiI6MTcyMTI2NzY0OCwicGF0aCI6Ii85MDcxOTcwLzI2MDczMDE4Ny00NjgwODliMy03YzQ3LTRlNTktYmMzNC0wODk1OTgyMTJiOGYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDcxOCUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA3MThUMDE1NDA4WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZWEzYWVmZDdkMDY5MDZiY2QxZTE0YWY0MDM4ZmI3YzQwYWY5ZGJkNjhkOWY0ODhmYTdhZjcxZmMzMWY1Zjg2ZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.Ql88a2EfY9PBKw4tT6CMUY-tL2sov6EP2atWDakqO40)