https://github.com/exios66/skill_galaxy

https://github.com/exios66/skill_galaxy

Last synced: 5 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/exios66/skill_galaxy
• Owner: Exios66
• Created: 2024-12-21T04:39:05.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-30T07:12:41.000Z (over 1 year ago)
• Last Synced: 2025-08-01T07:56:50.873Z (12 months ago)
• Language: HTML
• Homepage: https://exios66.github.io/Skill_Galaxy/
• Size: 32.2 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Comprehensive Skill Galaxy Visualization

An interactive 3D visualization tool for exploring and analyzing professional skills and their relationships.

## Features

### Core Visualization

- 3D interactive plot showing skills as nodes in a galaxy

- Skills are organized by proficiency, importance, and depth of expertise

- Dynamic color coding by group or skill size

- Customizable label sizes and animation speeds

### Interactive Controls

- Filter skills by group or search term

- Multiple view presets (Default, Top, Side, Cluster)

- Adjustable animation speed and label size

- Reset functionality to restore default settings

### Skill Details Panel

- Detailed metrics for each skill:

  - Proficiency percentage

  - Importance rating

  - Impact score

  - Number of synergies

- Related skills visualization

- Skill progression indicator

### Relationship Visualization

- Dynamic connection lines between related skills

- Three types of relationships:

  - Related skills (same group)

  - Dependencies (prerequisite skills)

  - Synergies (complementary skills)

- Color-coded connections for different relationship types

## Technical Details

### Dependencies

- Plotly.js for 3D visualization

- Pure JavaScript for interactivity

- HTML5 Canvas for relationship rendering

### Browser Support

- Modern browsers (Chrome, Firefox, Safari, Edge)

- Responsive design for desktop and mobile devices

### Performance Optimizations

- Efficient data filtering and rendering

- Smooth animations with configurable duration

- Pre-render placeholder for better user experience

## Usage

1. **Basic Navigation**

   - Orbit: Click and drag

   - Zoom: Scroll or pinch

   - Pan: Right-click and drag

2. **Filtering Skills**

   - Use the group dropdown to filter by skill category

   - Type in the search box to find specific skills

   - Reset filters using the reset button

3. **Viewing Skill Details**

   - Click on any skill node to view detailed information

   - View related skills and their connections

   - Monitor skill progression and metrics

4. **Customizing the View**

   - Select different view presets for optimal viewing angles

   - Adjust label sizes for better readability

   - Modify animation speed for smooth transitions

## Implementation Notes

### Data Structure

Skills are represented with the following properties:

- **Skill**: Full name of the skill (e.g., "Machine Learning", "Python")

- **Group**: Category the skill belongs to (e.g., "AI", "Programming")

- **Label**: Short display name for visualization (e.g., "ML", "Python")

- **X**: X-coordinate position in the visualization (0.0-1.0)

- **Y**: Y-coordinate position in the visualization (0.0-1.0)

- **Size**: Relative size of the skill node (1-15)

- **ColorCode**: Color grouping for the skill (matches Group)

The data is stored in CSV format with the following schema: