把 Git 提交历史变成一条流动的河——Project River

是什么

你有没有好奇过一个开源项目十年的贡献者活动长什么样?谁一直在写代码?谁是后来加入的?版本大升级时社区发生了什么变化?

我做了 Project River,一个 Git 历史可视化工具------输入一个 Git 仓库,能把每位贡献者的提交活动渲染成随时间流动的河流图(Streamgraph)。

项目地址:github.com/Lionad-Moro...

在线体验:lionad-morotar.github.io/project-riv...

直接看效果:

河流越宽,说明当天的提交越多。每条色带是一位贡献者,一眼就能看出"谁在写代码"、"社区什么时候开始膨胀"、"核心作者跑了没有"。

几个有趣的发现

项目分开发和静态版,静态版预制了几个知名项目的数据,如果你想分析自己的项目,需要去 Github 拉代码本地运行。

而静态版本预置的个项目的数据,每个都能讲出不同的故事。

React --- Facebook 的集体力量

和 Vue 不同,React 没有一条独大的色带。多条宽带交替出现,反映出 Facebook 内部多人协作的模式。每年的 React Conf 前后都能看到提交量的明显脉冲。

jQuery --- 一个时代的落幕

jQuery 的河流图像一条逐渐干涸的河。2014 年前波澜壮阔,之后逐年收窄。这是前端生态热度更替最直观的注脚。

能做什么

缩放和刷选 --- 底部有一个 minimap,拖动选择框就能聚焦任意时间段。也支持触控板捏合缩放。

贡献者高亮 --- 鼠标悬停在某个色带上,对应贡献者的提交明细会浮现出来,其他层自动淡出。

项目健康信号 --- 自动分析贡献集中度、活跃度趋势等指标,帮助判断一个项目是否"健康"。

怎么用

最快的方式是直接打开 在线 Demo,预置了四个项目的数据。

如果你想分析自己的仓库:

  1. docker compose up -d 启动 PostgreSQL
  2. pnpm install && pnpm db:migrate
  3. pnpm dev 启动开发服务器
  4. 通过页面按钮或 CLI 工具分析你的 Git 仓库

刷新页面就能看到你的河流图了。

为什么是河流图

市面上的 Git 可视化工具(比如 GitHub Insights)大多用折线图或热力图展示提交量。但折线图只能回答"总量多少",无法直观感受比例和流向。

而河流图使用面积编码,同时展示总量和构成变化------对评估开源项目健康度来说,这是更合适的信息密度。

如果你也在关注开源项目的可持续性、或者想看看自己团队的提交节奏长什么样,欢迎试试。

GitHub 仓库 | 在线体验


如果觉得有意思,点个赞让更多人看到,非常感谢!

相关推荐
excel9 小时前
研究 Vue 3 源码的收获
前端·vue.js
vx-程序开发16 小时前
【计算机毕设】51300童装超市管理系统的设计与实现
java·vue.js·spring boot·源码·课程设计·毕设·大作业
ym hyd 11117 小时前
题库建立与考试系统源码 Java+SpringBoot+Vue3 前后分离
java·开发语言·vue.js·spring boot·毕设
YZ12255219 小时前
【Docker专题】使用Docker部署Vue-Flask项目前后端分离版【前端Docker部署】
前端·vue.js·docker
专业程序开发源20 小时前
springboot古城景区管理系统88564-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·spring·php·课程设计
小蒜学长20 小时前
基于SSM+VUE的电影售票平台的设计与实现(代码+数据库+LW)
java·vue.js·spring boot·后端·ssm框架·电影售票平台
Q264336502321 小时前
【有源码】基于Spring Boot+Vue的骑行爱好者平台的设计与实现-计算机毕设选题推荐
java·vue.js·spring boot·毕业设计·课程设计·数据可视化·源代码
FYKJ_201021 小时前
SpringSecurity教室智能预约系统73972-计算机课程设计、毕业设计
java·vue.js·spring boot·python·mysql·spring·django
专业程序开发源21 小时前
springboot酒店会员点餐系统22339-计算机课程设计、毕业设计
java·javascript·vue.js·spring boot·后端·php·课程设计
FYKJ_201021 小时前
springboot游泳馆管理系统79222-计算机课程设计、毕业设计
vue.js·spring boot·后端·python·mysql·django·课程设计