Hugging Face's logo

Spaces:
aaronxavier
/
org-chart
Running

App Files Community
org-chart
File size: 2,967 Bytes
25d27a7
 
 
 
 
 
 
55fc2e1
 
25d27a7
 
 
 
 
0602d10
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
00f84fb
0602d10
00f84fb
0602d10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
---
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).