Spaces:
Running
Running
| 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). | |