Github Visualization / Github 数据可视化

效果: 一个简单的Github数据展示网页, 目前功能有:
Tech: 使用到的技术:
Purpose:
TODO:








Github Visualization / Github 数据可视化

网站链接: https://ssthouse.github.io/github-visualization/

github链接: https://github.com/ssthouse/github-visualization



效果: 一个简单的Github数据展示网页, 目前功能有:


输入github username, 展示所有repository 

支持鼠标滚轮缩放  &  拖拽
筛选是否为fork的 repository






Tech: 使用到的技术:


Vue用作 UI 快速搭建 (其实直接用纯html + js也行,  用Vue只是方便快速搭建界面)
D3.js , 数据可视化的核心库
使用github page 作为静态网页的展示, 通过配置webpack, 可以通过将 npm/yarn run build 编译到项目 /doc 目录下, 从而直接部署到github page 
从github 的api 以 GraphQL 形式提供 

使用的是 personal token ==> 详情参见文档: https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/




Purpose:


练习使用 D3.js 进行数据可视化
For fun




TODO:


展示follwer & following  ==>  并支持展示其 repository viz

V 站曾经有个热帖说为何我的开源项目只有 Fork 没有 Star，楼下有个热评说开源项目关注的不应该是 Commit 数据吗？先不论 Star、Fork 和 Commit，issue 、pr 也应是一个开源项目社区关注的数据。
下面我们来看看市面上有哪些 GitHub 数据统计工具
GitHub Star 数据统计工具
Chrome 插件—— Star History
顾名思义你可以通过 Star History 这个项目看到一个项目的趋势增长，安装上此插件之后你可以直接在某个开源项目主页，如下图所示，一键操作看 star 增长趋势无烦恼。

当然它也有在线版：https://star-history.t9t.io/ 可以戳这个链接体验。
在线版 —— StarTrack-js
StarTrack 和 Star History 类似也是一个 Star 统计工具，操作稍繁琐，需要填入该项目所有者的用户名及项目名，下图以 VEsoft-inc 的 Nebula 项目为例：

除了简单的 Star 趋势图，StarTrack 还为你统计了这个项目的 Star 总数、开源时间及每日获得 Star 数等维度数据。

GitHub 数据统计工具—— Github Statistics
不只是 Fork 数和 Commit 数，统计 issue 数的工具在 Google 搜索也是查无此项（如果你有知道此类工具欢迎在评论文留言 👏），GitHub Statistics 是据我所知唯一的可以统计某个开源项目的指标数，包括 GitHub Star、Fork、Commit、issue 和 pr 等数据的工具，当然 GitHub Statistics 也支持你查看项目的 Release 信息，在线体验：https://vesoft-inc.github.io/github-statistics/。
Github Statistics 项目采用 React 框架，在图表显示上使用了 highChart，对二者有兴趣的话可以查看源码~~
除了常规的 GitHub 数据统计之外，你可以用 GitHub Statistics 进行多项目 GitHub 数据比较，以 React、Vue、Angular 为例，以下为三个项目的 GitHub 数据分析图为例子。
多项目 GitHub 数据比较
在 GitHub Statistics 输入某个项目名，并选中点击 update 即可查看该项目的相关数据，如果你需要比较多个项目的数据，记得勾选多个项目。

项目信息总览
Repository 可以查看到 GitHub 项目的 创建时间 （可以理解为立项时间，并非开源时间）、 项目年龄 （立项到现在的时间）、 编程语言 、 最后一次更新时间 、 Watch 数，数据显示 React 和 Vue 的关注者是一个量级的。

Star 趋势图
Star 可以看到这个项目的 Star 数增长趋势 、 日增星 和 单日最高星量 。可以从总 Star 数看出，Vue 和 React  不分伯仲，Vue 异军突起，在 2017 年 6 月 17 日，Vue 项目的 star 超过了 Angular，在 2018 年 6 月 12 日弯道超车甩掉了 React。

除了总 star，GitHub Statistics 也可以看到每日增长，看看被淹没的 Angular 曾经也是 2k 起跑线的项目…再看看 Vue 和 React 在 2018 年 6 月 15 日获得 star，这一天的 star 可吊打 90% 的开源项目了（🍋 Nebula 敬上），小八卦了下这是那天的 Hacker News 热帖《Has Vue passed React yet? 》：https://news.ycombinator.com/item?id=17316267

Fork 趋势图
和 Star 趋势图类似，总趋势图可以看到这三个项目的 Fork 总数、每日平均数，看每日平均 Vue、React、Angular 相差不大，但是总量上来说，Angular 还是领先两位后起之秀的。

从每日 Fork 增量图来看，Angular 的 Fork 数比 Vue 和 React 多全靠先发优势，React 和 Vue 诞生之后，Angular 的增长大不如前，而 React 的 Fork 和 Vue 的 Fork 比较，二者是不相上下。

Commit 趋势图

虽然 star 上 Vue 和 React 是一个量级，但是在 Commit 或者说项目活跃度上，React 领跑这三个项目，🤔 当中的缘由就不揣测了。
和总的趋势图类似，每日新增 Commit 趋势也是 React 一枝独秀。

总结 GitHub Statistics
GitHub Statistics 是一个查看 GitHub 相关指标的工具，如果你在为技术选型苦恼，而你看中的技术栈刚好是开源项目，不妨用它试一试，可以看到开源项目的开发进度、社区活跃度，再也不用担心遇到“闭源”的开源项目了。GitHub Statistics GitHub 地址：https://github.com/vesoft-inc/github-statistics，在线访问：https://vesoft-inc.github.io/github-statistics/

我在阅读文献时，发现许多作者都把数据代码共享在github上，但是我点击进去，使用Download下载时，有时候会遇见点击下载没反应，或者下载速度超级慢的情况。然后就百度了一下方法。目前我最爱的方便简洁的方法就是直接用命令下载。
主要步骤就两个：
1. 复制数据的地址

2. 用终端的git clone 命令下载数据
1.首先，打开一个github网站，如公开数据库UKbiobank的预处理流程UK_biobank_pipeline_v_1
2.然后点击clone按钮，复制“clone with https”里的地址



3.打开电脑的终端，先定位到你想要文件存储的位置，我喜欢存在Download下，cd /Users/xxx/Downloads  ，然后再输入 git clone https://git.fmrib.ox.ac.uk/falmagro/UK_biobank_pipeline_v_1.git 就结束了，可以等其自动下载了。
会实时显示下载速度，进度，等到100%就可以去所在位置找数据了

文章目录
1.安装Git、node.js、Hexo
1.1 安装Git
1.2 安装node.js
1.3 安装Hexo
1.4 建立hexo站
2.配置到github
2.1 github设置
2.2 Git设置
2.3生成SSH公钥和私钥
2.4 github设置
2.5 新建一篇博客
3.发布csdn博客到hexo博客

1.安装Git、node.js、Hexo
1.1 安装Git
在 Windows 平台上安装 Git ，有个叫做 msysGit 的项目提供了安装包，可以到 GitHub 的页面上下载 exe 安装文件并运行：
官网下载：https://git-scm.com/download/win 选择合适自己的电脑版本下载
安装步骤参考：https://www.runoob.com/git/git-install-setup.html


完成安装之后，就可以使用命令行的 git 工具（已经自带了 ssh 客户端）了，另外还有一个图形界面的 Git 项目管理工具。
在开始菜单里找到"Git"->“Git Bash”，会弹出 Git 命令窗口，你可以在该窗口进行 Git 操作。
1.2 安装node.js
官网下载：https://nodejs.org/en/download/ 选择合适自己的电脑版本下载

步骤 1 : 双击下载后的安装包 v0.10.26，如下所示：



步骤 2 : 点击以上的Run(运行)，将出现如下界面：


步骤 3 : 勾选接受协议选项，点击 next（下一步） 按钮 :



步骤 4 : Node.js默认安装目录为 “C:\Program Files\nodejs” , 你可以修改目录，并点击 next（下一步）：



步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next（下一步）



步骤 6 :点击 Install（安装） 开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。 然后并点击 next（下一步）：



点击 Finish 按钮退出安装向导。


1.3 安装Hexo
（hexo是个静态页面生成、上传的工具）
hexo 可以理解为是基于node.js制作的一个博客工具，不是我们理解的一个开源的博客系统。
hexo ，不需要部署到我们的服务器上，我们的服务器上保存的其实是基于在hexo通过markdown编写的文章，然后hexo帮我们生成静态的html页面，将生成的html上传到我们的服务器。
（1）在电脑中新建一个文件夹存放自己的博客,名字自己起。例如：D盘里面新建一个 blog 的文件夹

（2）在文件夹内,鼠标右键点击，选择 Git Bash Here 。出现命令窗口



（3）之后点击Git Bash Here,则会出现如下所示界面。



（4）输入命令来安装hexo
$ npm install -g hexo-cli

安装后结果显示如下



由于默认的 NPM 镜像实在太慢太慢，我们把源替换成淘宝的镜像，

需要注意的是，这一次切换是暂时的，如果下回从 npm 下载一些东西还是觉得非常慢，记得再执行一次这一条命令。
npm config set registry "https://registry.npm.taobao.org"


1.4 建立hexo站
安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。
$ hexo init test  #初始化 ，会在原来的目录下新建一个test 的目录
$ cd test #进入到Test 目录
$ npm install

初始化过程：



进入主目录



执行
nmp install

出现错误



解决方案
npm install --ignore-scripts
npm install

成功安装npm



新建完成后，指定文件夹的目录如下：



然后在这个目录下，分别执行以下命令，来执行建站和启动站点。
hexo generate
hexo serve

建站



启动hexo站点服务：



在浏览器输入http://localhost:4000/即可访问该静态界面，其结果如下所示：


2.配置到github
2.1 github设置
(1). 在配置到GitHub之前务必确保之前已经注册了github账号，并且推荐使用邮箱注册，在github官网登陆自己账号。

点击右上角的



(2). 选择新建一个数据仓库，要注意的是Repository name命名为Owner.github.io

下图中是我的设置，完成之后即可点击Creat



(3)创建完成之后，在主界面的右上角，点击Your profile，



(4)找到自己刚刚创建的仓库（恭喜你创建了自己的第一个数据仓）



(5)点击进入该仓库界面，点击setting选项



(6)在setting中找到Theme Chooser,为我们的建站选择一个主题，

点击即可到这界面，如下所示，选择一个喜欢的主题即可


2.2 Git设置
(1).在博客目录右键Git Bash Here，进入如下目录，开始设置Git信息
git config --global user.name " GitHub 用户名 "
git config --global user.email "github用户的邮箱"



如果此处出现错误，重新初始化，再把之前的github的那个地址和邮箱再来一次
将此路径设为主路径
git init

运行结果为：


2.3生成SSH公钥和私钥
ssh-keygen -t rsa -C " 邮箱地址 "

输入该命令，并且执行，接着输入三次Enter回车，即可完成密钥的生成。

例如我的是这样：



生成密钥位置：



将生成的密钥中的id_rsa.pub使用notepad打开，将其中的内容复制到粘贴板上，我们需要将配置到github上，实现免密登陆。
2.4 github设置
在github界面，选择settings进行设置



然后按照如下图示，进行操作将刚刚复制的密钥，粘贴入github中即可。



添加完成之后，出现一个已经配置好的，如下所示：



接下来就要去复制我们创建的github仓库的地址，如下所示：



红色部分就是我们需要的地址。将其复制到剪切板。

之后修改如下路径下的_config.yml文件


将其使用notepad打开，将内容的最后的deploy属性改为这样（一定注意格式对齐）
deploy:
  type: git #部署的类型
  repository: https://github.com/zyn-master/zyn-master.github.io.git # 仓库地址
  branch: master #分支名称

这里边的地址就是刚刚我们复制的我们的创建的仓库的地址。完成之后，记得一定要将格式设置为utf-8，因为我们这里加入了中文注释，否则会出现乱码现象。
2.5 新建一篇博客
在博客目录执行如下语句，创建博客
 hexo new post "Hello"



在生成以及部署文章之前，需要安装一个 hexo-deployer-git 插件扩展

输入
npm install hexo-deployer-git --save

其结果如下：



执行下面的代码命令：
hexo d -g 

将 hexo 项目以及文章托管到 GitHub 上



如果是第一次安装的话会让你登陆一下



输入自己的github账号密码就可以了，其成功界面如下所示：



部署成功之后，访问
http://用户名.github.io #例如我的就是访问https://zyn-master.github.io/

就可看到,已经部署成功


3.发布csdn博客到hexo博客
首先进入csdn博客编辑界面，然后选择右侧的导出为markdown文件



将文件复制到hexo文件路径下的source文件夹里边，我的为下图



然后再打开Git Bash Here，输入命令
 hexo d -g 



再访问  自己的数据仓 https://zyn-master.github.io/



大功告成