@konami33/roadmap-visualization

Interactive roadmap visualization component for React applications. Display course curricula, learning paths, and training programs with beautiful interactive visualizations.

Installation

npm install @konami33/roadmap-visualization

Quick Start

import { RoadmapVisualization } from '@konami33/roadmap-visualization';
import '@konami33/roadmap-visualization/styles';
import courseData from './data/my-course.json';

function App() {
  return (
    <div>
      <h1>My Learning Platform</h1>
      <RoadmapVisualization courseData={courseData} />
    </div>
  );
}

export default App;

Features

• Interactive Visualization: Pan, zoom, and explore course structure
• Hierarchical Display: Milestones → Modules → Classes → Labs
• Beautiful UI: Modern gradient-based design with smooth animations
• Responsive: Works on desktop and mobile devices
• Performant: Optimized for large course structures
• Flexible: Accepts JSON data for easy integration
• Self-Contained: All functionality built-in

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | courseData | CourseData | Yes | Course structure data | | className | string | No | Additional CSS class | | onModuleClick | (moduleId: number) => void | No | Module click callback | | onMilestoneClick | (milestoneId: number) => void | No | Milestone click callback |

Styling

Import the styles in your application:

import '@konami33/roadmap-visualization/styles';

License

MIT © konami33