Skip to content

datawhalechina/members-visualization

BranchesTags

Repository files navigation

🌟 Datawhale 贡献者可视化平台

智能化的开源社区贡献者分析与展示系统

GitHub stars GitHub forks GitHub issues GitHub license

Vue.js VitePress ECharts GitHub Actions

🚀 在线体验 | 📖 使用文档 | 🤝 参与贡献

📖 项目简介

Datawhale 贡献者可视化平台 是一个现代化的开源社区贡献者分析与展示系统，专为开源组织和技术社区设计。通过智能化的数据收集和精美的可视化展示，帮助社区管理者和成员更好地了解社区生态和发展趋势。

🎯 核心价值

  • 📊 数据驱动决策 - 基于真实的 GitHub 数据，提供科学的社区分析
  • 🔍 深度洞察 - 多维度分析成员活跃度、研究方向和贡献模式
  • 🎨 直观展示 - 丰富的图表类型和交互式界面，让数据说话
  • ⚡ 自动化运维 - 全自动数据更新和部署，零维护成本
  • 🌐 开箱即用 - 简单配置即可适配任何 GitHub 组织

✨ 功能特性

📊 智能数据可视化

  • 🥧 增强饼图 - 研究方向分布，支持交互钻取
  • 📊 动态柱状图 - 成员统计排序，渐变色彩设计
  • ☁️ 智能词云 - 热门方向展示，字体大小反映热度
  • 🕸️ 关系网络图 - 成员-方向关联，力导向布局
  • 📈 趋势分析图 - 发展轨迹可视化，堆叠面积图
  • 🏆 活跃度排行 - Commit 贡献统计，卷王榜单

🔍 强大搜索筛选

  • ⚡ 实时搜索 - 毫秒级响应，支持模糊匹配
  • 🎯 精确筛选 - 多维度条件组合筛选
  • 📋 智能建议 - 搜索关键词自动补全
  • 📊 结果统计 - 实时显示筛选结果数量
  • 🔖 标签过滤 - 按研究方向快速定位
  • 💾 搜索历史 - 记住常用搜索条件

👥 GitHub 深度集成

  • 🖼️ 头像管理 - 自动下载缓存，支持默认头像
  • 🔗 一键跳转 - 直达 GitHub 个人主页
  • 📈 仓库统计 - Stars、Forks、仓库数实时统计
  • 👥 社交数据 - 关注者、关注数动态展示
  • 📦 最新项目 - 展示成员最近更新的仓库
  • 🏃 活跃分析 - Commit 频率和活跃度评估

🛠️ 现代化技术架构

  • 🚀 自动化流水线 - GitHub Actions 全自动部署
  • 📱 响应式设计 - 完美适配桌面端和移动端
  • ⚡ 极速加载 - VitePress 静态生成，CDN 加速
  • 🔄 实时更新 - 每日自动拉取最新数据
  • 🎨 主题定制 - 支持亮色/暗色主题切换
  • 📊 性能监控 - API 调用统计和性能分析

🏗️ 技术架构

🛠️ 核心技术栈

Vue.js VitePress ECharts Python

层级 技术选型 说明
前端框架 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/                 # 自定义主题
│   │       ├── members/           # 成员可视化组件目录
│   │       ├── organization/      # 组织可视化组件目录
│   │       ├── projects/          # 项目可视化组件目录
│   │       ├── rankings/          # 排名可视化组件目录
│   │       ├── stats/             # 贡献者数据组件目录
│   ├── public/                    # 静态资源
│   │   ├── data/                  # 数据文件
│   │   │   ├── members.csv        # 贡献者基础数据（已废弃）
│   │   │   ├── members.json        # 贡献者基础数据
│   │   │   ├── datawhale_member.csv # 正式成员采集数据（已废弃）
│   │   │   ├── datawhale_member.json # 正式成员采集数据
│   │   │   └── commits_weekly.json # 提交活跃度数据
│   │   └── avatars/               # 成员头像缓存
│   ├── index.md                   # 首页
│   └── members.md                 # 成员可视化页面
├── 🐍 scripts/                    # Python 数据处理脚本
├── 📋 package.json                # Node.js 项目配置
├── 🔧 .env.example               # 环境变量模板
└── 📖 README.md                  # 项目文档

📊 数据模型

📋 贡献者数据结构 (members.json)

[
  {
    "id": "logan-zou",
    "name": "Logan Zou",
    "github": "https://github.com/logan-zou",
    "domain": "深度学习;LLM",
    "repositories": "llm-cookbook;self-llm;llm-universe;happy-llm;thorough-pytorch",
    "public_repos": 18,
    "total_stars": 571,
    "followers": 246,
    "following": 5,
    "avatar": "avatars/logan-zou.jpg",
    "bio": "",
    "location": "Beijing, China",
    "company": "rednote"
  }
]
字段 类型 说明
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 所属公司或组织

📈 活跃度数据结构 (commits_weekly.json)

{
  "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

🚀 3. 启动开发服务器 
# 启动开发服务器
npm run docs:dev

🌐 访问地址：http://localhost:5173

📊 数据管理

🔄 手动更新数据 
# 完整数据收集（推荐）
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         # 每个仓库最大贡献者数

🎯 核心功能详解

📊 多维度数据可视化

🥧 研究方向分布图

  • 环形饼图设计，直观展示各领域占比
  • 支持悬停交互，显示详细统计信息
  • 平滑动画效果，提升用户体验

📊 成员统计柱状图

  • 渐变色彩设计，美观且易读
  • 按数量排序，突出热门研究方向
  • 支持点击钻取，查看详细成员列表

☁️ 热门方向词云

  • 字体大小反映研究方向热度
  • 动态布局算法，避免文字重叠
  • 支持点击筛选，快速定位相关成员

🕸️ 成员关系网络图

  • 力导向布局，展示复杂关联关系
  • 节点大小反映成员活跃度
  • 交互式拖拽，自由探索数据关系

🏆 GitHub 活跃度分析

  • 📈 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 许可证 - 您可以自由使用、修改和分发本项目。

🏆 贡献者

感谢所有为本项目做出贡献的开发者们！您的每一份贡献都让这个项目变得更好。

📊 项目统计

GitHub repo size GitHub code size GitHub commit activity GitHub last commit

⭐ Star History

Star History Chart

🌟 如果这个项目对您有帮助，请给我们一个 Star！

由 Datawhale 开源社区用 ❤️ 维护

About

组织成员分析与榜单可视化，在线地址：https://datawhalechina.github.io/members-visualization/

datawhalechina.github.io/members-visualization/

Topics

visualization interesting-ideas

Resources

Readme
Activity
Custom properties

Stars

18 stars

Watchers

0 watching

Forks

3 forks
Report repository

Contributors 5

Languages