Github Visualization / Github 數據可視化

[TOC]

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

若是以爲不錯的話, 不妨關注一下 : )

github主頁

知乎專欄

掘金