🌊 Project River：把 Git 提交历史变成一条河
当需要在几个开源项目之间做选择（技术选型，评估引入依赖），你大概会去看 GitHub Star 数、最后提交的时间、Issues 积压情况。
这些数据有用，比如 Star 直接和知名度绑定，但因为此类指标没有和时间挂钩，所以不够直观。
所以我做了 Project River，一个把一个 Git 仓库的贡献者提交活动，渲染成随时间流动的河流图。
因为当我面临选择时，我想知道项目的核心维护者是谁？社区参与度怎么样？版本节奏如何？
而为什么是河流图，不是更常见的折线图或热力图？因为折线图展示的太“清楚”，没有一个真实项目开发中“混乱”但有“主心骨”的感觉。
经典的河流图长这样：
Project River 的河流图稍有差异但河流特性是一致的。
以下我使用两个经典项目的 Project River 来举例。
河流越宽，说明提交越多。每条色带是一位贡献者。一眼就能看出谁一直在写代码、社区什么时候开始壮大、核心作者有没有离开。不需要读任何数字，就能对项目的人力投入历史产生直觉判断。
React：没有一条独大的色带
React 没有一条独大的色带，多条宽带交替出现，反映出 Facebook（现 Meta）内部多人协作的模式。每年的 React Conf 前后，都能看到提交量的明显脉冲。
jQuery：一个时代的落幕
jQuery 的河流图像一条逐渐干涸的河。2012-2014 年前波澜壮阔，之后突然收窄。这是前端生态热度更替最直观的注脚，可能没有比这更清晰的方式来说明「一个库的社区热度过去了」。
实际上，从 commits 能读出很多有意思的时间节点。比方说今年 jQuery v4（是的，jQuery 发新版了）前，官方仓库有大量提交。往年发补丁也是如此。
如果接入 Agent，对项目分析质量能得到质的飞跃，这也是我对 Project River 往后的期望。
一些交互能力展示
河流图支持鼠标滚轮缩放和底部缩略时间轴（minimap）刷选。对某个时段感兴趣——比如一个大版本发布前后——可以放大看那个区间的贡献者构成。
另外，还有切换配色，切换多语言之类的小功能。
使用方式
最近没有闲钱开服务器了，所以我只做了静态版本：直接在 git pages 打开 https://lionad-morotar.github.io/project-river/ 即可体验，预置了 Vue.js、React、jQuery 和 Atom 四个项目的数据。
如果想分析自己的仓库，需要拉取项目代码本地部署。本地部署后，可以分析 github 链接或本地仓库。
当然，现在功能局限很多，比如数据是静态快照不会自动更新，想看最新数据需要重新跑一次分析。另外，只统计 Git 层面的活动，Issues、PR Review 等维度没有纳入。我对数据分析的理解还非常浅显，比如贡献量也不等于贡献质量—— 一个提交了 1000 行格式化代码的人，在图上看起来比修复了关键 Bug 的人贡献还更大...老实说，还在想办法解决。
技术上，Project River 基于 Nuxt 4 和 D3.js 构建，在线 Demo 的数据经过列式压缩后打包为静态文件部署在 GitHub Pages 上，访问时不需要服务器。项目以 BSL 1.1 许可证开源，个人使用完全免费。
相关链接