Radial Diagram Generator for SDLC AI Tools

A simple, interactive web-based tool that generates radial diagrams to visualize AI tools across different Software Development Lifecycle (SDLC) phases.

Features

Interactive Visualization

Radial Layout: AI tools are displayed in a circular diagram organized by SDLC phases
Color-Coded Phases: Each SDLC phase has its own distinct color for easy identification
Tool Differentiation: Microsoft tools vs non-Microsoft tools are visually distinguished
Hover Tooltips: Detailed information appears when hovering over tool markers

Data-Driven

JSON Data Source: Reads from SDLC_Tools.json containing tool information
Dynamic Generation: Automatically arranges tools based on their SDLC phase classification
Real-time Statistics: Shows counts and distribution of tools across phases

Interactive Controls

Microsoft Filter: Toggle visibility of Microsoft tools on/off
Animation Control: Enable/disable entrance animations for tools
Regeneration: Refresh the diagram with current settings

Responsive Design

Mobile-Friendly: Adapts to different screen sizes
Modern UI: Clean, professional interface with gradient backgrounds
Accessible: High contrast colors and clear typography

Data Structure

The tool reads from SDLC_Tools.json with the following format:

[
  {
    "AI Tool Name": "GitHub Copilot",
    "SDLC": "Development",
    "Is Microsoft": "Yes"
  }
]

Supported SDLC Phases

Planning & Architecture - Tools for system design and planning
Development - Coding and development environments
Testing & Quality Assurance - Testing frameworks and QA tools
Code Review & Collaboration - Review and collaboration platforms
Deployment & Maintenance - Deployment and maintenance tools

Usage

Open: Launch index.html in a web browser
View: The radial diagram displays automatically with all tools
Interact: - Hover over tool markers to see details - Use toggle buttons to filter Microsoft tools - Control animations as desired
Analyze: Use the statistics section to understand tool distribution

Technical Implementation

Pure Web Technologies: HTML5, CSS3, and vanilla JavaScript
SVG Graphics: Scalable vector graphics for crisp visualization
No Dependencies: Self-contained with no external libraries
Responsive CSS: Flexbox and Grid layouts for device compatibility

Visualization Logic

Sectors: SDLC phases are divided into equal angular sectors
Tool Positioning: Tools are positioned within their phase sectors at varying radii
Color Mapping: Consistent color scheme for phases and tool types
Interactive Elements: Hover states and tooltips for enhanced usability

Browser Compatibility

Modern browsers supporting SVG and ES6 JavaScript
Chrome 60+, Firefox 60+, Safari 12+, Edge 79+
Mobile browsers with similar capabilities

The tool provides an intuitive way to understand the landscape of AI tools across the software development lifecycle, making it easy to identify gaps, overlaps, and the distribution of tools from different vendors.

Last built with the static site tool.