---
title: Organigram
emoji: 🗂️
colorFrom: blue
colorTo: green
sdk: static
sdk_version: "1.0.0"
app_build_command: npm run build
app_file: build/index.html
pinned: false
---

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

# Organigram

An interactive organizational chart web app. Visualize your organization as a dynamic, force-directed graph with three modes:

- **Hierarchy:** Classic org chart with CEO, project leaders, and developers, arranged by hierarchy.
- **Projects:** Projects as central nodes, people attached to their projects. Overlapping members are attracted to multiple projects.
- **Technologies:** Technologies as central nodes, people attached to the technologies they work on.

## Features
- Data loaded from an Excel file (`public/people.xlsx`)
- Images for each person in `public/images/`
- Force-directed layout with adjustable repulsion/attraction
- Zoom and pan with mouse wheel
- Responsive, full-screen UI with left navigation

## Setup & Run Locally
1. **Install dependencies:**
   ```bash
   npm install
   ```
2. **Start the app:**
   ```bash
   npm start
   ```
3. Open [http://localhost:3000](http://localhost:3000) in your browser.

## Project Structure
- `src/` — React app source code
- `public/people.xlsx` — Main data file (edit in Excel or LibreOffice)
- `public/images/` — Person images (dummy images included)

## Deployment: Hugging Face Spaces (with Gradio or Static Web App)

### Option 1: Static Web App (Recommended for React)
1. **Create a new Space** at https://huggingface.co/spaces (choose "Static" type).
2. **Push your code** to a new GitHub repo (see below for .gitignore and cleanup), then connect the repo to your Space.
3. **Hugging Face will auto-deploy** your React app as a static site.

### Option 2: Gradio (for Python backends)
If you want to use Gradio for a Python backend, you can serve the React build as static files, but for pure React, use the Static Space option above.

## .gitignore (Recommended)
```
# Node
node_modules/
build/
.env
.DS_Store
*.log
*.local

# VSCode
.vscode/

# OS
Thumbs.db
```

## Cleanup Checklist
- Remove unused files from `src/` (e.g., `App.test.js`, `logo.svg`, `reportWebVitals.js`, etc. if not needed)
- Ensure only necessary images are in `public/images/`
- Double-check `people.xlsx` for accuracy

## Instructions for Hugging Face
1. **Push your cleaned repo to GitHub**:
   ```bash
   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin <your-github-repo-url>
   git push -u origin main
   ```
2. **Create a new Hugging Face Space** (type: Static)
3. **Connect your GitHub repo** to the Space
4. **Deploy** — your app will be live at `https://huggingface.co/spaces/<username>/<space-name>`

---

For more, see the [Hugging Face Spaces documentation](https://huggingface.co/docs/hub/spaces) and [Static template guide](https://huggingface.co/docs/hub/spaces-sdks-static).