Org Chart Generator

An interactive, browser-based visualization tool for creating and managing organizational hierarchies with personnel assignments and succession planning.

---

Overview

The Org Chart Generator is a pure, browser-based visualization tool that transforms JSON data into dynamic organizational charts. It's designed for military or corporate structures and includes features for succession planning, personnel management, and real-time visualization.

Key Advantage: Runs entirely in any modern browser with no additional addons, libraries, plugins, or system dependencies required. No databases, external services, or system interconnections needed — just open and use.

---

Features

• Interactive Visualization – Canvas-based rendering of complex hierarchies

• Drag-and-Drop – Simple JSON file uploads for positions and personnel

• Personnel Management – Assign people, manage successors, track departures

• Succession Planning – Designate replacements for key positions

• Real-Time Updates – Add, edit, and remove positions or personnel dynamically

• Customizable Display – Adjustable hierarchy depth levels

• Context Menus – Right-click for quick management actions

• Visual Indicators

  • Branch-based color coding (Army, Navy, Marines, Air Force, Coast Guard, Space Force)
  • Rank/career mismatch highlighting
  • Vacant position markers
  • Departure warnings (31–60 days / ≤30 days)
  • Replacement indicators

• Export Functionality – Download charts as PNG images

• Comprehensive Legend – Visual guide for chart symbols

• Modal Forms – User-friendly data management interface

---

Getting Started

Quick Start

1. Open the Application – Open index.html in a modern browser

2. Load Sample Data

   • Use provided sample files: sample_positions.json, sample_people.json
   • Drag and drop into the designated areas

3. Explore – Adjust display levels and interact with the chart

Installation

No build process, no dependencies, no installation required – it's a pure standalone web application.

All processing happens in your browser. No server, databases, or external services are needed.

# Clone the repository
git clone https://github.com/yourusername/org-chart-generator.git
cd org-chart-generator

Open directly in your browser (any of these methods work):

# macOS
open index.html

# Windows (File Explorer)
# Double-click index.html

# Linux
xdg-open index.html

# Or simply drag index.html into your browser window

The application is fully self-contained in three files: index.html, styles.css, and scripts.js.

---

How to Use

1. Prepare Your Data

Create two JSON files.

Positions (Billets)

[
  {
    "id": "pos-001",
    "name": "Commander",
    "rank": "O6",
    "careerId": "11A",
    "branch": "Army",
    "section": "Command",
    "coreAugmentee": "Core",
    "person": "1234567890",
    "nextPerson": "0987654321",
    "supervisor": null
  }
]

Personnel

[
  {
    "edipi": "1234567890",
    "firstName": "John",
    "lastName": "Smith",
    "middleInitial": "A",
    "rank": "O6",
    "careerId": "11A",
    "branch": "Army",
    "component": "Active Duty",
    "dossierLink": "",
    "reportDate": "2023-01-15",
    "departDate": "2025-06-30"
  }
]

---

2. Upload Files

• Drag and drop JSON files into the Billets and Personnel dropzones
• Or click Replace Data Files to select files manually

---

3. Interact with the Chart

Controls

• Display Levels – Adjust visible hierarchy depth (1–6)
• Download PNG – Save chart as an image
• Replace Data Files – Reload or update data

Right-Click Context Menu

• Draw from here – Refocus chart on a specific node
• Reset View – Return to full chart
• Add Child Billet – Create subordinate position
• Assign Person – Fill a vacant billet
• Assign Replacement – Set a successor

---

4. Add or Edit Data

• Add Billet – Create new position
• Add Person – Add new personnel record

---

Data Format Details

Positions (Billets)

Field	Type	Description
id	string	Unique identifier for the position
name	string	Position title/name
rank	string	Military rank (E1–E9, WO1–CWO5, O1–O10)
careerId	string	Career field code
branch	string	Military branch
section	string	Department/section name
coreAugmentee	string	“Core” or “Augmentee”
person	string	EDIPI of assigned person (optional)
nextPerson	string	EDIPI of designated successor (optional)
supervisor	string	ID of supervisor position (optional)

Personnel

Field	Type	Description
edipi	string	Unique military identifier
firstName	string	First name
lastName	string	Last name
middleInitial	string	Middle initial
rank	string	Military rank
careerId	string	Career field code
branch	string	Military branch
component	string	Active Duty, Reserve, National Guard
dossierLink	string	URL to personnel record (optional)
reportDate	date	Date assigned to position
departDate	date	Expected departure date

---

Chart Legend

Position Colors

• Army – Dark Green
• Navy – Dark Blue
• Marines – Dark Red
• Air Force – Teal
• Coast Guard – Red
• Space Force – Purple

Borders

• Solid – Core position
• Dashed – Augmentee position

Departure Warnings

• Orange – 31–60 days until departure
• Red – ≤30 days until departure

---

Technologies

• Frontend: HTML5, CSS3, JavaScript (ES6+) — No external libraries or frameworks
• Rendering: HTML5 Canvas API (native browser feature)
• Data Format: JSON (native browser support)
• Data Storage: Browser localStorage only — no databases or external services
• Compatibility: Chrome, Firefox, Safari, Edge (modern versions)

Zero Dependencies: This application uses only native browser APIs and requires no npm packages, build tools, or external libraries.

---

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

---

File Structure

org-chart-generator/
├── index.html              # Main application
├── styles.css              # Styling and layout
├── scripts.js              # Application logic
├── sample_positions.json   # Sample data – positions
├── sample_people.json      # Sample data – personnel
├── README.md               # Documentation
└── LICENSE                 # License information

---

Features Roadmap

• Export to PDF
• Collaboration/sharing features
• Dark mode
• Multi-level export
• Real-time validation
• Custom branch colors
• CSV import support

---

Contributing

Contributions are welcome! Submit a pull request with your enhancements.

---

License

This project is licensed under the MIT License – see the LICENSE file for details.

---

Support

For issues or suggestions, open an issue on GitHub.

---

Changelog

v1.0.0

• Initial release
• Core org chart visualization
• Personnel and position management
• Succession planning features
• PNG export functionality

---

Created with ❤️ for organizational clarity.

---