T-Shape Skills Visualisation

Generated by co-pilot agent.

Interactive web application for visualising and exploring T-shaped skills data with reactive filtering and modern UI.

Features

• 🎯 Interactive Filtering: Multiple toggle switches for flexible data exploration
• 📊 Reactive Visualisation: All charts and tables update automatically based on filtering
• 🔍 Skills Breakdown: Category-wise skill exploration with target comparisons
• 📈 Growth Tracking: Visual indicators showing skill progression with absolute differences
• 🏢 Alliander Basics: Filter to show only skills that all Alliander data scientists should have basic familiarity with.
• 🌐 Modern Web Interface: Built with Shiny for Python
• 📋 Data Tables: Interactive data grids for detailed skill analysis
• 🔗 GitHub Integration: Direct link to source code repository

Installation

This project uses UV for dependency management.

1. Install UV (if not already installed):

   # macOS/Linux
   curl -LsSf https://astral.sh/uv/install.sh | sh
   
   # Windows
   powershell -c "irm https://astral.sh/uv/install.ps1 | iex"

2. Clone and set up the project:

   cd t-shape-visualization
   uv sync

Usage

Run the Shiny App

uv run python src/app.py

Or use the root-level entry point:

uv run python app.py

This will start the interactive web application at http://127.0.0.1:8000

Application Interface

The application provides flexible filtering with two independent toggle switches:

1. Skills Marked for Growth Only: Shows only skills where the target level differs from current level, with growth indicators (e.g., "Python: +2")
2. Alliander Essential Skills Only: Shows only skills marked as essential for Alliander (where alliander_essential == 1)

Both filters can be used independently or combined:

• Both toggles off: Shows all skills (46 total)
• Growth toggle only: Shows skills marked for growth (27 skills)
• Alliander toggle only: Shows essential skills (35 skills)
• Both toggles on: Shows essential skills marked for growth (21 skills)

All visualisations, data tables, and breakdowns are reactive and update automatically when you change the filter settings.

Interactive Features

• Dual Toggle Filters: Independent filtering for growth focus and Alliander essential skills
• Skills Breakdown: Tabbed view by category (Domain, Technical, Personal)
• Raw Data View: Optional table showing the filtered underlying data
• Responsive Design: Works on desktop and mobile devices

Data Format

The application expects two CSV files in the data/ directory:

1. t_shape_content.csv: Skills data with columns:

   • skill: Skill name
   • category: Category (Domain/Technical/Personal)
   • y: Current skill level (0-10)
   • y_aim: Target skill level (optional)
   • alliander_essential: Whether skill is essential for Alliander (0 or 1)

2. t_shape_shape.csv: T-shape outline coordinates:

   • x: X coordinates for the T-shape
   • y: Y coordinates for the T-shape

Project Structure

t-shape-visualisation/
├── src/
│   ├── __init__.py
│   ├── app.py              # Main Shiny application with reactive UI
│   ├── data_loader.py      # Data loading and preprocessing
│   └── visualisations.py  # Visualisation functions using plotnine
├── data/
│   ├── t_shape_content.csv # Skills data
│   └── t_shape_shape.csv   # T-shape outline
├── app.py                  # Root entry point for deployment
├── requirements.txt        # Dependencies for deployment
├── pyproject.toml          # Project configuration
├── uv.lock                 # Dependency lock file
└── README.md

Technology Stack

• Python 3.9+: Core programming language
• UV: Modern Python dependency management
• Shiny for Python: Reactive web framework
• Polars: High-performance data processing
• Plotnine: Grammar of Graphics visualisation (ggplot2 for Python)
• Bootstrap: Responsive UI framework

Visualisation Features

T-Shape Plot

• Current Skills Mode: Shows all skills positioned within the T-shape outline
• Growth Mode: Shows only skills with target levels different from current, including absolute difference indicators
• Category Colours: Domain (purple), Technical (blue), Personal (green)
• Responsive Layout: Automatically scales to fit the display

Data Presentation

• Skills Breakdown: Tabbed interface showing skills by category
• Progress Indicators: Badges showing current vs target levels with delta calculations
• Interactive Tables: Sortable and searchable data grids
• Reactive Filtering: All components update simultaneously when toggling between modes

Shiny Framework

This application uses Shiny for Python which provides:

• Reactive Programming: Automatic updates when inputs change using @reactive.calc
• Modern UI: Bootstrap-based responsive interface
• Fast Performance: Built on FastAPI/Starlette
• Easy Deployment: Can be deployed to shinyapps.io and other platforms

Development

Adding Dependencies

uv add package-name

Development Dependencies

uv add --dev pytest black flake8 mypy

Running Tests

uv run pytest

Code Quality

The project follows British English spelling conventions and uses:

• Modern Python practices with type hints
• Polars for high-performance data processing (no pandas dependency)
• Reactive programming patterns with Shiny
• Clean separation of concerns between data loading, visualisation, and UI

Data Processing

The application uses Polars exclusively for data processing, providing:

• High Performance: Faster than pandas for most operations
• Memory Efficiency: Better memory usage patterns
• Type Safety: Strong typing with compile-time optimisations
• Modern API: Intuitive method chaining and expressions

Key reactive features:

• @reactive.calc decorator for computed values that update automatically
• Consistent filtering across all visualisations and tables
• Efficient data transformations using Polars expressions

Customisation

• Colours: Modify category colours in src/data_loader.py
• Layout: Adjust chart layouts in src/visualisations.py
• UI: Customise the Shiny interface in src/app.py
• Styling: Bootstrap classes and custom CSS for responsive design

Deployment

ShinyApps.io Deployment

1. Install deployment dependencies:

   uv add rsconnect-python

2. Configure your shinyapps.io account:

   uv run rsconnect add --account YOUR_ACCOUNT --name YOUR_ACCOUNT --server shinyapps.io --token YOUR_TOKEN --secret YOUR_SECRET

3. Deploy the application:

   uv run rsconnect deploy shiny . --title "T-Shape Skills Visualisation"

Other Deployment Options

• Posit Connect: Professional deployment platform
• Docker: Container-based deployment
• Cloud platforms: AWS, Google Cloud, Azure

The app includes a root-level app.py and requirements.txt for easy deployment to most Python hosting platforms.