README.md

metadata

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:

   npm install
   

2. Start the app:

   npm start
   

3. Open 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:

   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 and Static template guide.