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: about 2 months 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 (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-15T19:32:05.000Z (over 2 years ago)
- Last Synced: 2025-02-09T03:15:49.193Z (over 1 year 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
A proof-of-concept Express app that fetches GitHub repository topics via the GitHub API and renders them as an animated D3 bar chart. Built to explore live portfolio data visualisation; cut because topic counts vary too much between accounts to style consistently.
## Demo
## Tech stack
- **Frontend**: D3.js, Bootstrap
- **Backend**: Express
- **API**: GitHub REST API via `@octokit/core`
## Installation
1. Clone the repository and install dependencies:
```bash
git clone https://github.com/Karl-Horning/github-api-with-d3.git
cd github-api-with-d3
npm install
```
2. Copy `.env.example` to `.env`.
3. Add your GitHub personal access token as `API_KEY` and your GitHub username as `GITHUB_USERNAME`.
## Scripts
| Command | Description |
| ------------- | --------------------------------- |
| `npm start` | Start the Express server |
| `npm run dev` | Start with nodemon (auto-restart) |
## Project structure
```text
/
├── src/
│ ├── libs/ # GitHub API data-fetching and topic aggregation
│ └── public/
│ ├── html/ # Main HTML entry point
│ ├── img/ # Preview assets
│ └── js/ # D3 chart logic and bundled D3 library
└── index.js # Express server entry point
```
## Licence
MIT © 2024 [Karl Horning](https://github.com/Karl-Horning)