mirror of
https://github.com/0xsrb/AASRT.git
synced 2026-04-22 16:06:10 +02:00
swethab
246 lines
6.9 KiB
Markdown
246 lines
6.9 KiB
Markdown
# Map Visualization Enhancements
|
|
|
|
## 🎨 New Features Added
|
|
|
|
### 1. **Multiple Map Styles**
|
|
Choose from 4 different visualization modes:
|
|
- **3D Globe** - Interactive rotating sphere (default)
|
|
- **Flat Map** - Traditional 2D projection
|
|
- **Dark Matter** - Equirectangular dark theme
|
|
- **Natural Earth** - Natural earth projection
|
|
|
|
### 2. **Threat Connections**
|
|
- Toggle to show connections between critical threats
|
|
- Dotted lines connecting high-risk targets
|
|
- Visual network of attack surface
|
|
|
|
### 3. **Animated Markers**
|
|
- Toggle for animated threat markers
|
|
- Smooth rotation for 3D globe
|
|
- Auto-rotate and pause controls
|
|
|
|
### 4. **Enhanced Markers**
|
|
Different shapes for different threat levels:
|
|
- 💎 **Diamond** - Critical threats (red)
|
|
- ⬛ **Square** - High threats (orange)
|
|
- ⚪ **Circle** - Medium threats (yellow)
|
|
- ⚪ **Circle** - Low threats (green)
|
|
|
|
### 5. **Improved Hover Information**
|
|
Rich tooltips showing:
|
|
- IP address and port (highlighted)
|
|
- Risk score with visual indicator
|
|
- Location (city, country)
|
|
- Service type
|
|
- Color-coded by severity
|
|
|
|
### 6. **Enhanced Styling**
|
|
- Larger, more visible markers (15-50px)
|
|
- Thicker borders (3px white outline)
|
|
- Better contrast with dark background
|
|
- Glowing effects on hover
|
|
- Professional color palette
|
|
|
|
### 7. **Better Geography**
|
|
- Enhanced coastlines (2px cyan)
|
|
- Visible country borders (cyan, 40% opacity)
|
|
- Dark land masses (15, 25, 35 RGB)
|
|
- Deep ocean color (5, 10, 20 RGB)
|
|
- Lake visualization
|
|
- Grid lines for reference
|
|
|
|
### 8. **Interactive Controls**
|
|
- Auto-rotate button for 3D globe
|
|
- Pause button to stop animation
|
|
- Drawing tools enabled
|
|
- Zoom and pan controls
|
|
- Mode bar with tools
|
|
|
|
### 9. **Threat Density Heatmap** (Right Panel)
|
|
- Top 10 countries by threat count
|
|
- Horizontal bar chart showing average risk per country
|
|
- Color gradient from green → yellow → orange → red
|
|
- Shows both count and average risk score
|
|
|
|
### 10. **New Analysis Sections**
|
|
|
|
#### 📡 Threat Surface Analysis
|
|
Two new visualizations below the map:
|
|
|
|
**A. Port Distribution**
|
|
- Bar chart of top 10 most common ports
|
|
- Color-coded by frequency
|
|
- Shows attack surface entry points
|
|
- Helps identify common vulnerabilities
|
|
|
|
**B. Service Breakdown**
|
|
- Donut chart of service types
|
|
- Shows technology stack distribution
|
|
- Color-coded by service
|
|
- Center shows total service count
|
|
|
|
## 🎯 Visual Improvements
|
|
|
|
### Color Scheme
|
|
- **Critical**: `#FF2D2D` (Bright Red)
|
|
- **High**: `#FF6B35` (Orange)
|
|
- **Medium**: `#FFE81F` (Star Wars Yellow)
|
|
- **Low**: `#39FF14` (Neon Green)
|
|
- **Info**: `#4BD5EE` (Cyan)
|
|
- **Background**: `rgba(0,0,0,0)` (Transparent)
|
|
|
|
### Typography
|
|
- **Headers**: Orbitron (Bold, 12px)
|
|
- **Data**: Share Tech Mono (11px)
|
|
- **Values**: Orbitron (14px)
|
|
|
|
### Animations
|
|
- Smooth marker transitions
|
|
- Globe rotation (3° per frame)
|
|
- Hover scale effects
|
|
- Fade-in for tooltips
|
|
|
|
## 🚀 How to Use
|
|
|
|
### Basic Usage
|
|
1. Run a scan to get results
|
|
2. Scroll to "GALACTIC THREAT MAP" section
|
|
3. View threats on interactive map
|
|
|
|
### Advanced Features
|
|
1. **Change Map Style**: Use dropdown to switch between 3D Globe, Flat Map, etc.
|
|
2. **Enable Connections**: Check "Show Threat Connections" to see network links
|
|
3. **Toggle Animation**: Check/uncheck "Animated Markers" for rotation
|
|
4. **Interact with Globe**:
|
|
- Click and drag to rotate
|
|
- Scroll to zoom
|
|
- Click markers for details
|
|
5. **Auto-Rotate**: Click "🔄 AUTO ROTATE" button for continuous rotation
|
|
6. **Pause**: Click "⏸️ PAUSE" to stop animation
|
|
|
|
### Understanding the Data
|
|
|
|
#### Geo Stats (Top Row)
|
|
- **🛰️ LOCATED**: Number of threats with GPS coordinates
|
|
- **🌐 SYSTEMS**: Number of unique countries
|
|
- **🏙️ SECTORS**: Number of unique cities
|
|
- **⭐ HOTSPOT**: Country with most threats
|
|
|
|
#### Map Legend
|
|
- Hover over legend items to highlight threat category
|
|
- Click legend items to show/hide categories
|
|
- Size of markers indicates risk score
|
|
|
|
#### Right Panel
|
|
- **TOP SYSTEMS**: Countries ranked by threat count
|
|
- **THREAT DENSITY**: Average risk score by country
|
|
|
|
#### Bottom Charts
|
|
- **PORT DISTRIBUTION**: Most targeted ports
|
|
- **SERVICE BREAKDOWN**: Technology distribution
|
|
|
|
## 📊 Technical Details
|
|
|
|
### Map Projections
|
|
- **Orthographic**: 3D sphere projection (best for global view)
|
|
- **Natural Earth**: Compromise between equal-area and conformal
|
|
- **Equirectangular**: Simple cylindrical projection
|
|
|
|
### Performance
|
|
- Optimized for up to 500 markers
|
|
- Smooth 60fps animations
|
|
- Lazy loading for large datasets
|
|
- Efficient frame rendering
|
|
|
|
### Responsive Design
|
|
- Adapts to screen size
|
|
- Mobile-friendly controls
|
|
- Touch-enabled on tablets
|
|
- High DPI display support
|
|
|
|
## 🎨 Customization Options
|
|
|
|
You can further customize by editing `app.py`:
|
|
|
|
### Marker Sizes
|
|
```python
|
|
df_map['size'] = df_map['risk_score'].apply(lambda x: max(15, x * 5))
|
|
```
|
|
Change `15` (min size) and `5` (multiplier) to adjust marker sizes.
|
|
|
|
### Animation Speed
|
|
```python
|
|
frames = [...] for i in range(0, 360, 3)
|
|
```
|
|
Change `3` to adjust rotation speed (higher = faster).
|
|
|
|
### Color Schemes
|
|
Modify the color variables in the marker loop:
|
|
```python
|
|
('critical', '#FF2D2D', 'CRITICAL', 'diamond')
|
|
```
|
|
|
|
### Map Height
|
|
```python
|
|
height=650
|
|
```
|
|
Adjust the height value to make map taller/shorter.
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### Map Not Showing
|
|
- Ensure scan has results with geolocation data
|
|
- Check browser console for errors
|
|
- Verify Plotly is installed: `pip install plotly`
|
|
|
|
### Slow Performance
|
|
- Reduce number of results with `max_results` parameter
|
|
- Disable animations
|
|
- Use "Flat Map" instead of "3D Globe"
|
|
|
|
### Markers Too Small/Large
|
|
- Adjust size multiplier in code
|
|
- Check risk scores are calculated correctly
|
|
|
|
## 🌟 Best Practices
|
|
|
|
1. **Start with 3D Globe** for impressive visualization
|
|
2. **Enable Connections** for critical threats only (cleaner view)
|
|
3. **Use Flat Map** for detailed regional analysis
|
|
4. **Check Port Distribution** to identify common attack vectors
|
|
5. **Review Service Breakdown** to understand technology stack
|
|
6. **Export data** for further analysis in other tools
|
|
|
|
## 📈 Future Enhancements (Ideas)
|
|
|
|
- [ ] Time-series animation showing threat evolution
|
|
- [ ] Clustering for dense areas
|
|
- [ ] Custom marker icons per service type
|
|
- [ ] Heat map overlay option
|
|
- [ ] 3D terrain elevation based on risk
|
|
- [ ] Attack path visualization
|
|
- [ ] Real-time threat feed integration
|
|
- [ ] Comparison mode (multiple scans)
|
|
- [ ] Export map as image/video
|
|
- [ ] VR/AR mode for immersive viewing
|
|
|
|
## 🎉 Summary
|
|
|
|
The enhanced map visualization provides:
|
|
- **4 map styles** for different use cases
|
|
- **Interactive controls** for exploration
|
|
- **Rich tooltips** with detailed information
|
|
- **Visual connections** between threats
|
|
- **Additional analytics** (ports, services, density)
|
|
- **Professional styling** with Star Wars theme
|
|
- **Smooth animations** and transitions
|
|
- **Responsive design** for all devices
|
|
|
|
Perfect for security presentations, threat intelligence reports, and real-time monitoring dashboards!
|
|
|
|
---
|
|
|
|
**Version**: 2.0
|
|
**Last Updated**: February 9, 2026
|
|
**Theme**: Star Wars Imperial
|