Git Commit History Visualizer

git log is a wall of text: students working on team projects can see that commits exist but cannot see how branches relate, where merges happened, or who actually wrote what. This project builds a visualiser that parses a repository's commit graph and renders it as an interactive diagram — branches as coloured lanes, commits as nodes, merges as curves — with every node clickable to reveal the full commit: message, author, timestamp, parent, files changed with addition/deletion counts, and the key hunks of the diff. A contributor panel aggregates the human side: commits per author, lines added versus removed, merge activity and the files changed most often (hotspots). The demo ships with a realistic dataset modelled on a student team project (four branches, three merged pull requests, five contributors), and the report documents the graph-layout algorithm, the data model and how a real repository's data would be ingested. It is the rare developer-tool project that is both technically meaty and immediately demonstrable.

1. Commit data (SHA, parents, author, timestamp, message, file stats) is loaded from the bundled dataset or a git log export.
2. A layout algorithm assigns each commit to a branch lane and an x-position by topological order, drawing merge curves between lanes.
3. The SVG graph renders nodes, lanes, merge curves and labels; clicking a node opens its detail view.
4. The detail view shows the commit metadata, per-file change stats and the key diff hunks with added/removed line highlighting.
5. An aggregation pass computes per-author commits and line churn, plus repository totals and hotspot files, for the analytics panels.
6. The ingestion guide documents the git log --pretty format the visualiser accepts for visualising any real repository.

Tech stack:

• HTML5, CSS3, JavaScript (ES6)
• SVG (graph rendering, no chart library)
• Git log parsing (ingestion script, Python)
• JSON dataset format (documented schema)

• [Interactive branch graph] Commits, branches and merges rendered as a navigable SVG diagram with colour-coded lanes and labelled merge curves.
• [Commit detail view] Message, author, timestamp, SHA, parent, per-file addition/deletion stats and rendered diff hunks for any commit.
• [Contributor analytics] Commits, lines added/removed and share-of-repo per author, with proportional bars.
• [Repository pulse] Totals, active branches, merged versus open pull requests, busiest weekday and hotspot files in one dashboard.
• [Merge activity timeline] Every branch-to-main merge listed with date, so the integration history reads as a story.
• [Sample team dataset] A realistic 5-contributor repository with feature branches, a hotfix and pull-request merges, ready to demo.
• [Real-repo ingestion guide] Documented path for pointing the visualiser at an actual git log export.

• Complete web app source code (HTML/CSS/JS, dependency-free)
• Sample repository dataset with documented JSON schema
• Git-log ingestion script for real repositories
• Graph-layout algorithm documentation
• Project report PDF (background, algorithm design, data model, testing)
• PPT presentation for final review
• Viva Q&A preparation document (graph layout, Git internals, SVG rendering, aggregation)

• The demo visualises a bundled dataset; pointing it at a live repository requires running the ingestion script first (documented, not automatic).
• Very large repositories (10,000+ commits) need the aggregation pre-computed — the browser layout targets classroom-scale repos.
• Diff hunks show key excerpts, not full file diffs, to keep the detail view readable.
• Octopus merges (3+ parents) render as multiple curves; the report notes this simplification.
• The tool reads history; it does not write — no committing, pushing or branch operations.