Datawhale 贡献者可视化平台 是一个现代化的开源社区贡献者分析与展示系统，专为开源组织和技术社区设计。通过智能化的数据收集和精美的可视化展示，帮助社区管理者和成员更好地了解社区生态和发展趋势。
- 📊 数据驱动决策 - 基于真实的 GitHub 数据，提供科学的社区分析
- 🔍 深度洞察 - 多维度分析成员活跃度、研究方向和贡献模式
- 🎨 直观展示 - 丰富的图表类型和交互式界面，让数据说话
- ⚡ 自动化运维 - 全自动数据更新和部署，零维护成本
- 🌐 开箱即用 - 简单配置即可适配任何 GitHub 组织
|
|
|
|
| 层级 | 技术选型 | 说明 |
|---|---|---|
| 前端框架 | Vue 3 + VitePress | 现代化静态站点生成，极速开发体验 |
| 数据可视化 | ECharts 5.x | 丰富的图表类型，强大的交互能力 |
| UI 组件 | 自研组件库 | 轻量级定制组件，完美适配业务需求 |
| 数据处理 | Python 3.8+ | GitHub API 集成，智能数据分析 |
| 自动化部署 | GitHub Actions | CI/CD 流水线，零配置自动部署 |
| 数据存储 | CSV + JSON | 轻量级数据格式，便于版本控制 |
📦 members-visualization/
├── 🤖 .github/workflows/ # GitHub Actions 工作流
│ ├── daily-data-update.yml # 每日数据自动更新
│ └── deploy.yml # 自动构建部署
├── 📄 docs/ # VitePress 文档站点
│ ├── .vitepress/ # VitePress 配置
│ │ ├── config.js # 站点配置
│ │ └── theme/ # 自定义主题
│ │ ├── 📊 Charts.vue # 数据可视化组件
│ │ ├── 👤 MemberCard.vue # 成员卡片组件
│ │ ├── 📋 MembersList.vue # 成员列表组件
│ │ ├── 📈 WeeklyCommitItem.vue # 活跃度组件
│ │ └── 📤 DataExport.vue # 数据导出组件
│ ├── public/ # 静态资源
│ │ ├── data/ # 数据文件
│ │ │ ├── members.csv # 贡献者基础数据
│ │ │ ├── datawhale_member.csv # 正式成员采集数据
│ │ │ └── commits_weekly.json # 提交活跃度数据
│ │ └── avatars/ # 成员头像缓存
│ ├── index.md # 首页
│ └── members.md # 成员可视化页面
├── 🐍 scripts/ # Python 数据处理脚本
│ └── fetch-members.py # 数据收集主脚本
├── 📋 package.json # Node.js 项目配置
├── 🔧 .env.example # 环境变量模板
└── 📖 README.md # 项目文档
id,name,github,domain,repositories,public_repos,total_stars,followers,following,avatar,bio,location,company
logan-zou,Logan Zou,https://github.com/logan-zou,深度学习;LLM,happy-llm;llm-cookbook,18,557,242,5,avatars/logan-zou.jpg,"AI Researcher",Beijing China,rednote
KMnO4-zx,不要葱姜蒜,https://github.com/KMnO4-zx,LLM,happy-llm,78,1751,596,41,avatars/KMnO4-zx.jpg,靡不有初鲜克有终,"Beijing, China",
| 字段 | 类型 | 说明 |
|---|---|---|
id |
String | GitHub 用户名（唯一标识符） |
name |
String | 成员真实姓名或昵称 |
github |
URL | GitHub 个人主页链接 |
domain |
String | 研究方向，多个用 ; 分隔 |
repositories |
String | 参与的组织仓库列表 |
public_repos |
Number | 个人公开仓库数量 |
total_stars |
Number | 获得的总 Star 数 |
followers |
Number | GitHub 关注者数量 |
following |
Number | 关注的用户数量 |
avatar |
String | 头像文件相对路径 |
bio |
String | 个人简介 |
location |
String | 地理位置 |
company |
String | 所属公司或组织 |
{
"update_time": "2025-01-19T06:00:00Z",
"days_range": 7,
"total_commits": 156,
"total_repos": 12,
"user_commits": {
"logan-zou": {
"total_commits": 23,
"repos": ["happy-llm", "llm-cookbook"],
"daily_commits": {
"2025-01-13": 5,
"2025-01-14": 8,
"2025-01-15": 10
}
}
}
}| 环境 | 版本要求 | 说明 |
|---|---|---|
| Node.js | >= 16.0.0 | 推荐使用 LTS 版本 |
| Python | >= 3.8.0 | 数据收集脚本依赖 |
| Git | >= 2.0.0 | 版本控制工具 |
📦 1. 项目初始化
# 克隆项目
git clone https://github.com/datawhalechina/members-visualization.git
cd members-visualization
# 安装前端依赖
npm install
# 安装 Python 依赖（可选）
pip install requests python-dotenv🔧 2. 环境配置
# 编辑 .env 文件
vim .env环境变量说明：
# GitHub API Token（推荐配置，避免速率限制）
GITHUB_TOKEN=ghp_your_personal_access_token_here
# 目标组织名称（默认：datawhalechina）
GITHUB_ORG=your_organization_name
# 数据收集配置
MIN_CONTRIBUTIONS=10 # 最小贡献阈值
COMMIT_DAYS_RANGE=7 # 统计最近N天的提交💡 获取 GitHub Token：访问 GitHub Settings > Developer settings > Personal access tokens 创建新的 Token
🔄 手动更新数据
# 完整数据收集（推荐）
python scripts/fetch-members.py
# 快速测试模式（处理较少数据，适合开发调试）
python scripts/fetch-members.py --test
数据收集说明：
- 🕐 执行时间：完整模式约 2-5 分钟，测试模式约 30 秒
- 📊 数据范围：自动获取组织所有公开仓库的贡献者信息
- 🤖 智能过滤：自动过滤机器人账户，确保数据质量
- 🖼️ 头像管理：自动下载并缓存成员头像
🏗️ 构建部署
# 构建生产版本
npm run docs:build
# 本地预览构建结果
npm run docs:dev部署说明：
- ⚡ 自动部署：推送到
main分支自动触发 GitHub Actions - 🕐 构建时间：通常 2-3 分钟完成构建和部署
- 🌐 访问地址：
https://your-username.github.io/members-visualization/
系统采用全自动化的数据更新机制：
| 更新方式 | 触发时机 | 执行时间 | 说明 |
|---|---|---|---|
| 定时更新 | 每日凌晨 6:00 (北京时间) | 自动执行 | GitHub Actions 定时任务 |
| 手动触发 | 随时 | 立即执行 | Actions 页面手动触发 |
| 代码推送 | Push 到 main 分支 | 自动执行 | 代码变更时重新构建 |
🎨 界面定制
// .vitepress/config.js - 站点配置
export default {
title: '你的组织名称 成员可视化',
description: '自定义描述信息',
themeConfig: {
nav: [
{ text: '首页', link: '/' },
{ text: '成员', link: '/members' }
]
}
}📊 图表样式
<!-- .vitepress/theme/Charts.vue - 图表组件 -->
<script setup>
// 自定义图表配置
const chartOptions = {
color: ['#ff6b6b', '#4ecdc4', '#45b7d1'], // 自定义颜色
animation: true, // 启用动画
// 更多配置...
}
</script>🤖 数据收集配置
# .env - 环境变量配置
GITHUB_ORG=your-organization # 目标组织
MIN_CONTRIBUTIONS=10 # 最小贡献阈值
COMMIT_DAYS_RANGE=7 # 统计天数范围
MAX_CONTRIBUTORS_PER_REPO=100 # 每个仓库最大贡献者数|
🥧 研究方向分布图
📊 成员统计柱状图
|
☁️ 热门方向词云
🕸️ 成员关系网络图
|
- 📈 Commit 活跃度排行榜 - 展示最近一周的代码贡献情况
- 📅 每日提交分布图 - 可视化成员的工作节奏和活跃时段
- 🔥 卷王指数计算 - 基于多维度指标的综合活跃度评分
- 📊 仓库贡献统计 - 展示成员在不同项目中的参与度
- ⚡ 实时搜索 - 毫秒级响应，支持拼音和模糊匹配
- 🎯 多条件筛选 - 按研究方向、活跃度、地区等维度筛选
- 📋 搜索建议 - 智能提示，快速定位目标成员
- 💾 历史记录 - 记住常用搜索条件，提升使用效率
📊 创建自定义图表组件
<!-- 1. 在 .vitepress/theme/ 目录下创建新组件 -->
<template>
<div ref="chartRef" class="custom-chart"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const chartRef = ref(null)
onMounted(() => {
const chart = echarts.init(chartRef.value)
const option = {
// 你的图表配置
}
chart.setOption(option)
})
</script>🔄 修改数据源
// 在组件中修改数据获取逻辑
const fetchData = async () => {
try {
// 从 API 获取数据
const response = await fetch('/api/your-endpoint')
const data = await response.json()
// 处理数据
return processData(data)
} catch (error) {
console.error('数据获取失败:', error)
// 降级到本地数据
return await import('/data/fallback.json')
}
}我们热烈欢迎社区贡献！无论是 Bug 修复、新功能开发还是文档改进，都是对项目的宝贵贡献。
本项目采用 MIT 许可证 - 您可以自由使用、修改和分发本项目。
感谢所有为本项目做出贡献的开发者们！您的每一份贡献都让这个项目变得更好。
🌟 如果这个项目对您有帮助，请给我们一个 Star！
由 Datawhale 开源社区用 ❤️ 维护