https://github.com/likhithsp/teamflowx
An interactive, professional team network visualization built with Cytoscape.js. This project displays team members as nodes and their relationships as edges, using data from a JSON & API file.
https://github.com/likhithsp/teamflowx
css cytoscapejs data-visualization html javascript jsonplaceholder-api teamflow
Last synced: about 2 months ago
JSON representation
An interactive, professional team network visualization built with Cytoscape.js. This project displays team members as nodes and their relationships as edges, using data from a JSON & API file.
- Host: GitHub
- URL: https://github.com/likhithsp/teamflowx
- Owner: LikhithSP
- License: mit
- Created: 2025-07-16T14:18:57.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-23T10:52:32.000Z (11 months ago)
- Last Synced: 2025-08-23T20:16:06.488Z (9 months ago)
- Topics: css, cytoscapejs, data-visualization, html, javascript, jsonplaceholder-api, teamflow
- Language: JavaScript
- Homepage: https://teamflowx.vercel.app
- Size: 259 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TeamFlow X
An interactive, professional team network visualization built with Cytoscape.js. Displays team members as nodes and their relationships as edges, using data from a live API or local JSON file.
Visit Now
## Features
- **Live API Data**: Fetches team data from a configurable API endpoint, with automatic fallback to local `data.json` if the API is unavailable.
- **Interactive Graph**: Visualizes team structure, departments, and relationships.
- **Professional UI**: Sidebar with controls, info panel, export-ready image and overlays for legends.
- **Search & Filter**: Find team members by name, role, or skill. Filter by department and relationship type.
- **Layout Controls**: Switch between multiple graph layouts (force-directed, circular, grid, hierarchical, concentric).
- **Export**: Download the graph as an image.
## Technologies Used
- [Cytoscape.js](https://js.cytoscape.org/) for graph visualization
- HTML, CSS, JavaScript for UI and interactivity
- Font Awesome for icons
## Getting Started
1. **Clone or Download** this repository.
2. **Configure API Endpoint** (optional):
- Edit `script.js` and set your API URL in the `apiConfig` object.
- If the API fails, the app will automatically use `data.json`.
3. **Open `index.html`** in your browser. No build step required.
4. **Edit `data.json`** to update team members and relationships for local testing.
## File Structure
- `index.html` — Main application UI and structure
- `style.css` — Professional, responsive styling
- `script.js` — Data loading (API/local), graph logic, interactivity
- `data.json` — Team data (nodes and relationships)
## Customization
- **API Integration**: Update the API endpoint and transformation logic in `script.js` for your own backend.
- **Add/Edit Team Members**: Update `data.json` or your API data.
- **Change Colors/Styles**: Modify `style.css` for custom themes.
- **Adjust Legends**: Legends are overlaid inside the graph; edit in `index.html` as needed.
## Exporting the Graph
Use the export button in the UI to download the current graph view as an image. Legends are included in the export for clarity.
## License
MIT License
## Credits
- Cytoscape.js
- Font Awesome (for icons)
- JSONPlaceholder API (for data)
---
For questions or contributions, please open an issue or pull request.