3D Visualization of Non-dominated Solutions

Interactive 3D visualization tool for exploring Pareto fronts in multiobjective optimization using Plotly.js.

✨ Features

• Interactive 3D Plot - Rotate, zoom, and explore non-dominated solutions
• Dark/Light Theme - Modern glassmorphism design with theme toggle
• CSV Import - Batch import solutions from CSV files
• Real-time Updates - Live reference point tracking and visualization
• Undo Support - Remove solutions and restore previous states
• Toast Notifications - User feedback for all actions
• Keyboard Shortcuts - Ctrl+Enter to add, Ctrl+Z to undo
• Responsive Design - Works on desktop, tablet, and mobile

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/gaplopes/3D-Visualization.git
   cd 3D-Visualization

2. Open in browser

   # Simply open the HTML file
   open 3D-Visualization.html
   # Or use a local server
   python -m http.server 8000

📖 Usage

Adding Solutions Manually

1. Enter X, Y, Z coordinates (0-100) in the input fields
2. Click Add Solution or press Ctrl+Enter
3. A colored cube appears showing the dominated region

Importing from CSV

1. Click Choose CSV File
2. Select a file with format: x,y,z per line
3. All valid solutions are automatically added

Example CSV:

50,50,50
70,30,20
40,60,40

Removing Solutions

• Click Remove Previous or press Ctrl+Z to undo last solution
• Click Clear All Solutions to reset completely

Theme Toggle

• Click the 🌙/☀️ button to switch between dark and light themes

📁 Project Structure

3D-Visualization/
├── 3D-Visualization.html   # Main entry point
├── style/
│   └── style.css           # Modern CSS with theming
├── script/
│   ├── Point.js            # Point class & domination logic
│   ├── State.js            # State management for undo
│   ├── Utils.js            # Utilities (toast, CSV, theme)
│   ├── Plotly.js           # 3D plot configuration
│   └── App.js              # Main application logic
├── LICENSE
├── input.csv               # Input example
└── README.md

🎨 Keyboard Shortcuts

Shortcut	Action
Ctrl+Enter	Add solution
Ctrl+Z	Remove last solution

🛠️ Technologies

• Plotly.js - Interactive 3D plotting
• Vanilla JavaScript - No framework dependencies
• CSS Custom Properties - Theming system
• Google Fonts - Inter & JetBrains Mono

📝 How It Works

The visualization shows non-dominated solutions in a 3D optimization space:

1. Reference Points track available space for new solutions
2. When a solution is added, it dominates reference points with smaller values
3. Dominated regions are visualized as colored mesh cubes
4. New reference points are generated at the solution's boundaries
5. The process continues, building up the Pareto front visualization

👤 Author

Gonçalo Lopes
📧 galopes@dei.uc.pt

📄 License

This project is licensed under the MIT License - see LICENSE for details.

---

Made using Plotly.js