https://github.com/karl-horning/github-api-with-d3
The "GitHub API with D3" project is a web application that leverages the GitHub API to fetch and visualize repository topics for a specified GitHub user (Karl-Horning as the default). The frontend is built using D3.js, providing an interactive and informative chart for the user's GitHub repositories.
https://github.com/karl-horning/github-api-with-d3
api backend d3 github javascript node-js npm
Last synced: 29 days ago
JSON representation
The "GitHub API with D3" project is a web application that leverages the GitHub API to fetch and visualize repository topics for a specified GitHub user (Karl-Horning as the default). The frontend is built using D3.js, providing an interactive and informative chart for the user's GitHub repositories.
- Host: GitHub
- URL: https://github.com/karl-horning/github-api-with-d3
- Owner: Karl-Horning
- License: mit
- Created: 2024-01-12T21:29:57.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-15T19:32:05.000Z (about 2 years ago)
- Last Synced: 2025-02-09T03:15:49.193Z (12 months ago)
- Topics: api, backend, d3, github, javascript, node-js, npm
- Language: JavaScript
- Homepage:
- Size: 243 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🧠 GitHub API with D3
---
## 📖 Table of Contents
- [🧠 GitHub API with D3](#-github-api-with-d3)
- [📖 Table of Contents](#-table-of-contents)
- [🤓 Overview](#-overview)
- [📸 Demo](#-demo)
- [🛠️ Tech Stack](#️-tech-stack)
- [📦 Installation](#-installation)
- [🚀 Scripts](#-scripts)
- [📁 Project Structure](#-project-structure)
- [📌 To Do](#-to-do)
- [🧪 Known Issues](#-known-issues)
- [🤝 Contributing](#-contributing)
- [📚 Acknowledgements](#-acknowledgements)
- [📄 Licence](#-licence)
- [👤 Author](#-author)
---
## 🤓 Overview
A simple D3-powered web app that fetches and visualises GitHub repository topics using the GitHub API. It defaults to [Karl-Horning](https://github.com/Karl-Horning) but can be adapted to display any GitHub user's public repos.
---
## 📸 Demo
Runs locally at: [http://localhost:3000](http://localhost:3000)
---
## 🛠️ Tech Stack
- **Frontend**: D3.js, Bootstrap
- **Backend**: Express
- **API**: GitHub REST API via `@octokit/core`
- **Languages**: JavaScript (Node.js)
- **Tooling**: Chalk, Dotenv
---
## 📦 Installation
```bash
git clone https://github.com/Karl-Horning/github-api-with-d3.git
cd github-api-with-d3
npm install
```
---
## 🚀 Scripts
| Command | Description |
| ----------- | ------------------------ |
| `npm start` | Start the Express server |
---
## 📁 Project Structure
```bash
/
├── public/ # Static assets (if applicable)
├── src/
│ ├── public/img/ # Visual assets for the UI
│ ├── routes/ # Express routes
│ ├── utils/ # Utility functions
│ └── views/ # HTML and D3 code
├── .env.example # Example environment file
└── index.js # Entry point
```
---
## 📌 To Do
- [ ] Add user input to customise GitHub username
- [ ] Refactor into reusable chart components
- [ ] Add tests and CI config
---
## 🧪 Known Issues
- Does not yet support private repositories
- Chart styling can break on very small screens
---
## 🤝 Contributing
Pull requests are welcome! Please fork the repo and use a feature branch.
```bash
git checkout -b your-feature-name
```
Once your changes are ready, open a pull request with a clear description.
---
## 📚 Acknowledgements
- [D3.js](https://d3js.org/)
- [Express](https://expressjs.com/)
- [@octokit/core](https://github.com/octokit/core.js)
- [Chalk](https://www.npmjs.com/package/chalk)
- [Dotenv](https://www.npmjs.com/package/dotenv)
- [Bootstrap](https://getbootstrap.com/)
---
## 📄 Licence
MIT © 2025 Karl Horning
---
## 👤 Author
Made with ❤️ by [Karl Horning](https://github.com/Karl-Horning)